Advanced Search

Results 1 to 4 of 4

Thread: Continuous Reel Slideshow

  1. #1
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Continuous Reel Slideshow

    1) Script Title: Continuous Reel Slideshow

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

    3) Describe problem: I was wondering if there was a way to add alt tags to Continuous Reel Slideshow.

    thanks for the help

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    First off, there is no alt tag. It's called an attribute. Are you sure you want alt attributes? The reason I'm asking is that in IE less than 8 the alt attribute, in addition to performing the actual function of an alt attribute, acts like a title attribute - giving a sort of tooltip for an image. In all others, and IE as well, if you want a tool tip, use title, not alt. The title attribute will provide a tooltip in IE and all others.

    So just what are you after? The alt attribute is useful if an image is missing/didn't load, or if the browser isn't displaying images. The alt attribute is particularly useful for the visually impaired if they're using a text reader.

    That all said, here's a way to get alt attributes to the images (from the demo code on the demo page, additions/changes highlighted, comments green, variable name red):

    Code:
    var firstreel=new reelslideshow({
    	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
    	dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [ //["image_path", "optional_link", "optional_target", "optional_alt"]
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Pool Chair in a Pool"],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Cave Scene"],
    		["http://i30.tinypic.com/531q3n.jpg", "", "", "Still Life Fruits"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "Autumn Trees"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
    	orientation: "h", //Valid values: "h" or "v"
    	persist: true, //remember last viewed slide and recall within same session?
    	slideduration: 300 //transition duration (milliseconds)
    });
    jQuery(function($){
    	firstreel.$wrapperdiv.find('img').each(function(i){
    		this.alt = firstreel.setting.imagearray[i][3] || '';
    	});
    });
    This method can be adapted for any continuous reel. Just use its variable name in place of firstreel in the added jQuery function.

    If you want the title attribute instead, use title in place of alt in the added jQuery function.

    Any questions, feel free to ask.
    Last edited by jscheuer1; 04-07-2011 at 03:18 AM. Reason: detail about IE versions
    - John
    ________________________

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

  3. #3
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for the help. I need alt attributes because we are a college and we may disabled people viewing our site. i went ahead and figured out how to add the title attribute also.
    thanks for your help.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    Just in case you added more code than you needed:

    Code:
    var firstreel=new reelslideshow({
    	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
    	dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [ //["image_path", "optional_link", "optional_target", "optional_alt", "optional_title"]
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Pool Chair in a Pool", "Dipping in the pool is a great way to cool off"],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Cave Scene", "Spelunking can be a rewarding hobby"],
    		["http://i30.tinypic.com/531q3n.jpg", "", "", "Still Life Fruits", "Friuts are good for you"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "Autumn Trees", "The colors in Autumn are beautiful"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
    	orientation: "h", //Valid values: "h" or "v"
    	persist: true, //remember last viewed slide and recall within same session?
    	slideduration: 300 //transition duration (milliseconds)
    });
    jQuery(function($){
    	var reel = firstreel;
    	reel.$wrapperdiv.find('img').each(function(i){
    		this.alt = reel.setting.imagearray[i][3] || '';
    		this.title = reel.setting.imagearray[i][4] || '';
    	});
    });
    Or if your object is simply to avoid a tooltip in IE less than 9:

    Code:
    var firstreel=new reelslideshow({
    	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
    	dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [ //["image_path", "optional_link", "optional_target", "optional_alt"]
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Pool Chair in a Pool"],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Cave Scene"],
    		["http://i30.tinypic.com/531q3n.jpg", "", "", "Still Life Fruits"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "Autumn Trees"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
    	orientation: "h", //Valid values: "h" or "v"
    	persist: true, //remember last viewed slide and recall within same session?
    	slideduration: 300 //transition duration (milliseconds)
    });
    jQuery(function($){
    	firstreel.$wrapperdiv.find('img').each(function(i){
    		this.alt = firstreel.setting.imagearray[i][3] || '';
    		this.title = '';
    	});
    });
    - John
    ________________________

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

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
  •