New Great jQuery Photo Gallery – Skitter
Building photo gallery with Skitter. Today we will continue overviews of available photo galleries. Next gallery is Skitter. This is jQuery gallery. This gallery switch images using different transition effects. At current moment it able to manage with 22 different effects. Plus what important – this is cross platform gallery. Sure that your members will love it.
By default that gallery expect already prepared html data (of all images). But its ok, we will force loading of necessary images when page finish loading (as you know – we always can use jQuery functions – so we will load our images dinamically, using $.load function). We will use PHP to generate list of necessary images. In result, this will applicable during creating new photo gallery for any CMS (or another script).
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML. This is source code of our sample:
index.html
<link rel="stylesheet" href="css/main.css" type="text/css" /> <script src="js/jquery-1.5.2.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.skitter.min.js"></script> <script src="js/main.js"></script> <div class="example"> <h3><a href="#">Skitter example</a></h3> <div class="border_box"> <div class="box_skitter box_skitter_large"> <ul class="box_skitter_ul"></ul> </div> </div> </div>
As I hope – all clean here, no need explain it
Step 2. CSS
Here are single CSS file with all necessary styles:
css/main.css
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} .example{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px} /* skitter styles */ .box_skitter{position:relative;width:800px;height:300px;background:#000;overflow:hidden} .box_skitter .image{overflow:hidden} .box_skitter .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20} .box_skitter .box_clone img{position:absolute;top:0;left:0;z-index:20} .box_skitter .prev_button{position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/prev.png) no-repeat left top} .box_skitter .next_button{position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/next.png) no-repeat left top} .box_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;padding:5px 0 5px 5px} .box_skitter .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;margin:0 5px 0 0;padding:2px 10px} .box_skitter .image_number_select{background:#c00;float:left;margin:0 5px 0 0;padding:2px 10px} .box_skitter .info_slide_thumb{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;opacity:1.0;padding:5px} .box_skitter .info_slide_thumb .image_number{overflow:hidden;width:70px;height:40px;position:relative} .box_skitter .info_slide_thumb .image_number img{position:absolute;top:-50px;left:-50px} .box_skitter .box_scroll_thumbs{padding:0 10px} .box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:0 to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333} .box_skitter .label_skitter{z-index:150;position:absolute;bottom:0;left:0;display:none} .loading{position:absolute;top:50%;right:50%;z-index:10000;color:#fff;text-indent:-9999em;overflow:hidden;background:url(../images/ajax-loader.gif) no-repeat left top;width:32px;height:32px;margin:-16px} .box_skitter ul,.box_skitter .image img{display:none} .box_skitter_large{width:800px;height:600px} .box_skitter .image img{width:800px} .label_skitter{background:url(../images/back-box-label-black.png) repeat-x scroll left top transparent;border-top:1px solid #000;bottom:0;color:#FFF;display:none;left:0;position:absolute;z-index:150} .label_skitter p{font:22px arial,tahoma;letter-spacing:-1px;margin:0;padding:10px}
Step 3. JS
Here are all JS files:
js/main.js
$(document).ready(function(){ $('ul.box_skitter_ul').load('feed.php', function() { $('.box_skitter_large').skitter(); } ); });
Everything is quite simple – when the page loads I loading to our empty UL element its constituents – LI elements (the list of gallery images). And then – initialize the gallery by calling the function skitter(). Of course, this function can take different optional params, at the end of this article I will show a table with these params.
js/jquery-1.5.2.min.js, js/jquery-ui.min.js and js/jquery.skitter.min.js
This is necessary libraries – jQuery, UI and Skitter. Available in our package.
Step 4. PHP
Here are code of our generator of gallery images:
feed.php
<? $sCode = ''; $sTemplate = <<<HTML <li> <a href="#"><img src="{fileurl}" class="{effect}" /></a> <div class="label_text"><p>{title}</p></div> </li> HTML; $sFolder = 'data_images/'; $aEffects = array( 'cube', 'cubeRandom', 'block', 'cubeStop', 'cubeHide', 'cubeSize', 'horizontal', 'showBars', 'showBarsRandom', 'tube', 'fade', 'fadeFour', 'paralell', 'blind', 'blindHeight', 'blindWidth', 'directionTop', 'directionBottom', 'directionRight', 'directionLeft', 'cubeStopRandom', 'cubeSpread' ); $aUnits = array( 'pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4', 'pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8', 'pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10' ); foreach ($aUnits as $sFileName => $sTitle) { $sFilePath = $sFolder . $sFileName; list ($iWidth, $iHeight, $vType, $vAttr) = getimagesize($sFilePath); $sCode .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{width}' => $iWidth, '{height}' => $iHeight, '{effect}' => $aEffects[array_rand($aEffects)])); } echo $sCode; ?>
Variable $sTemplate contain template of single photo object. We will use it to generate whole sequence of images in necessary format. Make attention that I using array $aEffects. This array contain all possible effects of this gallery. And I will take random values for each image. So in result you will have interesting result with random effects.
Step 5. Images
All our images located in ‘data_images’ folder. Of course, you can use another directory. Just don`t forget to correct feed.php in this case too. And, here are just 4 different images using in our gallery:
And at last – table with all possible params (to current moment) of that gallery:
Param | Description | Def value | Sample |
---|---|---|---|
velocity | Velocity of animation | 1 | $(‘.skitter_object’).skitter({velocity: 3}); |
interval | Interval between transitions | 2500 | $(‘.skitter_object’).skitter({interval: 3500}); |
animation | Default animation | null or defined in <a> class | $(‘.skitter_object’).skitter({animation: ‘tube’}); |
numbers | Numbers display | true | $(‘.skitter_object’).skitter({numbers: false}); |
navigation | Navigation display | true | $(‘.skitter_object’).skitter({navigation: false}); |
label | Label display | true | $(‘.skitter_object’).skitter({label: false}); |
easing_default | Easing default | null | $(‘.skitter_object’).skitter({easing_default: ‘easeOutBack’}); |
animateNumberOut | Animation/style number | {backgroundColor:’#333′, color:’#fff’} | $(‘.skitter_object’).skitter({animateNumberOut: {backgroundColor:’#000′, color:’#ddd’}}); |
animateNumberOver | Animation/style hover number | {backgroundColor:’#000′, color:’#fff’} | $(‘.skitter_object’).skitter({animateNumberOver: {backgroundColor:’#000′, color:’#ddd’}}); |
animateNumberActive | Animation/style active number | {backgroundColor:’#cc3333′, color:’#fff’} | $(‘.skitter_object’).skitter({animateNumberActive: {backgroundColor:’#000′, color:’#ddd’}}); |
thumbs | Navigation with thumbs | false | $(‘.skitter_object’).skitter({thumbs: true}); |
hideTools | Hide numbers and navigation | false | $(‘.skitter_object’).skitter({hideTools: true}); |
fullscreen | Fullscreen mode | false | $(‘.skitter_object’).skitter({fullscreen: true}); |
Live Demo
Conclusion
Today we described how to build new type of jQuery photo gallery. Sure that you will be happy to use it in your projects. Good luck!
wow thanks – I haven’t read this through but this is exactly what I was wanting to do for my next client. It looks as though this is more of a code-around-and-see-what-you-can-do than a pre-packaged solution, so it’s just perfect for someone like me who is learning to use jquery and new fancy effects.
I just want to make the slideshow so I can have some practice and understand the techniques, so this is really brilliant. Thanks a lot.
What a solution is this man! I am totally impressed when I read your tips about HTML and PHP Any more useful ideas related with HTML and PHP?
2 Tucson
Thanks, I trying (quite daily) to find something interesting and prepare interesting post, welcome back !
NICE TUTORIAL BUT I HAVE SOME PROBLEMS WHEN I START THE INDEX.HTML…
NOTHING HAPPEND…..I NEED SOMETHING FOR THIS?
2 gilbert
Are you opening it as local file or from localhost (apache) ? You should open it from host (so PHP files will executing)
Such a great tutorial. Thanks for posting it …
Thanks for posting this jQuery Photo Gallery Tutorial! I’ve been trying to figure this out for two days now. I’m definitely going to bookmark your site.