Need help with Javascript Image Slideshow

axer · 08-09-2006 12:32pm #1

Hi,

I am using the below javascript image slideshow (from here) but am having problems trying to figure out how to make the images linkable. I want all the images in the slideshow to link to the same place - a photo gallery (http://www.mydomain.com/photos).

Here is the code:

<html>
<head>
    <title>Cross browser fading slideshow</title>
    <style>
    #photoholder {
        background:#fff;
        height:598px;
        overflow:hidden;
        width:400px;
        position:relative;
    }
    </style>
</head>

<body>
<div id='photoholder'></div>

<script type="text/javascript" src="class.photofader.js"></script>
<script type="text/javascript">
    /** User variables **/
    var speed = 20; // Lower numbers yield a faster transition - must be 2 or higher
    var delay = 2; // Number of seconds between each slide transition

    var myPhotos = new Array();
        myPhotos.push("http://www.forgetfoo.com/images/babeslides/1074533779_main.jpg");
        myPhotos.push("http://www.forgetfoo.com/images/babeslides/1074533780_main.jpg");
        myPhotos.push("http://www.forgetfoo.com/images/babeslides/1074533849_main.jpg");
        myPhotos.push("http://www.forgetfoo.com/images/babeslides/1074533852_main.jpg");

    var pf = new photofader("pf","photoholder",myPhotos);
</script>
</body>
</html>

Here is class.photofader.js:

function photofader(nm, mainDiv, imgArr){
	this.name		= nm;
	this.imgArr = imgArr;
	this.curImg = 0;
	this.curDiv = 1;
	
	var mainDv = document.getElementById(mainDiv);
	
	document.pfObj = this;
	
	document.write("<style type='text/css'>\n");
	document.write("#pf_photo1 img { visibility:hidden; }\n");
	document.write("#pf_photo1 { position:absolute; z-index: 1; }\n");
	document.write("#pf_photo2 { position:absolute; z-index: 0; }\n");
	document.write("</style>");
	
	this.initImages = function() {
		document.write("<scr");
		document.write("ipt type='text/javascript'>\n");
		for(var i=0; i<this.imgArr.length; i++){
			document.write("var img"+i+" = new Image();\n");
			document.write("img"+i+".src = '"+ this.imgArr[i] +"';\n");
		}
		document.write("document.pfObj.start();\n");
		document.write("</scr");
		document.write("ipt>\n");
		
	}
	
	this.start = function(){
		var hldr1 = "pf_photo1";
		var hldr2 = "pf_photo2";
		
		var dv1 = document.createElement("div");
				dv1.id = "pf_photo1";
				dv1.innerHTML = "<img src='"+ imgArr[0] +"' />";
		var dv2 = document.createElement("div");
				dv2.id = "pf_photo2";
		
		mainDv.appendChild(dv1);
		mainDv.appendChild(dv2);
		
	  image1 = document.getElementById(hldr1).childNodes[0];
		
	  setOpacity(image1, 0);
	  image1.style.visibility = 'visible';
	  fadeIn(hldr1,0);
	}
	
	this.initImages();
}
	
function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;
  
  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;
  
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}

function fadeIn(objId,opacity) {
  if (document.getElementById) {
    obj = document.getElementById(objId).childNodes[0];
    if (opacity < 100) {
			speed = (speed < 2)?2:speed;
      setOpacity(obj, opacity);
			opacityDif = Math.ceil((100-opacity)/speed);
			opacity += opacityDif;
      //opacity += 2;
      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
    }
		else
			setTimeout("swapImages()",delay*1000);
  }
}

function swapImages(){
	// find out which 
	if(document.pfObj.curImg == document.pfObj.imgArr.length-1)
		document.pfObj.curImg = 0;
	else 
		++document.pfObj.curImg;

	// now get the div to hld the new image
	var dvName	= (document.pfObj.curDiv == 1)?"pf_photo2":"pf_photo1";
	var eDivName		= (document.pfObj.curDiv == 1)?"pf_photo1":"pf_photo2";
	document.pfObj.curDiv = (document.pfObj.curDiv == 1)?2:1;
	
	var tgtDiv = document.getElementById(dvName);
	var eDiv = document.getElementById(eDivName);
	
	// now fill the target div
	tgtDiv.innerHTML = "<img src='"+ document.pfObj.imgArr[document.pfObj.curImg] +"' style='visibility:hidden;' />";
	
	//move the divs around in z-index
	eDiv.style.zIndex = 0;
	tgtDiv.style.zIndex = 1;
	
	// And finally fade in the image
	
  var img = tgtDiv.childNodes[0];
	
  setOpacity(img, 0);
  img.style.visibility = 'visible';
  fadeIn(tgtDiv.id,0);
}

Can anyone help me?

Thanks,
Noel.

frodo_dcu · 08-09-2006 3:51pm

simply change

<div id='photoholder'></div>

to

<a href="[URL="http://www.mydomain.com/photos"]http://www.mydomain.com/photos[/URL]"> <div id='photoholder'> </div> </a>

the javascript is replacing the div with images so that works grand

Goodshape · 08-09-2006 4:28pm

nice script that! just the sort of thing I've been looking for actually.

axer · 08-09-2006 5:56pm

frodo_dcu wrote:
simply change
<div id='photoholder'></div>
to
<a href="[URL="http://www.mydomain.com/photos"]http://www.mydomain.com/photos[/URL]"> <div id='photoholder'> </div> </a>
the javascript is replacing the div with images so that works grand

Thanks for the reply. Thats what I thought too but it doesn't seem to work for me - maybe someone can try it to see if it works and let me know.

For me, in firefox it makes the images linkable but only fades in the first image - the image then disappears after the second image should be full visible. In IE6 the slideshow runs fine but nothing is linkable (Edit: just below the image is linkable).

any more ideas?

@Goodshape: It is a nice script alright - came across it by accident.

axer · 11-09-2006 10:51am

I got the slideshow linking by using a span for the photoholder and nesting that span in a link. It works perfect in Firefox however in Internet Explorer the link shows in the status bar and when I right-click on the slideshow I can pick "Open Link" and it works but I cannot click on the link to open it. Anyone got any ideas?

Here is the code I used:

<div id='photobox'><a href="http://www.mydomain.com/photos/" target="_blank"><span id='photoholder'></span></a></div>

'photobox' is photoholder renamed from above. 'photoholder' is the same as above but with out the padding and margins.

Serbian · 11-09-2006 1:40pm

The image fader works well, but I don't think it is well written. It declares two different img tags in different places to show the images which is a bit annoying. You need to edit the following two lines to make all the images link:

 36: dv1.innerHTML = "<img src='"+ imgArr[0] +"' style=\"cursor: pointer;\" onclick=\"location.href='http://www.boards.ie/';\" />";
101: tgtDiv.innerHTML = "<img src='"+ document.pfObj.imgArr[document.pfObj.curImg] +"' style='visibility:hidden; cursor: pointer;' onclick=\"location.href='http://www.boards.ie/';\" />";

I don't know if you want all images linking to the same place or not, but if you want different links, it wouldn't be too hard to rewrite the code to accept another array of links for each image.

axer · 11-09-2006 2:14pm

Hi Serbian, thats perfect thanks. I want all the photos to link to one location. Thanks a million.

Need help with Javascript Image Slideshow

Comments