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!
Awsome tutos. thanks
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.
Thanks, very nice gallery and extremely easy to use
What is the code to change the speed of load? Thanks for the code.
Hi Anthony,
There is no code for this, it mostly depends on the speeds of ISP and your hosting