Fade In & Out the Most Recent Pictures in a Directory with jQuery
Dave in Michigan contacted me and wanted to know if it was possible to take the script used from this previous post and only display the last X number of pictures uploaded to a directory.
Something to note before you get started though. The script will read the entire directory so if you have a lot of images (more than 1,000) the page will load very slow. (if anyone has a good way to read a directory recursively based on filetime, please let me know)
Requirements:
- PHP
- jQuery (latest version)
- InnerFade plugin (see docs for variables explanations and additional vars)
$image_dir = "$_SERVER[DOCUMENT_ROOT]/examples/imgs"; // directory on server $image_relative_path = '/examples/imgs'; // path to images relative to script $file_types = array('jpg','jpeg','gif','png'); $image_time = '4000'; // seconds each image will display (4000 = 4 seconds) if($handle = opendir($image_dir)) { while (false !== ($file = readdir($handle))) { if ($file != "." && $file != "..") { $ext_bits = explode(".",$file); // finds file extensions foreach($ext_bits as $key => $value){ if(in_array($value,$file_types)){ $image_rotation .= '<li><img src="'.$image_relative_path.'/'.$file.'">'; } } } } closedir($handle); }
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> <script type="text/javascript" src="/js/jquery.innerfade.js"> <script> $(document).ready(function() { $('#image_rotate').innerfade({ speed: 'slow', timeout: , type: 'sequence', containerheight: '220px' }); }); </script> <ul id="image_rotate" style="list-style: none;"> <?= $image_rotation; ?> </ul>
If you have any questions about this, please leave a comment.
comments powered by Disqus