Nice CSS3 Lightbox Gallery With jQuery

Nice CSS3 Lightbox Gallery With jQuery

5 57670
Nice CSS3 Lightbox Gallery With jQuery

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!

SIMILAR ARTICLES


5 COMMENTS

  1. 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.

  2. 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

Leave a Reply