Add alt to New Fade Slideshow [Archive]

skitog

12-17-2016, 06:04 AM

1) Script Title: Ultimate New Fade Slideshow v. 2.0

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

3) Describe problem: To meet ADA (Americans with Disabilities Act) requirements, I need to add "alt" references for each image. Is there a way to do this in the Ultimate Fade Slideshow script?

Thank you for your assistance.

styxlawyer

12-17-2016, 01:02 PM

Look in the fadeslideshow.js file and around line 300 you will find this code:

getSlideHTML:function(imgelement){
var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n'
layerHTML+=(imgelement[1])? '</a>\n' : ''
return layerHTML //return HTML for this layer
},

change it to this:

getSlideHTML:function(imgelement){
var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;"'
layerHTML+=(imgelement[4])? ' alt="'+imgelement[4]+'"' : ''
layerHTML+=' />\n'
layerHTML+=(imgelement[1])? '</a>\n' : ''
return layerHTML //return HTML for this layer
},

Then add a fifth element containing the 'alt' text to all your slide descriptions like this:

<script type="text/javascript">

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://www.dynamicdrive.com/dynamicindex4/pool.jpg","","","","alt text is here"],
["http://www.dynamicdrive.com/dynamicindex4/cave.jpg","","","","alt text is here"],
["http://www.dynamicdrive.com/dynamicindex4/fruits.jpg","","","","alt text is here"],
["http://www.dynamicdrive.com/dynamicindex4/dog.jpg","","","","alt text is here"] //<--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: "always",
togglerid: ""
})

Incidentally, you can also add 'title' text using the same method.