PDA

View Full Version : Add alt to New Fade Slideshow



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.

skitog
12-18-2016, 01:49 AM
Thank you very much for your quick response. You solved my problem and now I am able to add the "alt" text. Your help is much appreciated!

styxlawyer
12-18-2016, 02:33 PM
You're welcome.