« Return

PHP and jQuery automated image gallery ( includes phpthumb.lib )

demo


<?php
/**
*
* @author Bruno Correia, Jan, 2011
*
*/

// constants
define('_PATH', './content/');
 
// create gallery array that contains the name of each category
$gallery  = array_values(array_diff(scandir(_PATH), array('.', '..', '.DS_Store')));

# ------------------------------------------------------------------------------- #

function rebuild() {
  global $gallery;
  require_once 'php.phpthumb.lib/ThumbLib.inc.php';
      
    foreach ($gallery as $key => $category) {      

        foreach (glob(_PATH . $category . '/sm/' . '*.*') as $key => $file) {
          unlink($file); // purge all files
        }

        foreach (glob(_PATH . $category . '/lg/' . '*.*') as $key => $value) {
          $thumb = PhpThumbFactory::create($value);
          // $thumb->resize(100, 100);
          $thumb->adaptiveResize(100, 100);
          $value = end(explode('/', $value));
          $thumb->save(_PATH . $category . '/sm/' . $value);
        }
    }

return 'rebuilt complete';
}

# ------------------------------------------------------------------------------- #
  
function build() {
  global $gallery;

  // create multidimensional array 
  foreach ($gallery as $key => $category) {
      $files[$category] = glob(_PATH . $category . '/sm/' . '*.*'); // return array of thumbnail files
      natsort($files[$category]);
      $files[$category] = array_values(array_reverse($files[$category]));
  }
  unset($category);
  
  if (empty($_GET['category'])) :   
    foreach ($gallery as $key => $category) {
      $output .= '<div><h1>' . ucfirst($category) . '</h1>';        
      foreach ($files[$category] as $key => $file) {
        $output .= '<a href="' . str_replace('sm', 'lg', $file) . '"><img src="' . $file . '" />' . end(explode('/', str_replace('.jpg', '', $file))) . '</a>';
      }
      $output .= '</div>';
    }
    
  else:        
      $output .= '<div><h1>' . ucfirst($_GET['category']) . '</h1>';      
      foreach ($files[$_GET['category']] as $key => $file) {
        $output .= '<a href="' . str_replace('sm', 'lg', $file) . '"><img src="' . $file . '" />' . end(explode('/', str_replace('.jpg', '', $file))) . '</a>';
      }      
      $output .= '</div>';
  endif;
    
return $output;
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head> 
      <title>BCDC.US™ - Website Strategy and Programming</title>

      <!-- jquery -->
      <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
      <script type="text/javascript">
      google.load('jquery', '1.3.2'); 
      </script>

      <link rel="stylesheet" href="./reset.css" type="text/css" media="all" />
      <link rel="stylesheet" href="./styles.css?v=1.0" type="text/css" media="all" />
    
      <!-- fancybox -->
      <link rel="stylesheet" type="text/css" href="./jquery.fancybox/jquery.fancybox.css" media="screen" />  
      <script type="text/javascript" src="./jquery.fancybox/jquery.easing.1.3.js"></script>
      <script type="text/javascript" src="./jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>

      <script type="text/javascript">
        $(document).ready(function() {
          $("#fancybox a").fancybox({
            'overlayShow'     : false,
            'zoomSpeedIn'     : 700,
            'zoomSpeedOut'    : 500,
            'easingIn'        : 'easeOutBack',
            'easingOut'       : 'easeInBack'
          });
          });
      </script>

</head>
<body>
<div id="fancybox">
    <?php if ( isset($_GET['rebuild']) ) { echo rebuild(); } else { echo build(); } ?>
</div>
</body>
</html>