PDA

View Full Version : Help needed with Ultimate Fade in Slideshow



andysam
03-24-2010, 06:58 AM
1) Script Title: ultimate fade in slideshow

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

3) Describe problem: Hi all
I'm new to javascript.

all I want is to use this script. but instead of the desc overlapping my image i want it to come to the right of the image.
I want 2 tables on which shud have the images and the other one which ahs the description. and both shud be timed together.
I hope this is making sense.
Plz Help

ddadmin
03-25-2010, 06:58 AM
Sure, try this. In the configuration code for the slideshow (of your head section), try the following changes:


var mydesc=[
"desc 1",
"desc 2",
"desc 3",
"desc 4",
]

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //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://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler",
onslide:function(img, index){
document.getElementById('descdiv').innerHTML=mydesc[index]
}
})

Firstly, notice the custom array you should create to store the descriptions for each slide. The descriptions inside the
imagearray[] should be removed at the same time. Then, define the onslide() event handler in the manner above, which populates the empty DIV with ID="descdiv" on your page with the corresponding description for each slide. Be sure to change "descdiv" depending on the ID of your DIV.