swissarmy script

[emanuelle]

http://www.dynamicdrive.com/dynamici...army/index.htm

problem description for slideshow 2:
the image descriptions are very long. And I want to put only a part of it . But then I would like to have the possibility that the alt (on the pic) will show the whole description.
Right now the decription and alt are the same length

Any suggestion?

[codeexploiter]

You can use either the title/alt attribute values as the description. They need not be the same meanwhile you can adjust it according to your need. Even if the title/alt attribute value is lengthy it won't create much trouble.

[emanuelle]

but where do I define in the code the text for alt and the text for title if I want them to be different.
I see only one place, next to the image name. and its for title/alt.

[jscheuer1]

First let's get our terminology right. The alt attribute never shows unless the image is missing, except in IE where it shows when the mouse hovers an image, unless there is a title attribute. Even an empty title attribute:

<img alt="something" title="" src="some.jpg">

in IE will block the showing of the alt attribute on hover.

So, unless you want your descriptions or whatever to only show up on hover in IE, and perhaps not even there, you should use the title attribute, not the alt for them.

Now, to make the description and the title attributes different would require editing the script. You could do something like this in the array:

slides[0] = ["photo1.jpg", {d:"Kissing Fools", t:"Kissing Fools - Painting of Embracing Lovers"}];

That would create an object. But you would also have to edit the swissarmy.js script to take advantage of it by replacing this function:

inter_slide.prototype.populateslide=function(picobj, picidx){
if(document.getElementsByTagName){
if(picobj.getElementsByTagName('a')[0]&&picobj.getElementsByTagName('a')[0].onclick)
picobj.getElementsByTagName('a')[0].onclick=null;
if(picobj.getElementsByTagName('img')[0]&&picobj.getElementsByTagName('img')[0].onload)
picobj.getElementsByTagName('img')[0].onload=null;
}
picobj.style.backgroundColor=this.imgs[picidx].fadecolor? this.imgs[picidx].fadecolor : this.fadecolor? this.fadecolor : 'white';
var slideHTML='<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td width="100%" height="100%" align="center" valign="middle" style="background:transparent none;">'
if (this.imgs[picidx][2]){ //if associated link exists for img
var specs=this.imgs[picidx][4]? ", '"+this.imgs[picidx][4]+"'" : this.specs? ", '"+this.specs+"'" : '';
slideHTML+='<a href="'+this.imgs[picidx][2]+'"'+(this.imgs[picidx][3]? ' target="'+this.imgs[picidx][3]+'"' : this.target? ' target="'+this.target+'"' : '')+' onclick="'+(this.onclick? this.onclick : 'window.open(this.href, (this.target? this.target : \'_self\')'+specs+');return false;')+'">'
}
slideHTML+='<img id="theimg'+picidx+'_'+this.issid+'" src="'+(this.loadimgidx[picidx]&&typeof this.loadimgidx[picidx].complete=='boolean'&&this.loadimgidx[picidx].complete? this.loadimgidx[picidx].src : this.imgs[picidx][0])+'" alt="'+(this.ualt? this.imgs[picidx][1] : 'Slide Show Image')+'" title="'+(this.utit? this.imgs[picidx][1] : '')+'" '+(this.imbcolor&&!this.imgs[picidx].noborder? 'style="border:'+this.imgborder+'px '+(this.imbstyle? this.imbstyle : 'solid')+' '+this.imbcolor+';"' : 'border="'+(this.imgs[picidx].noborder? '0' : this.imgborder)+'"')+(!this.width||!this.height? ' onload="iss['+this.issid+'].imgload(this);"' : '')+'>'
if (this.imgs[picidx][2]) //if associated link exists for img
slideHTML+='<\/a>'
slideHTML+='<\/td><\/tr><\/table>'
picobj.innerHTML=slideHTML
}

with this one:

inter_slide.prototype.populateslide=function(picobj, picidx){
if(document.getElementsByTagName){
if(picobj.getElementsByTagName('a')[0]&&picobj.getElementsByTagName('a')[0].onclick)
picobj.getElementsByTagName('a')[0].onclick=null;
if(picobj.getElementsByTagName('img')[0]&&picobj.getElementsByTagName('img')[0].onload)
picobj.getElementsByTagName('img')[0].onload=null;
}
picobj.style.backgroundColor=this.imgs[picidx].fadecolor? this.imgs[picidx].fadecolor : this.fadecolor? this.fadecolor : 'white';
var slideHTML='<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td width="100%" height="100%" align="center" valign="middle" style="background:transparent none;">'
if (this.imgs[picidx][2]){ //if associated link exists for img
var specs=this.imgs[picidx][4]? ", '"+this.imgs[picidx][4]+"'" : this.specs? ", '"+this.specs+"'" : '';
slideHTML+='<a href="'+this.imgs[picidx][2]+'"'+(this.imgs[picidx][3]? ' target="'+this.imgs[picidx][3]+'"' : this.target? ' target="'+this.target+'"' : '')+' onclick="'+(this.onclick? this.onclick : 'window.open(this.href, (this.target? this.target : \'_self\')'+specs+');return false;')+'">'
}
slideHTML+='<img id="theimg'+picidx+'_'+this.issid+'" src="'+(this.loadimgidx[picidx]&&typeof this.loadimgidx[picidx].complete=='boolean'&&this.loadimgidx[picidx].complete? this.loadimgidx[picidx].src : this.imgs[picidx][0])+'" alt="'+(this.ualt? this.imgs[picidx][1].d : 'Slide Show Image')+'" title="'+(this.utit? this.imgs[picidx][1].t : '')+'" '+(this.imbcolor&&!this.imgs[picidx].noborder? 'style="border:'+this.imgborder+'px '+(this.imbstyle? this.imbstyle : 'solid')+' '+this.imbcolor+';"' : 'border="'+(this.imgs[picidx].noborder? '0' : this.imgborder)+'"')+(!this.width||!this.height? ' onload="iss['+this.issid+'].imgload(this);"' : '')+'>'
if (this.imgs[picidx][2]) //if associated link exists for img
slideHTML+='<\/a>'
slideHTML+='<\/td><\/tr><\/table>'
picobj.innerHTML=slideHTML
}

and by modifying this line in the inter_slide.prototype.rotateimg function as shown (addition red):

if(this.descriptions)
this.go('imgdsc'+this.issid).innerHTML = this.imgs[this.keeptrack()][1].d;

Now once you do that, all of your descriptions in your arrays must be entered as objects or there will be an error, but you can use empty object properties, ex:

slides[0] = ["photo1.jpg", {d:"", t:""}];

The value specified for d: will be the description and the alt attribute (if used), and the t: value will be used for the title (if used). Remember, you have to 'turn on' title and/or alt using their respective:

slides#.use_title=1;

and:

slides#.use_alt=1;

properties for that particular array of images.