« Return

Automate Fancybox jQuery plugin with PHP scandir function ( Fancybox jQuery Plugin )

2009-07-29

PHP

<?php
/**
 *
 * @author Bruno Correia, July, 2009
 *
**/
function fancy_gallery($dir, $sorting_order) {
$pattern = '_sm';
$files = scandir($dir, $sorting_order);
                                   
  foreach ($files as $key => $file) {     
    if (strpos($file, $pattern)):
    $gallery[] = $file;
    endif;
  }

  foreach ($gallery as $key => $file) {
    $output .= '<a href="' . $dir . str_replace('_sm', '_lg', $file) . '"><img src="' . $dir . $file . '" /></a>';
  }
return $output;
}
?>

HTML / jQuery

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

<head> 
      <title>page title</title>

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

      <!-- 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 echo fancy_gallery('./images/', 1); ?> 
</div>
</body>
</html>