JavaScript + PHP Image fade gallery

vladijazz · 09-25-2008, 12:20 AM

Hi! I'm wondering if somebody here could help me please. I'm trying to develope the image slideshow using PHP and JavaScript. The idea is that the PHP file gets random images from the folder, i'm using session to prevent repeating the same image and then JavaScript generates the fade slideshow using that PHP file. I've come up with the solution to use two img tags in the HTML page, so JavaScript then swap them around and play with opacity, but unfortunately couldn't make it work. Everything I have tried in JavaScript didn't work properly. I'd be grateful for any help and advice guys. Thank you.

My PHP code:

PHP Code:


			
<?php 
class images {

    var $images = Array();
    var $imgDir = 'images/';
    
    function getImages() {
        $images = Array();
        if ($dir = opendir($this->imgDir)) {
            while(($file = readdir($dir)) !== false) {
                if(preg_match('#(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)#i', $file)) $images[] = $file;
            }
            closedir($dir);
        }
        return $images;
    }
    
    function getNextImage() {
        if (($images = $this->getImages()) !== false) {
            session_start();
            if (!isset($_SESSION['image'], $images[$_SESSION['image']])) {
                $index = mt_rand(0, count($images)-1);
            } else {
                $index = $_SESSION['image'] == count($images)-1 ? 0 : $_SESSION['image']+1;
            }
            $_SESSION['image'] = $index;
            return $images[$index];
        }
        return false;
    }
    
    function outputImage() {
        if (($file = $this->getNextImage()) !== false) {
            header('Cache-Control: no-cache, must-revalidate'); // HTTP/1.1
            header('Expires: Wed, 9 Dec 1981 07:00:00 GMT'); // Date in the past
            header('Content-type: image/jpg');
            readfile($this->imgDir.$file);
            exit();
        }
    }
}
$img = new images();
$img->outputImage();
?>

My HTML page:

Code:

<html>
<head>
<title>Images</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="javascript/slideshow2.js" language="javascript"></script>
</head>

<body onload="startSlideShow();">
<h1>Images</h1>
<div id="imageWrap">
	<div id="images">
		<img id="sampleImgFade" src="images.php" alt="images" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;" width="800" height="600" onload="coverLoaded(this);" />
		<img id="sampleImg" src="images.php" width="800" height="600" alt="images" onload="mainLoaded();" />
	</div>
</div>
</body>
</html>

CSS code:

Code:

#imageWrap {
	clear: both;
}
#images {
	position: relative;
	clear: both;
}
#sampleImgFade {
	position: absolute;
	top: 0px;
	left: 0px;
}

JavaScript code which doesn't work properly(just to show in which direction I'm going):

Code:

var img;
var loaded = new Array();
loaded['start'] = true;
loaded['main'] = false;
loaded['cover'] = true;
var fade = 0;
var i = 0;
function getImage() {
	img = new image();
	img.src = "images.php";
}
function coverLoaded(obj) {
	loaded['cover'] = true;
	setOpacity(obj, 100);
	window.setTimeout("startFade", 5000);
}
function mainLoaded() {
	loaded['main'] = true;
	if (loaded['start'] && loaded['cover'] && loaded['main']) startFade();
}
function startFade() {
	loaded['start'] = false;
	loaded['main'] = false;
	loaded['cover'] = false;
	fade = window.setInterval("fadeIn()", 50);
}
function fadeIn() {
	var obj = document.getElementById("sampleImgFade");
	var opacity = getOpacity(obj);
	if (opacity > 0) {
		setOpacity(obj, opacity-5);
	} else {
		window.clearInterval(fade);
		document.getElementById("sampleImg").src = "images.php?u="+i++;
	}
}
function getOpacity(obj) {
	if (obj.filters) {
		return obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity;
	} else if (obj.style.MozOpacity) { // mozilla
		return obj.style.MozOpacity*100;
	} else if (obj.style.KhtmlOpacity) { // konquerer
		return obj.style.KhtmlOpacity;
	} else { // not supported
		return 0;
	}
}
function setOpacity(obj, opacity) {
	if (obj.filters) {
		obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity = opacity;
	} else if (obj.style.MozOpacity) { // mozilla
		obj.style.MozOpacity = opacity/100;
	} else if (obj.style.KhtmlOpacity) { // konquerer
		obj.style.KhtmlOpacity = opacity;
	}
}

ninnypants · 09-25-2008, 04:01 AM

I would suggest combining your html and PHP and then preload all your images with JavaScript. Though you seem to be on the right track. Do you know what errors are being reported by the browser because those would be a helpful thing to have while debugging this.

