Advanced Search

Return to Snippet

Revision: 21439
at December 13, 2009 08:04 by ginoplusio
Updated Code 
<?

//---------------------------------------------
//Php Function to read the images in a dir
function getJsArray($dir) {
    $out = "";
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false)
            if(in_array( substr(strrchr($file, '.'), 1) , array('gif','png','jpg') )) $out.= ($out?",":"")."'".$dir.$file."'";
        closedir($dh);
    } else { die ("no dir"); }
    return $out;
}

?>

<html>
<head>
    <title>Mini PHP-Jquery Gallery/Slideshow</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

    //---------------------------------------------
    var gallery_current_pos = 0;            // gallery counter position
    var gallery_idname = "container";        // id of the gallery container
    var gallery_timer = 5000;                // 5 seconds
    var gallery_ar = Array(<?=getJsArray("./minislides/")?>);

    function goGallery() {
        if (gallery_current_pos>gallery_ar.length - 1) gallery_current_pos =0;
        $('#'+gallery_idname).fadeTo("fast", 0 , function () {
            $('#'+gallery_idname).css("background-image","url(" + gallery_ar[gallery_current_pos] + ")");    
            $('#'+gallery_idname).fadeTo("slow", 1);
            gallery_current_pos++;
        });
        if (gallery_ar.length>1) setTimeout(    function () { goGallery(); }, gallery_timer);
    }
    //---------------------------------------------


    </script>
    <style>

        #container {background-repeat:no-repeat;width:300px;height:200px;}

    </style>
</head>
<body onload="goGallery();">

    <div id='container'>&nbsp;</div>

</body>
</html>

Revision: 21438
at December 13, 2009 08:03 by ginoplusio
Initial Code 
<?
if(isset($_GET['showsource'])) { highlight_file($_SERVER['SCRIPT_FILENAME']); die; }

//---------------------------------------------
//Php Function to read the images in a dir
function getJsArray($dir) {
    $out = "";
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false)
            if(in_array( substr(strrchr($file, '.'), 1) , array('gif','png','jpg') )) $out.= ($out?",":"")."'".$dir.$file."'";
        closedir($dh);
    } else { die ("no dir"); }
    return $out;
}

?>

<html>
<head>
    <title>Mini PHP-Jquery Gallery/Slideshow</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

    //---------------------------------------------
    var gallery_current_pos = 0;            // gallery counter position
    var gallery_idname = "container";        // id of the gallery container
    var gallery_timer = 5000;                // 5 seconds
    var gallery_ar = Array(<?=getJsArray("./minislides/")?>);

    function goGallery() {
        if (gallery_current_pos>gallery_ar.length - 1) gallery_current_pos =0;
        $('#'+gallery_idname).fadeTo("fast", 0 , function () {
            $('#'+gallery_idname).css("background-image","url(" + gallery_ar[gallery_current_pos] + ")");    
            $('#'+gallery_idname).fadeTo("slow", 1);
            gallery_current_pos++;
        });
        if (gallery_ar.length>1) setTimeout(    function () { goGallery(); }, gallery_timer);
    }
    //---------------------------------------------


    $(document).ready(function(){
        //---------------------------------------------
        goGallery();

    });

    </script>
    <style>

        #container {background-repeat:no-repeat;width:300px;height:200px;}

    </style>
</head>
<body>

    <div id='container'>&nbsp;</div>

</body>
</html>
Initial URL 
http://www.barattalo.it/2009/12/13/mini-galleryslideshow-with-php-and-jquery/
Initial Description 
This is the code to make a simple gallery really fast, with php, jquery and a dir full of pictures.
Initial Title 
How to make a small gallery with PHP and JQuery
Initial Tags 
php, jquery
Initial Language 
jQuery