I'm very lazy.
So when it came to making the galleries for the site here, I decided to combine some php, javascript & css to get something fancy looking knocked together quickly that I could then reuse on any new directory of images I threw up here.
I basicaly drop the php script below onto page with my standard template header & footer.
Then chuck that into a directory with a bunch of properly names image files
EG: Animals, Girls
To use for reference or copy for your own site, the basic setup is:
PHP:
session_start();
// get all files in a dir:
function getFileListFrom($dir, $exclude=null){
$exclude = array_merge(array('.', '..', 'index.php'), (array)$exclude);
// use the session to cache the filename list and avoid re-reading everytime
$cache_key = slugify(realpath($dir));
if($_SESSION[$cache_key]){
$file_array = $_SESSION[$cache_key];
}else{
// on first load, stash the file list in the cache for next time
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
$file_array[] = $file;
}
closedir($dh);
}
}
$_SESSION[$cache_key]=$file_array;
}
// remove any excludes (may vary, so keep the whole file list cached)
foreach($file_array as $index => $filename){
if(in_array($filename, $exclude)){
unset($file_array[$index]);
}
}
return $file_array;
}
// standard slugify fucntion - turn any text into spaceless ascii
function slugify($str) {
$clean = preg_replace("/[^a-zA-Z0-9\/_|+ -]/", '', $str);
$clean = strtolower(trim($clean, '-'));
$clean = preg_replace("/[\/_|+ -]+/", '-', $clean);
return $clean;
}
// and the (almost) opposite for file names - change dashes to spaces, capitalise words
function cleanName($filename){
$inf = pathinfo($filename);
$out = $inf['filename'];
$out = str_replace(array("-","_"), " ", $out);
$out = ucwords(strtolower($out));
return $out;
}
// get all files in this dir, and randomise:
$image_array = getFileListFrom('.');
shuffle($image_array);
print '
'; // create warpper div
foreach ($image_array as $i) {
$size = getimagesize($i); // ensure it's an image.
// You could use the $size here to actually set the height & width if you like
if($size){
print ''
.' '
.' '.cleanName($i).''
.'') ?>;
}
}
print '
' // end wrapper div
Throw all that onto your php/html page where you want the gallery to appear.
jQuery:
You'll need jquery on the page first, then include this block in your plugins.js (or equiavlent, or just stick it the page if you like - it's your site so doesn't bother me what you do really):
$ = jQuery;
$.fn.exists = function(){ return this.length > 0; };
// this is used so often, a shorthand is needed
// generate a random int between 'size' and (start + size)
// start = 0 if omitted
function rand(size, start){
if(isNaN(start)){ start = 0; }
return Math.floor(Math.random() * size) + start;
}
$.fn.polaroidShuffle = function(){
if($('body').width() > 600){
var board = $(this);
// get height (i'm using total window height, less the header & footer):
var aim_height = window.innerHeight - $('header:first').height() - $('footer:first').height();
board.css({'min-height': aim_height+'px',
'width': '100%',
'position': 'relative'});
function placeRandomly(el){
$(el).css({'position': 'absolute',
'z-index': rand(90),
'top': rand(board.height() * 0.8),
'left': rand(board.width() * 0.8)
});
$(el).rotateAndScale(rand(90, -45), 0.4);
}
function centreLarge(el){
$(el).css({'position': 'fixed',
'z-index': 111,
'top': '50%',
'left': '50%',
'margin-left': '-'+($(el).width()/2)+'px',
'margin-top': '-'+($(el).height()/2)+'px'
});
$(el).rotateAndScale(rand(10,-5), 2.2);
}
board.find('figure').each(function(){
// if using jQueryUI - include the draggable option:
$(this).draggable({ containment: "parent", cursor: "move" });
placeRandomly($(this));
// click handler - to pick up/drop a photo (based on z-index for state)
$(this).on('click', function(){
if($(this).css('z-index') > 100){
placeRandomly($(this));
}else{
centreLarge($(this));
}
});
});
// add the unscatter button:
board.append('');
$('#unscatter').css({'position': 'absolute',
'right': 0,
'top': 0});
// on click, just remove the styles added above and reset to defaults
$('#unscatter').on('click', function(){
board.find('figure').each(function(){
$(this).attr('style', '');
});
});
}else{
// on small/mobile screens, just link through to the image:
$('img').each(function(){
$(this).on('click', function(){
window.location.href = $(this).attr("src");
});
});
}
}
// css3 tranform functions:
$.fn.rotateAndScale = function(degrees, size){
return this.each(function(){
$(this).css({'-webkit-transform': 'rotate('+degrees+'deg) scale('+size+')',
'-moz-transform': 'rotate('+degrees+'deg) scale('+size+')',
'-ms-transform': 'rotate('+degrees+'deg) scale('+size+')',
'-o-transform': 'rotate('+degrees+'deg) scale('+size+')',
'transform': 'rotate('+degrees+'deg) scale('+size+')'
});
});
};
// then just attach the function to whatever div your 'board' is
// (#polaroids if using the php fragment above)
$(document).ready(function(e) {
if($('.gallery #polaroids').exists()){
$('#polaroids').polaroidShuffle();
}
});
'
.'