Skip to content

Instantly share code, notes, and snippets.

@jveldboom

jveldboom/gist:6051179

Created July 22, 2013 03:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jveldboom/6051179 to your computer and use it in GitHub Desktop.
Save jveldboom/6051179 to your computer and use it in GitHub Desktop.
Download ZIP
Fade In & Out the Most Recent Pictures in a Directory with jQuery
Raw
gistfile1.php
<?php
// Global Variables
$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.'"></li>';
}
}
}
}
closedir($handle);
}
?>
<html>
<head>
<title>Image Fader</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/examples/jquery.innerfade.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('#image_rotate').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '220px'
});
});
</script>
<ul id="image_rotate" style="list-style: none;">
<?= $image_rotation; ?>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment