Home » Tutorials

Nice CSS3 Lightbox Gallery With jQuery

Tutorials
Author Reading 10 min Views 686 Published by Modified by

Nice CSS3 Lightbox gallery With jQuery. This tutorial will about creating nice looking photo gallery where we will using and CSS3 and jQuery too (with combination with drag and drop and fancybox plugin). Our gallery will some pane, where we will able to see scattered photos. We will able to drag and drop these photos (like real photos at your table), and also open each photo separately (via clicking at it). I think that this will interesting and you will like it.

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. I don`t will scare you with big code here, but will split this into logic sections. First is header area:

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>Nice CSS3 Lightbox Gallery With jQuery | Script tutorials</title>
05     <link rel="stylesheet" type="text/css" href="css/style.css" />
06     <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" />
07     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
08     <script type="text/javascript" src="js/jquery-css-transform.js"></script>
09     <script type="text/javascript" src="js/jquery-animate-css-rotate-scale.js"></script>
10     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
11     <script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>
12     <script type="text/javascript" src="js/main.js"></script>
13 </head>

Here I linking 2 CSS files and 6 JS files. This is for fancybox library, jQuery library, 2 files (jquery-css-transform.js and jquery-animate-css-rotate-scale.js) will allow us to perform rotate animation, and – few files – our own customization. Last part is gallery itself (parent object with images inside):

01 <div id="gallery">
02     <div id="1" style="background-image:url(images/thumb_pic1.jpg)">
03         <a class="fancybox" href="images/pic1.jpg" target="_blank">photo 1</a>
04     </div>
05     <div id="2" style="background-image:url(images/thumb_pic2.jpg)">
06         <a class="fancybox" href="images/pic2.jpg" target="_blank">photo 2</a>
07     </div>
08     <div id="3" style="background-image:url(images/thumb_pic3.jpg)">
09         <a class="fancybox" href="images/pic3.jpg" target="_blank">photo 3</a>
10     </div>
11     <div id="4" style="background-image:url(images/thumb_pic4.jpg)">
12         <a class="fancybox" href="images/pic4.jpg" target="_blank">photo 4</a>
13     </div>
14     <div id="5" style="background-image:url(images/thumb_pic5.jpg)">
15         <a class="fancybox" href="images/pic5.jpg" target="_blank">photo 5</a>
16     </div>
17     <div id="6" style="background-image:url(images/thumb_pic6.jpg)">
18         <a class="fancybox" href="images/pic6.jpg" target="_blank">photo 6</a>
19     </div>
20     <div id="7" style="background-image:url(images/thumb_pic7.jpg)">
21         <a class="fancybox" href="images/pic7.jpg" target="_blank">photo 7</a>
22     </div>
23     <div id="8" style="background-image:url(images/thumb_pic8.jpg)">
24         <a class="fancybox" href="images/pic8.jpg" target="_blank">photo 8</a>
25     </div>
26     <div id="9" style="background-image:url(images/thumb_pic9.jpg)">
27         <a class="fancybox" href="images/pic9.jpg" target="_blank">photo 9</a>
28     </div>
29     <div id="10" style="background-image:url(images/thumb_pic10.jpg)">
30         <a class="fancybox" href="images/pic10.jpg" target="_blank">photo 10</a>
31     </div>
32     <div id="11" style="background-image:url(images/thumb_pic11.jpg)">
33         <a class="fancybox" href="images/pic11.jpg" target="_blank">photo 11</a>
34     </div>
35     <div id="12" style="background-image:url(images/thumb_pic12.jpg)">
36         <a class="fancybox" href="images/pic12.jpg" target="_blank">photo 12</a>
37     </div>
38 </div>

Here we can see 12 added objects – elements of gallery. Hope all clean here.

Step 2. CSS

Here are our styles:

css/style.css

01 body {
02     background:#eee;
03     margin:0;
04     padding:0;
05 }
06 .example {
07     position:relative;
08     background-color:#fff;
09     width:700px;
10     overflow:hidden;
11     border:1px #000 solid;
12     margin:20px auto;
13     padding:20px;
14     border-radius:3px;
15     -moz-border-radius:3px;
16     -webkit-border-radius:3px;
17 }
18 #gallery {
19     height:600px;
20     position:relative;
21     width:100%;
22 }
23 #gallery div,#gallery div a {
24     height:128px;
25     overflow:hidden;
26     width:192px;
27 }
28 #gallery div {
29     background-color:#fff;
30     background-position:50% 50%;
31     background-repeat:no-repeat;
32     border:2px solid #000;
33     left:250px;
34     padding:5px;
35     position:absolute;
36     top:200px;
37     border-radius:3px;
38     -moz-border-radius:3px;
39     -webkit-border-radius:3px;
40     -moz-box-shadow:3px 3px 4px #444;
41     -webkit-box-shadow:3px 3px 4px #444;
42     box-shadow:3px 3px 4px #444;
43 }
44 #gallery div a {
45     display:block;
46     text-indent:-1000px;
47 }

Step 3. JS (jQuery)

Now, its time to understand how we initializing our gallery:

js/main.js

01 $(document).ready(function(){ // on document ready
02     // onload - randomizing photos
03     $('#gallery div').each(function() {
04         var iRL = Math.floor(Math.random() * 500);
05         var iRT = Math.floor(Math.random() * 350);
06         var iMT = Math.floor(Math.random() * 100 - 50);
07         $(this).animate({
08             left: iRL,
09             top: iRT,
10             rotate: iMT + 'deg',
11         }, 2000);
12     });
13     var bPrevClick = false; // preventing clicking will solve problem with fancybox
14     $('#gallery div').draggable({ // making photos draggable
15         containment: 'parent',
16         start: function(e,ui) {
17             bPrevClick = true;
18         },
19         stop: function(e, ui) {
20             setTimeout(function() {
21                 bPrevClick = false;
22             }, 50);
23         }
24     });
25     $('#gallery div a').bind('click',function(e) {
26         if (bPrevClick) {
27             e.preventDefault();
28             e.stopImmediatePropagation();
29         }
30     });
31     $('#gallery div').mousedown(function(e) { // on mouse down
32         var iMZ = 0;
33         $('#gallery div').each(function() { // searching for max zIndex
34             var z = parseInt($(this).css('zIndex'))
35             iMZ = (z > iMZ) ? z : iMZ;
36         });
37         $(e.target).closest('#gallery div').css({ // we will UP actice image
38             zIndex: iMZ + 1
39         });
40     });
41     $('a.fancybox').fancybox({ // fancybox initizlization
42         zoomSpeedIn: 500, // zoom IN speed
43         zoomSpeedOut: 500, // zoom OUT speed
44         overlayShow: false // using overlay
45     });
46 });

From beginning – I rendomize positions of our photos – random positions and rotate degreee. Then – I had a task to prevent lightbox from loading full-photo during moving (drag and drop) photo. And in the end – fancybox initialization.

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 great photo gallery is done! I hope that you enjoyed this article. Good luck in your projects!

Rate article
© 2026 Script Tutorials