How to Create Animated Photo Gallery using jQuery

Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<link rel="stylesheet" type="text/css" href="css/sliderkit-core.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos.css" media="screen, projection" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie8.css" />
<![endif]-->

<script src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.sliderkit.1.5.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<div class="example">
    <h3><a href="#">Slider Kit example</a></h3>

    <div class="sliderkit photosgallery-std" id="sliderkit_galery">
        <div class="sliderkit-nav">
            <div class="sliderkit-nav-clip">
                <ul></ul>
            </div>
            <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div>
            <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div>
            <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous photo"><span>Previous photo</span></a></div>
            <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next photo"><span>Next photo</span></a></div>
        </div>
        <div class="sliderkit-panels">
            <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous"><span>Previous</span></a></div>
            <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next"><span>Next</span></a></div>
        </div>
    </div>

</div>

You can notice, that currently we have empty UL inside ‘sliderkit-nav’. We will load its units on ‘jQuery(window).load’ event. Also, by default ‘sliderkit-panels’ should contain ready set of images too, we will load it after too. So currently we just prepared skeleton – interface elements (panels and buttons).

Now, make attention to class of our main gallery ‘photosgallery-std’. This class will determinate gallery view. For first example we using Standard view (‘photosgallery-std’, where ‘std’ – Standard shortly). Here are another possible classes: ‘photosgallery-captions’ (will display custom captions at images), ‘photosgallery-vertical’ (will display captions and make gallery vertically) and ‘photosgallery-minimalistic’ (minimalistic set, nothing). Another point, no need generate navigation buttons in case if you going to use ‘minimalistic’, they don`t will display anyway 





Step 2. CSS

Here are used CSS files:


css/main.css


body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
 

js/main.js

//jQuery(window).load() must be used instead of jQuery(document).ready() because of Webkit compatibility
jQuery(window).load(function() {
    $.get('feed.php', function(data){
        $('.sliderkit-nav-clip ul').append(data.thumbs);
        $('.sliderkit-panels').append(data.images);

        jQuery('#sliderkit_galery').sliderkit({
            mousewheel:true,
            keyboard:true,
            shownavitems:4,
            panelbtnshover:true,
            auto:true,
            circular:true,
            navscrollatend:true
        });
    });
js/main2.js
jQuery(window).load(function() {
    $.get('feed.php', function(data){
        $('.sliderkit-nav-clip ul').append(data.thumbs);
        $('.sliderkit-panels').append(data.images);

        jQuery('#sliderkit_galery').sliderkit({
            mousewheel:true,
            keyboard:true,
            shownavitems:4,
            auto:true,
            circular:true,
            navscrollatend:true,
            verticalnav:true,
            navclipcenter:true,
            navitemshover:true,
            panelfxspeed: 2000
        });
    });
});

});
feed.php

<?

$sThumbTemplate = <<<HTML
<li><a href="#" rel="nofollow" title="{title}"><img src="{fileurl}" alt="{title}" /></a></li>
HTML;

$sImageTemplate = <<<HTML
<div class="sliderkit-panel">
    <img src="{fileurl}" alt="{title}" />
    <div class="sliderkit-panel-textbox">
        <div class="sliderkit-panel-text">
            <h4>{title}</h4>
            <p>{description}</p>
        </div>
        <div class="sliderkit-panel-overlay"></div>
    </div>
</div>
HTML;

$sThumbs = $sImages = '';
$sFolder = 'data_images/';

$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) {
    $sThumbs .= strtr($sThumbTemplate, array('{fileurl}' => $sFolder . 't_' . $sFileName, '{title}' => $sTitle));
    $sImages .= strtr($sImageTemplate, array('{fileurl}' => $sFolder . $sFileName, '{title}' => $sTitle, '{description}' => $sTitle . ' photo description here'));
}

header("Content-Type: application/json");
require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode(array('thumbs' => $sThumbs, 'images' => $sImages));

?>