Creating Ajaxy Photo Gallery (jQuery) with Custom Images Sets

Creating Ajaxy Photo Gallery (jQuery) with Custom Images Sets

5 67630
ajaxy photo gallery (jQuery) with custom images sets

Creating ajaxy photo gallery (jQuery) with custom images sets

Today we will make simple and nice jQuery gallery which will load images ‘ajaxy’. Also our gallery will support working with predefined custom sets of images. I hope that our result will interesting for you.

Here are links to demo and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]


Now please download the example files and lets start coding !


Step 1. HTML

index.html

As usual, we start with the HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Ajax photo gallery (jQuery) with custom images sets | Script tutorials</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
    <div class="example">
        <h2>Ajax photo gallery (jQuery) with custom images sets</h2>
        <div id="gallery">
            <ul id="sets"></ul>
            <div id="loading"></div>
            <img id="photo" src="images/pic1.jpg" />
            <ul id="thumbs"></ul>
        </div>
    </div>
</body>
</html>

As you can see – we don`t going to load anything in beginning. All images will loaded only when page will loaded.

Step 2. CSS

Here are our styles:

css/style.css

* {
    margin:0;
    padding:0;
}
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    position:relative;
    background-color:#fff;
    width:850px;
    overflow:hidden;
    border:1px #000 solid;
    margin:20px auto;
    padding:20px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
/* gallery styles */
#gallery {
    background-color:#888;
    height:630px;
    overflow:hidden;
    position:relative;
    width:800px;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}
#gallery ul#sets {
    display:table;
    list-style:none outside none;
    margin:10px auto;
    overflow:hidden;
}
#gallery ul#sets li {
    float:left;
    margin-right:10px;
}
#gallery ul#sets li a {
    background-color:#000;
    color:#fff;
    cursor:pointer;
    display:block;
    font-size:14px;
    font-weight:normal;
    height:26px;
    line-height:26px;
    padding:10px 20px;
    text-decoration:none;
    -moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px 5px 5px 5px;
    background: -moz-linear-gradient(#363636, #010101); /* FF 3.6+ */
    background: -ms-linear-gradient(#363636, #010101); /* IE10 */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #363636), color-stop(100%, #010101)); /* Safari 4+, Chrome 2+ */
    background: -webkit-linear-gradient(#363636, #010101); /* Safari 5.1+, Chrome 10+ */
    background: -o-linear-gradient(#363636, #010101); /* Opera 11.10 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#363636', endColorstr='#010101'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#363636', endColorstr='#010101')"; /* IE8+ */
    background: linear-gradient(#363636, #010101); /* the standard */
}
#gallery ul#sets li a:hover{
    background-color:#ff6a11;
    background: -moz-linear-gradient(#ff9317, #ff6a11); /* FF 3.6+ */
    background: -ms-linear-gradient(#ff9317, #ff6a11); /* IE10 */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff9317), color-stop(100%, #ff6a11)); /* Safari 4+, Chrome 2+ */
    background: -webkit-linear-gradient(#ff9317, #ff6a11); /* Safari 5.1+, Chrome 10+ */
    background: -o-linear-gradient(#ff9317, #ff6a11); /* Opera 11.10 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9317', endColorstr='#ff6a11'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9317', endColorstr='#ff6a11')"; /* IE8+ */
    background: linear-gradient(#ff9317, #ff6a11); /* the standard */
}
#gallery #loading {
    text-align:center;
}
#gallery #photo {
    display:block;
    margin:10px auto;
}
#gallery ul#thumbs {
    bottom:-25px;
    left:250px;
    list-style:none outside none;
    margin:0 auto;
    opacity:0.5;
    overflow:hidden;
    position:absolute;
    width:300px;
    -moz-transition: bottom 0.5s ease-in-out;
    -ms-transition: bottom 0.5s ease-in-out;
    -o-transition: bottom 0.5s ease-in-out;
    -webkit-transition: bottom 0.5s ease-in-out;
    transition: bottom 0.5s ease-in-out;
}
#gallery ul#thumbs:hover {
    opacity:1;
    bottom:10px;
}
#gallery ul#thumbs li {
    border:1px solid #888;
    cursor:pointer;
    float:left;
    height:38px;
    width:58px;
}
#gallery ul#thumbs li:hover {
    border:1px solid #fff;
}
#gallery ul#thumbs li img {
    width:100%;
}

Step 3. JS (jQuery)

Now, its time to see how our gallery working:

js/main.js

// defining sets of images (galleries)
var images = {
    'set 1' : [
        'pic1.jpg',
        'pic2.jpg',
        'pic3.jpg',
        'pic4.jpg',
        'pic5.jpg',
        'pic6.jpg',
        'pic7.jpg',
        'pic8.jpg',
        'pic9.jpg',
        'pic10.jpg'
    ],
    'set 2' : [
        'pic2.jpg',
        'pic3.jpg',
        'pic4.jpg',
        'pic5.jpg',
        'pic6.jpg',
        'pic7.jpg',
        'pic8.jpg',
        'pic9.jpg',
        'pic10.jpg',
        'pic11.jpg',
        'pic12.jpg',
        'pic5.jpg',
        'pic6.jpg',
        'pic7.jpg',
        'pic8.jpg'
    ],
    'set 3' : [
        'pic1.jpg',
        'pic2.jpg',
        'pic3.jpg',
        'pic4.jpg',
        'pic5.jpg',
        'pic6.jpg',
        'pic7.jpg',
        'pic8.jpg',
        'pic9.jpg',
        'pic10.jpg',
        'pic11.jpg',
        'pic12.jpg',
        'pic4.jpg',
        'pic5.jpg',
        'pic6.jpg'
    ]
};
$(document).ready(function(){ // on document ready
    $('#gallery').gallery();
});
$.fn.gallery = function() {
    var self = this;
    var setimgs;
    this.each(function() {
        var g = this;
        g.load_sets = function(el) { // function - load sets of images
            $.each(images, function(key, value) {
                $(el).append('<li><a id="'+key+'" href="#" title="'+key+'">'+key+'</a></li>');
            });
            var sets = $(el).find('li a');
            $(sets).click(function() { // binding onclick to our sets
                var set = $(this).attr('id');
                g.setimgs = images[set];
                $(g).find('#thumbs').html('');
                g.load_thumbs($(g).find('#thumbs')[0], 0);
                $(g).find('#loading').html('Loading <strong>1</strong> of '+g.setimgs.length+' images');
            });
            sets[0].click();
        }
        g.load_thumbs = function(el, index) { // function - load thumbs of set
            $(el).append('<li><img id="' + g.setimgs[index] + '" src="images/thumb_' + g.setimgs[index] + '" /></li>');
            var tn = new Image();
            $(tn).load(function() {
                var a = $($(el).find('li')[index]).find('img')[0];
                $(a).append(this);
                $(a).click(function() { // binding onclick to thumbs
                    var i = $(this).attr('id');
                    $(g).find('#photo').attr('src', 'images/'+i);
                    return false;
                });
                if ((index + 1) < g.setimgs.length) {
                    g.load_thumbs(el, (index + 1));
                    $(g).find('#loading strong').html(index + 2);
                } else {
                    $(g).find('#loading').html('Finished loading <strong>' + g.setimgs.length + '</strong> images');
                    $($(g).find('#thumbs li img')[0]).click();
                }
            });
            tn.src = 'images/thumb_' + g.setimgs[index];
        }
        // oninit - load sets for gallery
        g.load_sets($(g).find('#sets')[0]);
    });
};

As you can see – in most beginning we defining set of used images. And during initialization – we loading our sets and loading first set automatically. Binding onclick events etc. Initialization of gallery very easy – $(‘#gallery’).gallery();

Step 4. Images

All our images located in ‘images’ folder. Here are thumb images (thumb_pic1.jpg, thumb_pic2.jpg .. thumb_pic12.jpg) and full-size images too(pic1.jpg, pic2.jpg .. pic12.jpg)


Live Demo

Conclusion

New photo gallery is done! I hope that you enjoyed this article. Good luck in your projects!

SIMILAR ARTICLES


5 COMMENTS

  1. Nice slider……. btw wanted to ask is there a Iphone/Safari style slider…

    like how u can slide through Music Cover arts in Iphone the same way for the images Via jQuery.

Leave a Reply