Script Tutorials

Creating Ajaxy Photo Gallery (jQuery) with Custom Images Sets

—

by

admin
in

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.

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!