I would suggest getting rid of the 'loaded' array unless it is doing something, but I'm not really see where it does anything useful.

vladijazz · 09-25-2008, 08:14 AM

Hi ninnypants! Thanks for your reply. Could you explain please what did you mean by saying combining PHP & HTML. It's already combined, because the src of the img tags calls this PHP file every time I refresh the page. I have no problems with PHP and HTML, it's JavaScript I cannot make it work properly to generate the fade gallery using those two html img tags and swapping them around. Thanks.

vwphillips · 09-25-2008, 09:38 AM

a strang way of achiving the effect but

Code:

<html>
<head>
<title>Images</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="javascript/slideshow2.js" language="javascript"></script>
<style type="text/css">
/*<![CDATA[*/
#imageWrap {
	clear: both;
}
#images {
	position: relative;
	clear: both;
}
#sampleImgFade {
	position: absolute;
	top: 0px;
	left: 0px;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var img;
var loaded = new Array();
loaded['start'] = true;
loaded['main'] = false;
loaded['cover'] = true;
var fade = 0;
var i = 0;
function getImage() {
	img = new image();
	img.src = "images.php";
}
function coverLoaded(obj) {
	loaded['cover'] = true;
	setOpacity(obj, 100);
	window.setTimeout("startFade", 5000);
}
function mainLoaded() {
	loaded['main'] = true;
	if (loaded['start'] && loaded['cover'] && loaded['main']) startFade();
}
function startFade() {
	loaded['start'] = false;
	loaded['main'] = false;
	loaded['cover'] = false;
	fade = window.setInterval("fadeIn()", 150);
}

function fadeIn() {
	var obj = document.getElementById("sampleImgFade");
	var opacity = getOpacity(obj);
	if (opacity > 0) {
		setOpacity(obj, opacity-5);
	} else {
		window.clearInterval(fade);
		document.getElementById("sampleImg").src = "http://www.vicsjavascripts.org.uk/StdImages/Three.gif";
	}
}
function getOpacity(obj) {
	if (obj.filters) {
		return obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity;
	} else if (obj.style.MozOpacity) { // mozilla
		return obj.style.MozOpacity*100;
	} else if (obj.style.KhtmlOpacity) { // konquerer
		return obj.style.KhtmlOpacity;
	} else { // not supported
		return 0;
	}
}
function setOpacity(obj, opacity) {
	if (obj.filters) {
		obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity = opacity;
	} else if (obj.style.MozOpacity) { // mozilla
		obj.style.MozOpacity = opacity/100;
	} else if (obj.style.KhtmlOpacity) { // konquerer
		obj.style.KhtmlOpacity = opacity;
	}
}
/*]]>*/
</script>
</head>

<body onload="">startSlideShow();
<h1>Images</h1>
<div id="imageWrap">
	<div id="images">
		<img id="sampleImgFade" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="images" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;" width="800" height="600" onload="coverLoaded(this);" />
		<img id="sampleImg" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="800" height="600" alt="images" onload="mainLoaded();" />
	</div>
</div>
</body>
</html>

+ incrementing i to refresh the image will not work as is set to 0 on reload

vladijazz · 09-25-2008, 10:38 AM

Hi vwphillips! Thank you for your reply. It works with the static images, but I'm still not sure how can link my PHP file to it, which dynamicly gets any images from the folder. In the example you've provided the images in the html bit are different, but in my case they are both the same because PHP gets only one image at the time. That's why one of them has got always opacity=0. Then javascript should basically swap them and fade one into another somehow, which I don't know how yet....

vwphillips · 09-25-2008, 12:29 PM

my post demonstrates that the Javascript works
Using clent side only the image src's would be registed in an array and the image srcs changed onload of the page usining random methods

the problem is how to set the src(or array) of the images using php

I think this would best answered on a php forum

Nadezda · 06-28-2010, 09:12 PM

Very light, safe, Javascript Fade gallery, that works on IE, Mozilla, Chrome, Opera etc. You can embed this plugin with ease into any article.

http://www.designcompasscorp.com/ind...485&Itemid=709

Useful to make your site look more dynamic.

Unlike some other galleries, there is no need to create menu items or any other elements, just type the name of the folder containing images and that's it, it will show up all images from this folder, one by one. Also after that you may type file names separated with comma, to show exact images of selected folder and/or in exact order.

Slide show Interval and fade effect can be adjusted with three parameters: interval, fade time and fade step in milliseconds.

fadegallery=parameters

parameters: folder,width,height,interval,fadetime,fadestep,filelist,align,padding