PDA

View Full Version : Continuous Reel Slideshow



JonBoatw
04-06-2011, 07:17 PM
1) Script Title: Continuous Reel Slideshow

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

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

thanks for the help

jscheuer1
04-07-2011, 03:05 AM
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):


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.

JonBoatw
04-12-2011, 02:12 PM
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.

jscheuer1
04-12-2011, 03:17 PM
Just in case you added more code than you needed:


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:


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 = '';
});
});