How to Create Animated Photo Gallery using jQuery (Slider Kit)

Slider kit tutorial. Today we continue overviews of available photo galleries. Next gallery will Slider Kit. This is free jQuery photo gallery. This gallery have 4 different views (standard, with captions, vertical and minimalistic). Important notes – that it compatible with all browsers (this can work even in IE6) and have very light weight (packed version of library less 8kb). You can navigate through images using your mouse, mouse wheel, and even keyboard. The result – we will have a beautiful gallery with an intuitive interface. Today I will tell you about how to implement this gallery (you even will able to use this in any CMS as gallery of your member’s photos).

By default this gallery expect already prepared html data (with all images and thumbs). So it can be difficult to load dinamic content in it (different photos of different members). But its ok, we will force loading of necessary images when page finish loading using jQuery (we will load our images dinamically, using $.get function). We will use PHP to generate lists of necessary images and thumbs.

Ok, lets start, and lets check prepared demos and download ready package:

Live Demo 1

Live Demo 2

Live Demo 3

---

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" 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 :)

In our package you will find ‘index2.html’ and also ‘index3.html’. This is just different gallery views.

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}

As usual – our main file for demo layout – very easy. But of course, pur new gallery have own css files:

css/sliderkit-core.css, css/sliderkit-demos-ie6.css, css/sliderkit-demos-ie7.css, css/sliderkit-demos-ie8.css and css/sliderkit-demos.css

All these files you will able to find in package (they are large enough to include them in the article)

Step 3. JS

Here are all JS files:

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
        });
    });
});

So, when page loaded, I start loading extra info (about using thumbs and images) from feed.php using jQuery. After, appending received info (JSON) to the pending objects. And then – perform initialization of our gallery with necessary params. First demo will using mousewheel, keyboard, will display 4 elements in navigation, have auto scrolling. Full list of possible option I will put in end of article. Next file

js/main2.js

have similar structure, but another set of properties:

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
        });
    });
});

And here are code for our third sample:

js/main3.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
        });
    });
});

js/jquery-1.5.2.min.js, js/jquery.easing.1.3.min.js, js/jquery.mousewheel.min.js and js/jquery.sliderkit.1.5.1.pack.js

This is list of all another used JS files (jquery library with gallery). Available in our package.

Step 4. PHP

Here are source code of our generator of images:

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));
?>

Firstly, I defined 2 templates which going to use for generation of necessary info about using images and for thumbs and for images. Also will use JSON to be able to send both strings in one time (inside array). All our custom images located in ‘data_images’ directory. All thumbs – have prefix ‘t_’. Easy enough :)

Step 5. Images

Our Slider Kit gallery using next images:

And at last – table with all possible params (to current moment) of this gallery:

Param	Type	Default	Description
cssprefix	string	sliderkit	The prefix to use on every CSS class names
start	int	0	Set the start position. First is 0.
auto	boolean	true	Activate auto-scrolling
autospeed	int	4000	Set the auto-scrolling speed (ms)
mousewheel	boolean	false	Activate the mousewheel navigation
keyboard	boolean	false	Activate the keyboard navigation. Very basic for now (left/right arrows only)
panelclick	boolean	false	Activate the 1-click navigation
circular	boolean	false	Activate the infinite nav scroll
shownavitems	int	5	Defines how many thumbnails to display in the nav clip
navitemshover	boolean	false	If set the panels will slide on nav thumbnails mouseover (by default panels slide on click)
navclipcenter	boolean	false	Defines if the nav clip must be center-aligned in the nav container
navcontinuous	boolean	false	If set to true, will make the carousel scroll continuously (use this option with a “linear” scrolleasing)
navscrollatend	boolean	false	If set to ‘true’, will make the carousel scroll if a line first or last thumbnail is clicked
navfx	string	sliding	Define the carousel transition effect. Possible values: “sliding”, “none”
scroll	int	equal to ‘shownavitems’ option value	Defines how many nav thumbnails must be scrolled when nav buttons are clicked. Can’t be greater than the ‘shownavitems’ option value
scrollspeed	int	600	Set the nav scroll speed (ms)
scrolleasing	string	swing	Add an easing effect to the nav slide transition. Default jQuery easing functions are “swing” or “linear”.
swing	string	fading	Define the panels transition effect. Possible values: “fading”, “sliding”, “none”
panelfxspeed	int	700	Set the panel slide transition effect speed (ms)
panelfxeasing	string	swing	Add an easing effect to the panel slide transition. Default jQuery easing functions are “swing” or “linear”
panelfxfirst	string	none	Add a transition effect on the first displayed item. There are only 2 possible values for the moment: “fading” or “none”
panelfxbefore	function	function(){}	The function called before the panel transition start
panelfxafter	function	function(){}	The function called when panel transition is over
panelbtnshover	boolean	false	If set to true, go buttons will fade in/out on panel mouseover
verticalnav	boolean	false	Set the nav clip direction to vertical
verticalslide	boolean	false	Set the panel sliding direction to vertical (only if “panelfx” is defined as “sliding”)
tabs	boolean	false	Required to build a tabs menu
freeheight	boolean	false	Use panels with no fixed height (in this case, ‘panelfx’ value can’t be “sliding”)
fastchange	boolean	true	By default the user can slide to the next content even if the slider is still running. You can stop this behavior by setting the “fastchange” option to false
debug	boolean	false	If set to true, the script will stop on errors and return error code values. Check documentation

---

Live Demo 1

Live Demo 2

Live Demo 3

[sociallocker]

download in package

[/sociallocker]

---

Conclusion

Today we explained how to build new jQuery gallery, even several. Sure that you will happy to use it in your projects. Good luck!