Embedding fade in slideshow HTML into my homepage, ANY HELP?

  • 1
  • Problem
  • Updated 7 years ago
  • In Progress
Hi there,

I am kinda nearing completion of my website and think its starting to look not too bad, however, i have been trying to work out a way of having a fade in slideshow on my homepage with the images i currently have in the white box see my site here www.retroworldfootballshirts.co.uk.

I have been trying to recreate the look of http://www.poochieprints.com/ homepage and have the images fading in and out in a cycle and to that end can i thank Stacey from poochie prints for the coding for the slideshow which can be found at this url http://www.dynamicdrive.com/dynamicin...

Having real difficulty putting in my own images however and kind of lost now, i am a newbie to HTML but been picking things up not too bad until now, also when an image appears i hope to be able to link that to another part of my site to take the suer through to the prodcut pages. Looking to launch next Friday, eeek, so not quite got stock uploaded yet.

Anyone out there able to offer a helping hand??

Steven
Photo of steven

steven

  • 11 Posts
  • 0 Reply Likes
  • confused

Posted 7 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Steven, 

 

I can definitely help with this! When adding your images, please be sure to use the correct image pathway. It should look like this: "resources/yourfilename.jpg".  You should be able to set up a link as well. 

 

I do not see the code on your site? Have you published your site since adding the code? If not, do you mind if I take the liberty of going into your site and seeing if I can figure this out?
Photo of steven

steven

  • 11 Posts
  • 0 Reply Likes
Hi Sanja,

Yes any help wpuld be fantastic, i have created a picture gallery using html on another page of my site, in the Retro football shirts link, its these images i am trying to use for the slideshow and i think you should be able to get the url codes for the images from there?

I have attempted to put the code in but deleted it again when it did not work. Just tryin to create an attractive homepage!

Many thanks in advance for any help i have no probs with you taking the liberty of going into my site to figure it out.

Steven
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Steven,

Great.. please leave this with me. If you can please set up the code again and then I'll take a look at what's going on.
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
I think I have an answer to your question. Visit my website to see if the image slideshow on my website is what you want. http://www.552industries.com/

If you wish to have something like this on your website, I'll be glad to help. And don't worry - you can configure the slideshow to be larger or smaller based on the images available.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Steven,

I am still not seeing the code on your site? Have you re-added it back in? Please let me know when you have done this. Thanks!
Photo of steven

steven

  • 11 Posts
  • 0 Reply Likes
Hi Sanja, i have now re added the code under the Retro Sportswear page of my site, i tried dabbling about with it so the lniks to photobucket images are contained within the code

Michael, thats the sorta idea i am after! any assistance again would be much appreciated!

Cheers all
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
(Sorry for the long post, guys.)

I'll go ahead and give me my source code used for the slideshow I have on my website.

Grab the code here:

http://paste.ubuntu.com/633127/

Drag and drop an HTML widget to the top of the page you want the slideshow on. (This isn't the code that actually shows the slideshow, we will get to that later.

If you have a Yola Silver account, you can upload .js files. In that case, just download the slideshow .js file from my download bin:

http://www.552industries.com/resource...

The instructions below apply to all parts of the code where you see

<script type="text/javascript" src="resources/path/to/file.js">


If you don't have Yola Silver, write

<script type="text/javascript" src="http://www.552industries.com/ss/fadeslideshow.js">


Instead of

<script type="text/javascript" src="resouces/path/to/file.js">


Then copy and paste this...

<div id="fadeshow1"></div>

... where you actually want the slideshow to appear.

Some configuration instructions:


dimensions: [311, 225], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["resources/path/to/image.jpg"],
["resources/path/to/image.jpg"],
["resources/path/to image.jpg"],
["resources/path/to image.jpg"] //NO TRAILING COMMA AFTER LAST IMAGE!
],


Be sure to watch for these instructions in the code I have provided. The dimensions bracket is self explanatory, however the image referencing may be difficult. Just copy one of the lines and paste between the beginning of the list and the end.

Other advanced configuration options are available sprinkled in the code if you want to experiment.

If you have any questions, just ask. Hope this helps!
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Thanks for sharing this, Michael!
Photo of steven

steven

  • 11 Posts
  • 0 Reply Likes
cheers for that michael i have followed your step by step guide and cannot for the life of me get the slidshow displaying i am obviously making an error someplace but cant work out where :-/ I am a bit miffed as your instructions are so clear and concise.
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Hm. First of all, do you have Yola Silver? Second, what is the page you tried this on? Once you give me the URL, I'll go to the page and look at it's source code so I can see what you did wrong.
Photo of steven

steven

  • 11 Posts
  • 0 Reply Likes
Hey i have Yola Silver the url is http://www.retroworldfootballshirts.c...

I decided not to upload the images and code to my yola file manager but to instead use the alt methid you described!! cheers michael
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Steven,

Thanks for your patience. I have fixed up the slideshow for you. You had forgotten to upload the .js file and the images to your File Manager.

You should now see it working in your Sitebuilder. Please be sure to click on the green "Publish to the web" button to apply the changes.
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Lookin' nice! I noticed that you used the solution I proposed, right?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Michael,

I used the Dynamic Drive fade-in slideshow :)
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Same one that I used. Looks great on your website, Steven!
Photo of ryanhall1995

ryanhall1995

  • 2 Posts
  • 0 Reply Likes
A: Where abouts do i drop the html, there is no place at the top of the page but the header
B: What do i do with the .js file do i upload it to my site or something?
C: where do i copy and paste
???

Btw i have silver and my website is not yet publishes asap help would be appreciated,
Photo of ryanhall1995

ryanhall1995

  • 2 Posts
  • 0 Reply Likes
does it only show when published?
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Try looking at your website when it is published. It may take some time appearing while in the sitebuilder.
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
If you need urgent help, you can chat with me via gmail: kr3m1in@552clan.com or Skype me: Kr3m1in.
Photo of steven

steven

  • 11 Posts
  • 0 Reply Likes
Think i nailed it now, i have moved the slideshow over to my homepage, looks good i hope!

Thanks for all your help everyone, only 4 days till i launch!