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

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

23 161950
Slider Kit photo gallery

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!

SIMILAR ARTICLES

Design Patterns in PHP

0 112250
Polaroid gallery

0 57670

23 COMMENTS

  1. Thank you admin for such great stuff.

    I want to display the image thumbnail in grid format have 3 image in a row and multiple rows.

    Can you please let me know the part of the code that I need to modify for that.

    Also I am trying to put in the panel “Next” and “Preview” Images but the command “panelbtnshover:true” is not working for example 2.

    It would be a great help.

    Thanks
    Jaimin

    • Hello again Jaimin,
      Regarding ‘panelbtnshover’ param, It seems that they don’t use that PrevNext bars for vertical mode.

  2. Dear Admin,

    When I am using “tabs:true” it only show 10 images even if I have 15 images in “data_images” folder.

  3. Question for you, I have a website in which the front page is done in HTML using Microsoft Expression Web 4. The linked pages are done in word press. I would love to be able to have a slider on the front HTML page that displays the last 10 posts in a slider with excerpts and a link to read more that would include the pictures in the post too. I would like the slider to use the RSS feed to populate itself from the wordpress site. Could you please point me in the right direction? This way when I write a new article it would automatically show up in the slider…. Thanks for your help. I am a bit in over my head but I know what I would like to have….

    • Hello Larry,
      Then, you have focus your attention to feed.php file. Generally, you have take your posts (from wordpress), take necessary photos from these posts (anything – in pure PHP of course), and then prepare necessary output for that slider (or for any another slider).

  4. Dear Admin
    i have one question, index.html didn’t show images. what wrong, do i need to change something?

  5. Hello, Andrew. Thank you for the well-explained tutorial. I have installed it successfully, but I wonder:
    Can PHP be used to *dynamically* generate the gallery, without having to resort to the creation of an array (‘$aUnits’)? Of course, were any changes needed to the images, this array would need to be changed as well. I would prefer to avoid this. Can PHP be used, or must I resort to AJAX?

    Kind regards,
    Michael

    • Hello Michael,
      Of course you can. In my tutorial – this is only an example. This isn’t necessary to keep all the images in this array. These images can be in some folder, and you can just extract their names automatically, or you can keep the names of your images in database as example (if you use some CMS with multiple members).
      In the result – you have to provide some defined array of images to that gallery.

  6. Hello, I’m having problems with sliderkit “Vertical photos gallery” vertical navbar centering – such as shown in your demo2.
    This only occurs in IE8, other browsers will display OK.
    I’ve discovered the original kyrielles demo script is written in HTML5 and the demo works ok.
    However the problem appears when the web page is written in HTML4
    Any ideas on a fix
    Thanks

    • Hello Graham,
      Did you try it in compatible mode? Mainly because it works well (even in IE8), but yes, it doesn’t work well in compatible mode (which you can set in your browser).

  7. Hi Andrew,

    I’ve fixed the IE problem!

    The sliderkit-demos-ie8.css needs to be modified as follows
    /*———————————
    * Photos gallery > Vertical
    *———————————*/
    .photosgallery-vertical .sliderkit-panel .sliderkit-panel-overlay{-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”;}
    .photosgallery-vertical .sliderkit-nav-clip{top:63px !important;left:-1;}

    Also create another sliderkit-demos-ie9.css with the same script to satisfy IE9

    Check your “Live Demo 2” with IE8 – the vertical thumbnails are off centre

    Regards

  8. I am really impressed with this beautiful photo gallery. You are really smart in developing imagination to design a template.

  9. Dear Admin
    i have one question, index.html didn’t show images. what wrong, do i need to change something?

    • Hi Yara,
      I can not say you something certain, because I haven’t seen your result, but there is nothing wrong in our demo

      • Download packages contain
        <?
        it should <?php

        Case:When you upload it in localhost but not on webhosting.

  10. Hi Yogastyo,
    It doesn’t matter what you use: <? or <?php
    If you want to use this short version, the ‘short_open_tags’ param should be ON

  11. Yes yagatsyo is right on local host we need to right <?php instead of <? try it

  12. i’ve tried this Photo Gallery inside a Bootstrap Modal , but it can’t be shown,
    when i check it on browser developer tools, all elements have inline style width:0 and height:0.
    what should i do?

    • Hello Vany, this is strange, I suppose that there is a JS error on page, check it. The height is defined in sliderkit-demos.css, it shouldn’t be zero

Leave a Reply