Ultimate fade-in slide show [Archive]

PFuser

07-03-2011, 02:17 AM

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Thanks for making the fade-in slideshow available. I am not a technical person and am having difficulty getting this to work. I like the first demo, where the photos fade in/change, without text or arrows.

I see there are TWO steps. The first one is where you copy and paste the code from the DD box and put between the two <HEAD> tags. I see where I need to replace the DD sample images with my own images. So far, so good.

Now for part 2, I am totally confused. I pasted the code from the second DD box right where I would like to have the slideshow - although I'm not sure what do enter for the .png file.

All I get is a script error, one of my photos and then two missing tinypic photos.

Any advice you can offer would be greatly appreciated.

Again, I'm not technical, so the simpler the better.

Thanks,

Nile

07-03-2011, 03:27 AM

Assuming you've downloaded and placed fadeslideshow.js in the right folde, follow the instructions below.

Going back to the beggining, paste the following in the <head> section of your page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://link-to-image"],
["http://link-to-image2"],
["http://link-to-image3"]
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "none",
togglerid: ""
});
</script>

And replace the highlighted with the links to your images.

Now, if you like the first example on the page, you're going to want to paste the following markup where you want it on your page:

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

Try that, and tell me how it goes.