Results 1 to 5 of 5

Thread: Ultimate Fade-in slideshow (v2.4) html descriptions

  1. #1
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow (v2.4) html descriptions

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

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

  2. #2
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default slideshow description hyperlinked

    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.

  3. #3
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default changes in fadeslideshow.js

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You really don't need to modify anything for that.

    Here's an example of what you can do:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    panamajoules (09-21-2010)

  6. #5
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default thank you!

    That is so wicked! Thank you so much John!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •