Monday, September 16, 2013

How to create your own lightbox JQuery plugin - part 1

3:01 PM    No comments

Hey guys,

So today we will start reviewing how we can actually create a simple lightbox jquery plugin ourselves. There are quite a few great plugins already available on the market, lots of them are free, but what if they are just not as good as you expect them to be, if they don't suit all your needs?

So what is a lightbox plugin? Well you know when you have a thumbnail image on the website, your click it and a larger version of it appears on the screen?

Something like this, from here by clicking on the image on the page:

To here:

The main problem I faced with existing free plugins on the market is the way they display my full-size image. Majority of them do not compare size of the screen with the size of the image. So in case your browser width is 600px but your image width is 900px then you would end up with ugly horizontal scroll bar.

So problem #1 is identified. Another issue is captions. Many existing plugins have fixed space on the bottom of the image frame to place your caption. But what if I want to display multiple lines, like let's say for photo studio website you would want to show photographer, model, stylist etc. Then many of existing plugins would not handle this situation nicely.

So problem #2 - we want to show caption, calculate its' height and then display image depending on the left available space on the screen.

Okay, let's finalize our development requirements:

  1. enable lightbox functionality for one or multiple images, depending on the selector.
  2. allocate enough screen space to display caption of the image (under the image).
  3. calculate maximum possible image size depending on available browser width/height.
  4. possible to loop through images.

Alright, let's create a new page with a few thumbnail images on it.
Here is our html:
<html>
<head>
    <title>Our LIghtbox Plugin</title>
    <script language="javascript" type="text/javascript" src="jquery-1.9.0.js"></script>
    <script language="javascript" type="text/javascript" src="lightbox.js"></script>
    <script language="javascript" type="text/javascript" src="index.js"></script>
    <link href="lightbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>
        Welcome to our ligtbox plugin demo</h1>
    <h3>
        Here is our image library</h3>
    <div class="content">
    <p>By clicking on any of the images we want to show a full-size image.</p>
        <a href="IMG_0191.jpg">
            <img src="tn_IMG_0191.jpg" border="0" /></a> <a href="IMG_1162.jpg">
                <img src="tn_IMG_1162.jpg" border="0" /></a> <a href="IMG_2875.jpg">
                    <img src="tn_IMG_2875.jpg" border="0" /></a>
    </div>
</body>
</html>
I also created two javascript files: lightbox.js (it would have our plugin functionality) and index.js (this one would contain our page functionality).
There is also lightbox.css, we would have all styles for our plugin there.

Next step: let's do simple implementation of our lightbox control. Open lightbox.js file and here we go:
(function ($) {
    $.fn.lightbox = function (options) {
        options = $.extend({}, $.fn.lightbox.defaultOptions, options);
    };

    $.fn.lightbox.defaultOptions = {
        topmargin: 30,
        bottommargin: 10,
        border: 8
    };
})(jQuery);
So this is the definition of our plugin. The bottom bit is the default options, we specified topmargin (distance from the frame to the top edge of the browser, bottommargin (space between bottom border of the caption block and browser bottom edge), and border (border of the frame for the image).
This is more or less how we want it to look:

To implement this we need a few controls:

  1. semi transparent background
  2. image container
  3. "close" hyperlink
  4. "<<" and ">>" hyperlinks
  5. image control
  6. caption control

So let's add our plugin implementation to add background and image and caption controls to the page when image is clicked:
(function ($) {
    $.fn.lightbox = function (options) {
        options = $.extend({}, $.fn.lightbox.defaultOptions, options);
        var idPrefix = (this.attr('id') == null ? '' : this.attr('id'));
        // add background
        $('body').append('<div id="' + idPrefix + '_lightboxbg" class="lb_bg"></div>');
        // add image container
        $('body').append('<div id="' + idPrefix + '_lightboximg" class="lb_imgholder"></div>');
        // hide all controls by default
        $('#' + idPrefix + '_lightboxbg').hide();
        $('#' + idPrefix + '_lightboximg').hide();
        // add event handler when user clicks on the background to close lightbox.
        $('#' + idPrefix + '_lightboxbg').click(function () {
            CloseLightBox();
        });
        // declare array of images
        var images = [];
        // declare array of descriptions
        var descriptions = [];
        // initialize counter
        var i = 0;
        // loop through all selected objects
        this.each(function () {
            // add new image array item
            images.push(i);
            images[i] = $(this).attr('href');
            // add new description array item
            descriptions.push(i);
            descriptions[i] = $(this).attr('desc');
            // set index attribute to each object
            $(this).attr('index', i);
            i++;
            // add event handler to each hyperlink object
            $(this).click(function (e) {
                // prevent default hyperlink functionality
                e.preventDefault();
                // get clicked hyperlink index
                var imgIndex = $(this).attr('index');
                // call OpenImage function to display image and caption
                OpenImage(imgIndex, options['topmargin'], options['bottommargin'], options['border']);
            });
            function OpenImage(imgIndex, topmargin, bottommargin, border) {
                // TODO: implementation here
            }
        });
        function CloseLightBox() {
            $('#' + idPrefix + '_lightboximg').empty();
            $('#' + idPrefix + '_lightboximg').hide();
            $('#' + idPrefix + '_lightboxbg').fadeOut(300);
        }
    };

    $.fn.lightbox.defaultOptions = {
        topmargin: 30,
        bottommargin: 10,
        border: 8
    };
})(jQuery);
Now let's add a few styles:
.lb_bg
{
    background: rgb(0, 0, 0);
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 7000;
}
.lb_imgholder
{
    padding: 0px;
    left: 50%;
    display: block;
    position: fixed;
    z-index: 7001;
    background-color: rgb(0, 0, 0);
}
Okay, I think that's enough for one day, let's take a break for now and continue tomorrow with all the fun bits! :-)
Take care,
Your GPTeam

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)