Ultimate Fade-in slideshow (2.1) caption placement

[bluepupae]

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

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

3) Describe problem: I was able to modify the location of the caption, but it always remains in the same place. The heights of the images in my slideshow varies, and I would like to determine the height of the current image and place each caption underneath the current image.

My page is here:
http://www.bluepupae.com/test/presidioHabitats/artist.php?code=1

I tried setting top on desc panel --> setting.$descpanel.css({top:setting.$gallerylayers.find('img').height()})

but it only works on the first image. the caption still stays in the same position.

thanks.

[ddadmin]

Try using the undocumented onslide event handler inside your initialization code as follows:


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 380], //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(curlayer, curimage){
var $image=jQuery(curlayer).find('img').eq(curimage) //reference current image being shown
var $descpanel=this.setting.$descpanel //reference description panel
$descpanel.css({top:parseInt($image.css('marginTop'))+parseInt($image.height())})
}
})

Add the portion in red to your initialization code (don't forget the trailing comma (') that should follow all options except the very last one, in this case onslide()). Basically what the code does is repositions the description panel at the end of each image when the slideshow rotates.

[bluepupae]

thank you. I added the following and it works beautifully!

onslide:function(curlayer, curimage){
var $image=jQuery(curlayer).find('img').eq(curimage) //reference current image being shown
var $descpanel=this.setting.$descpanel //reference description panel
$descpanel.css({top:parseInt($image.height()) + 5})
}