Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy JavaScript + PHP Image fade gallery

    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(0count($images)-1);
                } else {
                    
    $index $_SESSION['image'] == count($images)-$_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;
    	}
    }
    Last edited by vladijazz; 09-25-2008 at 01:31 AM.

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    vladijazz (09-25-2008)

  • #5
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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....

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •