image fader with javascript

sleepyescapade · 15-07-2008 04:28PM #1

Anyone know of a simple fader function I could implement in the code to enable the slideshow to fade in and out to the next image in the array?

Heres the code. Thanks!

<?
ob_start(); //Output buffering
header("content-type: application/x-javascript");
$imgDir = "images/prod_images/main/"; 
$counter = 0; // our file counter;
$list = "";
$pid = $_GET['pid'];
//regex pattern to check file extensions
$pattern="(^$pid-2)|(^$pid-3)|(^$pid-4)|(^$pid-5)|(^$pid-6)|(^$pid-7)|(^$pid-8)|(^$pid-9)|(^$pid-10)";

if($dir = opendir($imgDir)) {
 while(false !== ($file = readdir($dir))){
  if(eregi($pattern, $file)){
    $path  = $imgDir . $file;
    $list .= 'images['.$counter.']="'.$path .'";' .chr(13);
    $counter++;
   }
  }
  closedir($dir);
}
//echo the array declaration
echo "var images = new Array()" . chr(13);
echo $list;
ob_end_flush();
?>

<script language="JavaScript"
type="text/javascript" src="slideShow.php?pid=<?echo $pid;?>"></script>
<script language="JavaScript"
type="text/javascript">
var counter = 0;
var showImageFor = 2; //seconds

function showImage(){
  if(counter == images.length){
    counter = 0;
  }
  document.images.imageCotainer.src = images[counter];
  counter++;
}

function runImages(){
  milliseconds = showImageFor * 1000;
  setInterval("showImage()", milliseconds);
}

</script>

<body onload="runImages()">
<img src="images/prod_images/main/<?echo $pid;?>-2.jpg" name="imageCotainer" id="imageContainer" >
</body>

daymobrew · 15-07-2008 05:11PM

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

sleepyescapade · 15-07-2008 05:14PM

I tried that but it wouldn't work for me

axer · 15-07-2008 09:04PM

Here's a js slideshow script I used before. It might be of some help.

.html

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

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);
}

sleepyescapade · 16-07-2008 09:20AM

Works, thanks a million!!!

sleepyescapade · 30-08-2008 11:21AM

Just bumping this, it works perfectly in Firfox but I've noticed that when viewed in IE that my slideshow still works well but generates the following error

Line: 1
Char: 1
Error: Object expected
Code: 0

I use the class.photofader.js script posted earlier in this thread and also this slideShow.php

<?
ob_start(); //Output buffering
//first we send the header to the browser to process the page
//as JavaScript
header("content-type: application/x-javascript");
$imgDir = "images/"; // the directory the images reside in
$counter = 0; // our file counter;
$list = "";
//regex pattern to check file extensions. Name of files:
$pattern="(^image1)|(^image2) |(^image3)|(^image4)|(^image5)|(^image6)|(^image7)|(^image8)|(^image9)|(^image10)|(^image11) |(^image12)|(^image13)";

//read through the dir and create the img list
if($dir = opendir($imgDir)) {
 while(false !== ($file = readdir($dir))){
  if(eregi($pattern, $file)){
    $path  = $imgDir . $file;
    $list .= 'images['.$counter.']="'.$path .'";' .chr(13);
    $counter++;
   }
  }
  closedir($dir);
}
//echo the array declaration
echo "var images = new Array()" . chr(13);
echo $list;
ob_end_flush();
?>

This is my page source code

<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Home</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/style-ie.css" />
<![endif]-->
<script language="JavaScript" type="text/javascript" src="slideShow.php"></script>
<script type="text/javascript" src="class.photofader.js"></script>
<script language="JavaScript"type="text/javascript">
var counter = 0;
var showImageFor = 2; //seconds

function showImage(){
  if(counter == images.length){
    counter = 0;
  }
  document.images.imageContainer.src = images[counter];
  counter++;
}

function runImages(){
  milliseconds = showImageFor * 1000;
  setInterval("showImage()", milliseconds);
}

</script>
</head>
<body onload="runImages()">
<div class="all">
	<div class="top">
		<div class="top-icons"><a href="index.html"><img src="images/icon_home.png" width="27" height="27" alt="Home" title="" /></a><a href="search.html"><img src="images/icon_search.png" width="11" height="11" alt="Search" title="" /></a><a href="contact.html"><img src="images/icon_mail.png" width="11" height="8" alt="Mail" title="" /></a></div>
    <a href="#" class="logo"><img src="images/logo.png" width="176" height="104" alt="" /></a><div class="photoholder2" id='photoholder'>
	<script type="text/javascript">
function randOrd(){
	return (Math.round(Math.random())-0.5); }
images.sort( randOrd );
	    var speed = 15; // Lower numbers yield a faster transition - must be 2 or higher
	    var delay = 2; // Number of seconds between each slide transition
	    var pf = new photofader("pf","photoholder",images);
	</script>

</div>
</body>

Anyone have any ideas how I could overcome this error in IE?

image fader with javascript

Comments