Help with Swiss Army slideshow

[jsoo]

1) Script Title: Swiss Army Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/index.htm

3) Describe problem: I am trying to link urls to the images but it refuses to work even though I have followed the example code? Im using IE 7 and Mozilla 3.6.8 on Windows XP Operating system. I can hyperlink the caption but what I'm really after is to hyperlink the image. The changes are made through a CMS but here is the link to the version without image links. http://www.lib.monash.edu.au/

var slides=[];

/*** Slide show 1 ***/
//slides[0] = ["/assets/promo-homepage/buzz-promo.jpg", "blah", "http://www.dynamicdrive.com"];


/*** Slide show 2 ***/
slides[1] = ["/assets/promo-homepage/quest-promo.jpg", "<p><a href='http://www.lib.monash.edu.au/learning-objects/e-modules/matheson-arts-orientation/emod-matheson-arts-orientation-2010.htm'>Take the online orientation module<\/a><\/p>", "Find books for assignment", "e-learning"];

/*** extra configurations ***/
slides.usealt=1;
slides.usetitle=1;

[jscheuer1]

You are using an altered version of the script. I don't recognize it. I have made several modified versions of the script for various reasons, but all have preserved the original functionality. The version you are using doesn't have the ability to link the image.

I'd ordinarily suggest reverting to the original version, or using the updated version presented here:

http://www.dynamicdrive.com/forums/blog.php?b=18

Either of these versions may be used to link the image via the the third field for a given slide entry (all fields after the caption are optional):

slides[0] = ["1_side.jpg", "some caption", "http://www.google.com", "_new", "top=250, left=300, width=500, height=300, location, resizable, scrollbars"];

However, your version already has a number of customizations, some not related to this feature. At least some of these (customizations for the image buttons) are unnecessary to achieve what you have because they were already available as options and/or can be achieved utilizing style hooks. Your version has hard coded these.

But the customizations for a separate title, caption, and alt for each image are not available in the original or the update I linked to above. As I say, the way these were done in your version has removed the ability to link the image.

Your version has replaced:

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:

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+='<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][2] : 'Slide Show Image')+'" title="'+(this.utit? this.imgs[picidx][3] : '')+'" '+(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
} //end of populate slide

To keep the current customizations for separate title, caption and alt, and to add back the ability to link the image, the above could be changed to:

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][4]){ //if associated link exists for img
		var specs=this.imgs[picidx][6]? ", '"+this.imgs[picidx][6]+"'" : this.specs? ", '"+this.specs+"'" : '';
slideHTML+='<a href="'+this.imgs[picidx][4]+'"'+(this.imgs[picidx][5]? ' target="'+this.imgs[picidx][5]+'"' : 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][2] : 'Slide Show Image')+'" title="'+(this.utit? this.imgs[picidx][3] : '')+'" '+(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][4]) //if associated link exists for img
	slideHTML+='<\/a>'
	slideHTML+='<\/td><\/tr><\/table>'
	picobj.innerHTML=slideHTML
} //end of populate slide

Now, if you add an additional field, here and similar for the others (highlighted, scroll code block to see it):

slides[0] = ["/assets/promo-homepage/buzz-promo.jpg", "<p><a href='https://blogs.monash.edu/library/'>Keep up to date via the Library blog<\/a><\/p>", "The latest library news, resources", "Library blog", "https://blogs.monash.edu/library/"];

the image will be linked. Optional target and specifications fields may follow the link field if desired.

[jsoo]

Brilliant! Thanks jscheuer1! Now that I think of it, I did make some changes to the javascript to customise the image controls about a year ago so it must of slipped my mind, anyway really appreciate what you have done....

Keep up the good work

[kgunn1]

I have been racking my brain trying to figure out what I am doing wrong to make make image controls show up instead of the default image controls. Can someone help me out PLEASE:

<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=true;

//And configure the image buttons' images here:
var previmg='images/left.jpg';
var stopimg='images/stop.jpg';
var playimg='images/play.jpg';
var nextimg='images/right.jpg';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["images/SSLoading.jpg", ""];
slides[1] = ["images/Gumbrill1.jpg", ""];
slides[2] = ["images/Gumbrill2.jpg", ""];
slides[3] = ["images/payne/payne001.JPG", ""];
slides[4] = ["images/payne/payne002.JPG", ""];
slides[5] = ["images/payne/payne003.JPG", ""];
slides[6] = ["images/payne/payne004.JPG", ""];
slides[7] = ["images/mom/mom001.JPG", ""];
slides[8] = ["images/mom/mom002.JPG", ""];
slides[9] = ["images/mom/mom004.JPG", ""];
slides[10] = ["images/mom/mom005.JPG", ""];
slides[11] = ["images/mom/mom006.JPG", ""];
slides[12] = ["images/mom/mom009.JPG", ""];
slides[13] = ["images/mom/mom010.JPG", ""];
slides[14] = ["images/mom/mom013.JPG", ""];
slides[15] = ["images/mom/mom014.JPG", ""];

slides.width=830; //use to set width of widest image if dimensions vary
slides.height=450; //use to set height of tallest image if dimensions vary
slides.nofade=1; //use for no fade-in, fade-out effect for this show
slides.fadecolor='#f8f5ef' ;
slides.imagecontrols=1;

[jscheuer1]

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