Fade In Slide Show: how to set image dimensions and delete ALT text?

[edustrier]

1) Script Title: Ultimate Fade In Slide Show (ver 1.5)

3) Describe problem: (not really a problem, I need 2 simple addons)
I have added the Caption option to the script and it works great but I would like to delete the "ALT" property of the image that is showing the Caption text (in my case a long html text) when you put the mouse on it. What should I remove to delete that ALT text?

Also, I would like to set a custom image witdh and height for all the images. Now you can specify the slideshow dimensions but not the image ones, so if i´m using bigger images than the slideshow size, the effect is not very good.

Thanks very much and congrats for the script.

[jscheuer1]

This script is now v1.51, and you are obviously using a mod not from the demo page, but you haven't linked us to either the demo page or to the mod code. 1.51 is a fairly important upgrade as it adds a number of browsers that will successfully show the fade effect.

I can tell you that even if an image has an alt attribute, it will not show onmouseover if the image also has a title attribute (and in fact, IE is the only browser that will ever show the alt as a tip), the title can even be an empty title attribute, so you have your choice of using a shorter more appropriate for a tip title, like:

title="image#1"

or just:

title=""

to disable the alt tip.

Now the HTML code for each image is made on-the-fly here (probably modified in your version):

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

I don't know what all has already been added in your version, but if you were to add:

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img title="" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

and if the tip is truly from the alt attribute of the image, that will take care of it. Tips can also come from title attributes of links and images, if it is really coming from one of those, I would need to see the actual code you are using.

You can also add dimensions in there:

slideHTML+='<img title="" width="200" height="175" src="'+this.postimages[picindex].src+'" bo . . .

or use css style for that (in an existing stylesheet, or you can make a stylesheet just for this):

#master0 img {
width:200px;
height:175px;
}

either way, the browser will follow it. However, browsers are notorious at often not scaling images very well, so you are better off using an image editing program with a bilinear resize option to make the images the actual size you want. This will also speed the loading of the images (since they will be of a smaller byte size, and make image theft less likely (not too many people want a small image, and if they get one, there isn't much they can do with it).

#master0 is the selector for the first slide show, if you have only one, just use that. A second show would be #master1, a third #master2, ans so on.

If you need more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[edustrier]

Sorry man, I forgot to put my code. I copied the script from some scripts page and then I modified it as is described in: http://www.dynamicdrive.com/forums/s...3387#post23387
to add the caption feature.

I can´t give you the link of my page because it is now httaccess protected, my site it´s on developing so I need to protect that area. If you really need it, I can give you the link and the user/password by private. But anyway, at the end is the complete code I´m using.

I have already added the title and dimensions specifications for the image tag as you told me, and it seems to work great. Now no onmouseover title is shown when you are onmouseover. Before the modification, if you put the mouse over the image (tested on Firefox and ie), the complete caption html code was shown (as an ALT) and it was really annoying. Now it works great with the title atribute set.

And finally if you can, I would like to add one different title for each image, maby adding another array to the script. Could you tell me how to do it?

Here is the complete code. Thanks very much for your time and your great script.

<script>

/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0] = ["material/images/0582.jpg", "ver.php?cid=5&pid=326/", "_self", "<a href='ver.php?cid=5&pid=326'>Hailea HC 500A</a><br><s>590.00&nbsp;€</s><span class='promocion'>&nbsp;510.00&nbsp;€</span>",]
	fadeimages[1] = ["material/images/0580.jpg", "ver.php?cid=5&pid=324/", "_self", "<a href='ver.php?cid=5&pid=324'>Hailea HC 150A</a><br><s>345.00&nbsp;€</s><span class='promocion'>&nbsp;300.00&nbsp;€</span>",]
	fadeimages[2] = ["material/images/0583.jpg", "ver.php?cid=5&pid=327/", "_self", "<a href='ver.php?cid=5&pid=327'>Hailea HC 1000A</a><br><s>810.00&nbsp;€</s><span class='promocion'>&nbsp;710.00&nbsp;€</span>",]
	fadeimages[3] = ["invertebrados/images/2011.jpg", "ver.php?cid=3&pid=372/", "_self", "<a href='ver.php?cid=3&pid=372'>Tridacna M?xima Azul</a><br><s>65.00&nbsp;€</s><span class='promocion'>&nbsp;65.00&nbsp;€</span>",]
	fadeimages[4] = ["material/images/0581.jpg", "ver.php?cid=5&pid=325/", "_self", "<a href='ver.php?cid=5&pid=325'>Hailea HC 300A</a><br><s>430.00&nbsp;€</s><span class='promocion'>&nbsp;370.00&nbsp;€</span>",]
	var fadebgcolor="yellow"

////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img title="" width="175" height="210" src="'+this.postimages[picindex].src+'" '+(this.theimages[picindex][3]? 'title="'+this.theimages[picindex][3]+'" ' : '')+'border="'+this.imageborder+'px">'
if (this.theimages[picindex][3])
slideHTML+='<div align="center">'+this.theimages[picindex][3]+'</div>'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>

[jscheuer1]

In this line:

slideHTML+='<img title="" width="175" height="210" src="'+this.postimages[picindex].src+'" '+(this.theimages[picindex][3]? 'title="'+this.theimages[picindex][3]+'" ' : '')+'border="'+this.imageborder+'px">'

You now have two title attributes, the empty one at the beginning and one later on that points to the fourth dimension (dimensions are numbered from 0) of your array (your 'caption'):

'+(this.theimages[picindex][3]? 'title="'+this.theimages[picindex][3]+'" ' : '')+'

This actually produces invalid HTML code, but most browsers will error correct and use only the first empty title. If we remove the empty title at the beginning and point this other one to a fifth dimension:

'+(this.theimages[picindex][4]? 'title="'+this.theimages[picindex][4]+'" ' : '')+'

Once you have that, your array entries can look like so, ex:

fadeimages[0] = ["material/images/0582.jpg", "ver.php?cid=5&pid=326/", "_self", "<a href='ver.php?cid=5&pid=326'>Hailea HC 500A</a><br><s>590.00&nbsp;€</s><span class='promocion'>&nbsp;510.00&nbsp;€</span>", "Hailea HC 500A"]

Incidentally I notice you currently have a trailing comma (,) within the array entries' dimensional brackets. This last comma shouldn't be there, as some browsers will get the wrong idea from it. However, if you just add the fourth dimension as shown, without adding an additional comma after that, it will be back to the way it should be on that score.

[edustrier]

Thanks very much man, it really works. Just deleted the title="", pointed the array to a fifth dimension and added a fourth dimension to my entries and I have now a different ALT text (onmouseover) for each image. Images with links, Captions with links, ALT text in each image... all in a slideshow. What more can we ask?

Thanks man. Great stuff.