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/dynamici...nslideshow.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:

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:

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;"'
		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:

Code:

<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.