New Great jQuery Photo Gallery – Skitter

New Great jQuery Photo Gallery – Skitter

7 94150
Skitter photo gallery

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!

SIMILAR ARTICLES

Design Patterns in PHP

0 112315

7 COMMENTS

  1. 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.

  2. 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 !

  3. 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)

  4. 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.

Leave a Reply