Posted By

ginoplusio on 12/13/09


Tagged

php jquery slideshow gallery


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

jackkeller
netzwerktourist
verostudios


How to make a small gallery with PHP and JQuery


 / Published in: jQuery
 

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

This is the code to make a simple gallery really fast, with php, jquery and a dir full of pictures.

  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>

Report this snippet  

You need to login to post a comment.