Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
image fader with javascript
Options
-
15-07-2008 4:28pmAnyone 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>
0
Comments
-
-
I tried that but it wouldn't work for me0
-
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); }
0 -
Works, thanks a million!!!0
-
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?0 -
Advertisement
Advertisement