Advanced Search

How to make a small gallery with PHP and JQuery

/ Published in: jQuery
Save to your folder(s)
This is the code to make a simple gallery really fast, with php, jquery and a dir full of pictures.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <?
  2.  
  3. //---------------------------------------------
  4. //Php Function to read the images in a dir
  5. function getJsArray($dir) {
  6.     $out = "";
  7.     if ($dh = opendir($dir)) {
  8.         while (($file = readdir($dh)) !== false)
  9.             if(in_array( substr(strrchr($file, '.'), 1) , array('gif','png','jpg') )) $out.= ($out?",":"")."'".$dir.$file."'";
  10.         closedir($dh);
  11.     } else { die ("no dir"); }
  12.     return $out;
  13. }
  14.  
  15. ?>
  16.  
  17. <html>
  18. <head>
  19.     <title>Mini PHP-Jquery Gallery/Slideshow</title>
  20.     <script type="text/javascript" src="jquery.js"></script>
  21.     <script type="text/javascript">
  22.  
  23.     //---------------------------------------------
  24.     var gallery_current_pos = 0;            // gallery counter position
  25.     var gallery_idname = "container";        // id of the gallery container
  26.     var gallery_timer = 5000;                // 5 seconds
  27.     var gallery_ar = Array(<?=getJsArray("./minislides/")?>);
  28.  
  29.     function goGallery() {
  30.         if (gallery_current_pos>gallery_ar.length - 1) gallery_current_pos =0;
  31.         $('#'+gallery_idname).fadeTo("fast", 0 , function () {
  32.             $('#'+gallery_idname).css("background-image","url(" + gallery_ar[gallery_current_pos] + ")");    
  33.             $('#'+gallery_idname).fadeTo("slow", 1);
  34.             gallery_current_pos++;
  35.         });
  36.         if (gallery_ar.length>1) setTimeout(    function () { goGallery(); }, gallery_timer);
  37.     }
  38.     //---------------------------------------------
  39.  
  40.  
  41.     </script>
  42.     <style>
  43.  
  44.         #container {background-repeat:no-repeat;width:300px;height:200px;}
  45.  
  46.     </style>
  47. </head>
  48. <body onload="goGallery();">
  49.  
  50.     <div id='container'>&nbsp;</div>
  51.  
  52. </body>
  53. </html>

URL: http://www.barattalo.it/2009/12/13/mini-galleryslideshow-with-php-and-jquery/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.