Home » Tutorials

Creating Ajaxy Photo Gallery (jQuery) with Custom Images Sets

Tutorials
Author Reading 13 min Views 594 Published by Modified by

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:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/style.css
  5. Step 3. JS (jQuery)
  6. js/main.js
  7. Step 4. Images
  8. Conclusion
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.

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
03 <head>
04     <title>Ajax photo gallery (jQuery) with custom images sets | Script tutorials</title>
05     <link rel="stylesheet" type="text/css" href="css/style.css" />
06     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
07     <script type="text/javascript" src="js/main.js"></script>
08 </head>
09 <body>
10     <div class="example">
11         <h2>Ajax photo gallery (jQuery) with custom images sets</h2>
12         <div id="gallery">
13             <ul id="sets"></ul>
14             <div id="loading"></div>
15             <img id="photo" src="images/pic1.jpg" />
16             <ul id="thumbs"></ul>
17         </div>
18     </div>
19 </body>
20 </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

001 * {
002     margin:0;
003     padding:0;
004 }
005 body {
006     background:#eee;
007     margin:0;
008     padding:0;
009 }
010 .example {
011     position:relative;
012     background-color:#fff;
013     width:850px;
014     overflow:hidden;
015     border:1px #000 solid;
016     margin:20px auto;
017     padding:20px;
018     border-radius:3px;
019     -moz-border-radius:3px;
020     -webkit-border-radius:3px;
021 }
022 /* gallery styles */
023 #gallery {
024     background-color:#888;
025     height:630px;
026     overflow:hidden;
027     position:relative;
028     width:800px;
029     border-radius:10px;
030     -moz-border-radius:10px;
031     -webkit-border-radius:10px;
032 }
033 #gallery ul#sets {
034     display:table;
035     list-style:none outside none;
036     margin:10px auto;
037     overflow:hidden;
038 }
039 #gallery ul#sets li {
040     float:left;
041     margin-right:10px;
042 }
043 #gallery ul#sets li a {
044     background-color:#000;
045     color:#fff;
046     cursor:pointer;
047     display:block;
048     font-size:14px;
049     font-weight:normal;
050     height:26px;
051     line-height:26px;
052     padding:10px 20px;
053     text-decoration:none;
054     -moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px 5px 5px 5px;
055     background: -moz-linear-gradient(#363636, #010101); /* FF 3.6+ */
056     background: -ms-linear-gradient(#363636, #010101); /* IE10 */
057     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #363636), color-stop(100%, #010101)); /* Safari 4+, Chrome 2+ */
058     background: -webkit-linear-gradient(#363636, #010101); /* Safari 5.1+, Chrome 10+ */
059     background: -o-linear-gradient(#363636, #010101); /* Opera 11.10 */
060     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#363636', endColorstr='#010101'); /* IE6 & IE7 */
061     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#363636', endColorstr='#010101')"; /* IE8+ */
062     background: linear-gradient(#363636, #010101); /* the standard */
063 }
064 #gallery ul#sets li a:hover{
065     background-color:#ff6a11;
066     background: -moz-linear-gradient(#ff9317, #ff6a11); /* FF 3.6+ */
067     background: -ms-linear-gradient(#ff9317, #ff6a11); /* IE10 */
068     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff9317), color-stop(100%, #ff6a11)); /* Safari 4+, Chrome 2+ */
069     background: -webkit-linear-gradient(#ff9317, #ff6a11); /* Safari 5.1+, Chrome 10+ */
070     background: -o-linear-gradient(#ff9317, #ff6a11); /* Opera 11.10 */
071     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9317', endColorstr='#ff6a11'); /* IE6 & IE7 */
072     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9317', endColorstr='#ff6a11')"; /* IE8+ */
073     background: linear-gradient(#ff9317, #ff6a11); /* the standard */
074 }
075 #gallery #loading {
076     text-align:center;
077 }
078 #gallery #photo {
079     display:block;
080     margin:10px auto;
081 }
082 #gallery ul#thumbs {
083     bottom:-25px;
084     left:250px;
085     list-style:none outside none;
086     margin:0 auto;
087     opacity:0.5;
088     overflow:hidden;
089     position:absolute;
090     width:300px;
091     -moz-transition: bottom 0.5s ease-in-out;
092     -ms-transition: bottom 0.5s ease-in-out;
093     -o-transition: bottom 0.5s ease-in-out;
094     -webkit-transition: bottom 0.5s ease-in-out;
095     transition: bottom 0.5s ease-in-out;
096 }
097 #gallery ul#thumbs:hover {
098     opacity:1;
099     bottom:10px;
100 }
101 #gallery ul#thumbs li {
102     border:1px solid #888;
103     cursor:pointer;
104     float:left;
105     height:38px;
106     width:58px;
107 }
108 #gallery ul#thumbs li:hover {
109     border:1px solid #fff;
110 }
111 #gallery ul#thumbs li img {
112     width:100%;
113 }

Step 3. JS (jQuery)

Now, its time to see how our gallery working:

js/main.js

01 // defining sets of images (galleries)
02 var images = {
03     'set 1' : [
04         'pic1.jpg',
05         'pic2.jpg',
06         'pic3.jpg',
07         'pic4.jpg',
08         'pic5.jpg',
09         'pic6.jpg',
10         'pic7.jpg',
11         'pic8.jpg',
12         'pic9.jpg',
13         'pic10.jpg'
14     ],
15     'set 2' : [
16         'pic2.jpg',
17         'pic3.jpg',
18         'pic4.jpg',
19         'pic5.jpg',
20         'pic6.jpg',
21         'pic7.jpg',
22         'pic8.jpg',
23         'pic9.jpg',
24         'pic10.jpg',
25         'pic11.jpg',
26         'pic12.jpg',
27         'pic5.jpg',
28         'pic6.jpg',
29         'pic7.jpg',
30         'pic8.jpg'
31     ],
32     'set 3' : [
33         'pic1.jpg',
34         'pic2.jpg',
35         'pic3.jpg',
36         'pic4.jpg',
37         'pic5.jpg',
38         'pic6.jpg',
39         'pic7.jpg',
40         'pic8.jpg',
41         'pic9.jpg',
42         'pic10.jpg',
43         'pic11.jpg',
44         'pic12.jpg',
45         'pic4.jpg',
46         'pic5.jpg',
47         'pic6.jpg'
48     ]
49 };
50 $(document).ready(function(){ // on document ready
51     $('#gallery').gallery();
52 });
53 $.fn.gallery = function() {
54     var self = this;
55     var setimgs;
56     this.each(function() {
57         var g = this;
58         g.load_sets = function(el) { // function - load sets of images
59             $.each(images, function(key, value) {
60                 $(el).append('<li><a id="'+key+'" href="#" title="'+key+'">'+key+'</a></li>');
61             });
62             var sets = $(el).find('li a');
63             $(sets).click(function() { // binding onclick to our sets
64                 var set = $(this).attr('id');
65                 g.setimgs = images[set];
66                 $(g).find('#thumbs').html('');
67                 g.load_thumbs($(g).find('#thumbs')[0], 0);
68                 $(g).find('#loading').html('Loading <strong>1</strong> of '+g.setimgs.length+' images');
69             });
70             sets[0].click();
71         }
72         g.load_thumbs = function(el, index) { // function - load thumbs of set
73             $(el).append('<li><img id="' + g.setimgs[index] + '" src="images/thumb_' + g.setimgs[index] + '" /></li>');
74             var tn = new Image();
75             $(tn).load(function() {
76                 var a = $($(el).find('li')[index]).find('img')[0];
77                 $(a).append(this);
78                 $(a).click(function() { // binding onclick to thumbs
79                     var i = $(this).attr('id');
80                     $(g).find('#photo').attr('src', 'images/'+i);
81                     return false;
82                 });
83                 if ((index + 1) < g.setimgs.length) {
84                     g.load_thumbs(el, (index + 1));
85                     $(g).find('#loading strong').html(index + 2);
86                 } else {
87                     $(g).find('#loading').html('Finished loading <strong>' + g.setimgs.length + '</strong> images');
88                     $($(g).find('#thumbs li img')[0]).click();
89                 }
90             });
91             tn.src = 'images/thumb_' + g.setimgs[index];
92         }
93         // oninit - load sets for gallery
94         g.load_sets($(g).find('#sets')[0]);
95     });
96 };

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!

Rate article
© 2025 Script Tutorials