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:
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:
<!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>Nice CSS3 Lightbox Gallery With jQuery | Script tutorials</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.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/jquery-css-transform.js"></script> <script type="text/javascript" src="js/jquery-animate-css-rotate-scale.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script> <script type="text/javascript" src="js/main.js"></script> </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):
<div id="gallery"> <div id="1" style="background-image:url(images/thumb_pic1.jpg)"> <a class="fancybox" href="images/pic1.jpg" target="_blank">photo 1</a> </div> <div id="2" style="background-image:url(images/thumb_pic2.jpg)"> <a class="fancybox" href="images/pic2.jpg" target="_blank">photo 2</a> </div> <div id="3" style="background-image:url(images/thumb_pic3.jpg)"> <a class="fancybox" href="images/pic3.jpg" target="_blank">photo 3</a> </div> <div id="4" style="background-image:url(images/thumb_pic4.jpg)"> <a class="fancybox" href="images/pic4.jpg" target="_blank">photo 4</a> </div> <div id="5" style="background-image:url(images/thumb_pic5.jpg)"> <a class="fancybox" href="images/pic5.jpg" target="_blank">photo 5</a> </div> <div id="6" style="background-image:url(images/thumb_pic6.jpg)"> <a class="fancybox" href="images/pic6.jpg" target="_blank">photo 6</a> </div> <div id="7" style="background-image:url(images/thumb_pic7.jpg)"> <a class="fancybox" href="images/pic7.jpg" target="_blank">photo 7</a> </div> <div id="8" style="background-image:url(images/thumb_pic8.jpg)"> <a class="fancybox" href="images/pic8.jpg" target="_blank">photo 8</a> </div> <div id="9" style="background-image:url(images/thumb_pic9.jpg)"> <a class="fancybox" href="images/pic9.jpg" target="_blank">photo 9</a> </div> <div id="10" style="background-image:url(images/thumb_pic10.jpg)"> <a class="fancybox" href="images/pic10.jpg" target="_blank">photo 10</a> </div> <div id="11" style="background-image:url(images/thumb_pic11.jpg)"> <a class="fancybox" href="images/pic11.jpg" target="_blank">photo 11</a> </div> <div id="12" style="background-image:url(images/thumb_pic12.jpg)"> <a class="fancybox" href="images/pic12.jpg" target="_blank">photo 12</a> </div> </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
body { background:#eee; margin:0; padding:0; } .example { position:relative; background-color:#fff; width:700px; overflow:hidden; border:1px #000 solid; margin:20px auto; padding:20px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } #gallery { height:600px; position:relative; width:100%; } #gallery div,#gallery div a { height:128px; overflow:hidden; width:192px; } #gallery div { background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; border:2px solid #000; left:250px; padding:5px; position:absolute; top:200px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -moz-box-shadow:3px 3px 4px #444; -webkit-box-shadow:3px 3px 4px #444; box-shadow:3px 3px 4px #444; } #gallery div a { display:block; text-indent:-1000px; }
Step 3. JS (jQuery)
Now, its time to understand how we initializing our gallery:
js/main.js
$(document).ready(function(){ // on document ready // onload - randomizing photos $('#gallery div').each(function() { var iRL = Math.floor(Math.random() * 500); var iRT = Math.floor(Math.random() * 350); var iMT = Math.floor(Math.random() * 100 - 50); $(this).animate({ left: iRL, top: iRT, rotate: iMT + 'deg', }, 2000); }); var bPrevClick = false; // preventing clicking will solve problem with fancybox $('#gallery div').draggable({ // making photos draggable containment: 'parent', start: function(e,ui) { bPrevClick = true; }, stop: function(e, ui) { setTimeout(function() { bPrevClick = false; }, 50); } }); $('#gallery div a').bind('click',function(e) { if (bPrevClick) { e.preventDefault(); e.stopImmediatePropagation(); } }); $('#gallery div').mousedown(function(e) { // on mouse down var iMZ = 0; $('#gallery div').each(function() { // searching for max zIndex var z = parseInt($(this).css('zIndex')) iMZ = (z > iMZ) ? z : iMZ; }); $(e.target).closest('#gallery div').css({ // we will UP actice image zIndex: iMZ + 1 }); }); $('a.fancybox').fancybox({ // fancybox initizlization zoomSpeedIn: 500, // zoom IN speed zoomSpeedOut: 500, // zoom OUT speed overlayShow: false // using overlay }); });
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!
Thanks have a nice application
great tutorial, learning CSS3. glad to know this site, my experience on CSS, the better. so I can design a template blogger mine. Much obliged.
Great code! Tks. I have 2 questions maybe you can help me with.
1) How would I modify the code to make the canvas smaller & transparent and without a border and with a background opacity?
2) Would it be possible to have video snippets and when double clicked to display the video player?
Thank you once again.
Hi Alex,
1) You can customize properties of #gallery div element
2) Yes, this is possible, as I remember, Fancybox (plugin) supports video
Great tutorial. Just downloaded the source files, look forward to testing.
Thanks.