PDA

View Full Version : Ultimate Fade-in slideshow (v2.4) html descriptions



panamajoules
09-20-2010, 03:42 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Describe problem: I want to be able to add hyper-linked text to the descriptions (captions) in this slideshow. Any ideas?

panamajoules
09-20-2010, 06:07 PM
To make it easier I could use the same hyperlink for the description that is being used for each image in the slideshow... and just use the whole description hyperlinked. But to do this I guess I have to modify fadeslideshow.js to pass on some argument when each description is created but I don't know how to do this.

panamajoules
09-21-2010, 12:45 PM
Still can't get it to work but this is what I have done.

I added the following function:


getCaptionHTML:function(imagearray){
for (var i=0; i<imagearray.length; i++){
var CaptionHTML=(imagearray[i][1])? '<a href="'+imagearray[i][1]+'" target="'+imagearray[i][1]+'">\n' : '' //hyperlink slide?
CaptionHTML+='<div class="fadeslidedescdiv"></div>\n'
CaptionHTML+=(imagearray[i][1])? '</a>\n' : ''
return CaptionHTML
} //return HTML for this Caption
},


firebug is telling me that imagearray in the "for" is undefined but I really don't know why since the function getFullHTML is using it in the exact same way...

I've also changed the following line in fadeslideshow.js

from:


setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')


to:


setting.$descpanel=$(this.getCaptionHTML())


Any ideas? Thanks.

jscheuer1
09-21-2010, 03:42 PM
You really don't need to modify anything for that.

Here's an example of what you can do:


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://i26.tinypic.com/11l7ls0.jpg", "", "", "<a style='color: #fff;' href='http://www.google.com/'>Nothing</a> 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:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

Note: Since the caption/description string is delimited by " marks, the attributes of the link tag must use ' marks instead.

panamajoules
09-21-2010, 08:21 PM
That is so wicked! Thank you so much John!