Learn How to Create a jQuery Lightbox From Scratch

Learn How to Create a jQuery Lightbox From Scratch

Pictures or Images are an integral part of any website, without them a website looks very ordinary. As a result, it fails to grab the users’ attention, which eventually results in high bounce rate and low rankings on search engines. Similarly, the overuse of images may slow down the page loading speed, which may also become an obstacle to attain high rankings and get quality visitors. Therefore, the images or pictures should always be used in proportion with the content, and should also relate to your products or services or the topic you write about (in case of blogging).

In addition to this, on many websites you would have noticed that the webmasters use a Lightbox to showcase their images which could be related to the projects or clients they have worked with or of their own product or service related portfolio, etc.

Foundations-of-Front-End-Development-Course

And today, in this blog post, we are going to tell you a simplest way to develop your own Lightbox to showcase your own image gallery comprising of some or many pictures or images. In this process, we will be using the HTML5 and CSS3 along with jQuery. However, we will keep the HTML5 to as minimal extent as possible, and attain the results with the CSS and jQuery.

So let’s start our journey, and create a simple jQuery based Lightbox.

The HTML

<code class="language-php">jQuery Lightbox
	<link href="css/style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/jquery-1.10.2.js"></script><script type="text/javascript" src="js/jquery-lightbox.js"></script>
</code>

A jQuery Lightbox Tutorial

This is our jQuery lightbox demo. Click on the images one by one to check the lightbox effect.

 

 

 

 

 

 

Link all your CSS and jQuery Files

<code class="language-php">jQuery Lightbox
	<link href="css/style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/jquery-1.10.2.js"></script><script type="text/javascript" src="js/jquery-lightbox.js"></script></code>

At first, create a new HTML5 file using any good text editor like Adobe Dreamweaver, and name it anything you want to. Along with that, create a new CSS file and name it as ‘style.css’, and also create a JavaScript file and name it as ‘jquery-lightbox.js’. In addition to this, download the latest jQuery, and save it in your site folder (where you have kept all these files). Once you are done with it, write the doctype in the HTML file, and in the <title> tag, write the title or the HTML Document, and using the <link> and <script> tag link the style.css and both jQuery files.

<code class="language-php">

</code>

A jQuery Lightbox Tutorial

This is our jQuery lightbox demo. Click on the images one by one to check the lightbox effect.

Now inside the <body> tag, create a <div> or division tag, and give it an id of ‘wrapper’. This would be our only <div> or division tag, as we want to keep our HTML code to the minimum. Now make an <h1> or Heading tag and give some heading to the HTML document that we are creating now, like we did. Then create a new <p> or paragraph and place some text if you want. Creating this tag isn’t necessary; if you want you can easily skip this one and move to the next step.

 

 

 

 

 

After making the paragraph tag and placing your text inside it, create an unordered list by using the <ul> tag, and inside that create three new <li> tags and place an image out of the 3 images that we have with us (you can replace the images with your own images), in each of them. Apart from that, also link all the three images using the <a> or anchor tag and link them to respective image location. Once it’s done, close the <ul>, <div>, <body> and <html> tag, all one by one and in the same sequence. Here, you might have noticed, that we didn’t do anything extra ordinary here, it just very simple HTML, and still we need to write our code for the Lightbox, which we will do inside the jQuery file. So for now let’s move on to the CSS part.

The CSS

<code class="language-php">
body {
background:#efefef;
margin:0;
padding:0;
}

#wrapper {
width:650px;
height:350px;
background:#fff;
text-align:left;
border:1px solid #ccc;
border-top:none;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px 10px 10px 10px;
box-shadow:5px 5px 5px #ccc;
-moz-box-shadow:5px 5px 5px #ccc;
-webkit-box-shadow:5px 5px 5px #ccc;
margin:80px auto;
padding:25px;
}

h1 {
font-family:Tahoma, Geneva, sans-serif;
font-size:32px;
color:#F63;
text-align:center;
text-decoration:underline;
}

p {
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:15px;
}

li {
float:left;
list-style:none;
margin-right:15px;
margin-top:30px;
}

li a {
float:left;
width:185px;
border:1px solid #666;
padding:10px 0;
}

li a img {
vertical-align:top;
}

li img {
width:165px;
height:130px;
}

#thelightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(../image/overlay.png) repeat;
text-align:center;
}

#thelightbox p {
text-align:right;
color:#fff;
margin-right:20px;
font-size:12px;
}

#thelightbox img {
box-shadow:0 0 25px #111;
-webkit-box-shadow:0 0 25px #111;
-moz-box-shadow:0 0 25px #111;
max-width:940px;
}
</code>

Stylize the Body, Div, Heading, Paragraph and List tags

<code class="language-php">
body {
background-color:#efefef;
margin:0;
padding:0;
}
</code>

Inside the CSS or style.css file, stylize the body first. Give it a nice background color of your choice, and set the margin and padding to 0 pixels. This will be our default style for the entire web page.

<code class="language-php">
#wrapper {
width:650px;
height:350px;
background-color:#ffffff;
border:1px solid #cccccc;
border-top:none;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px 10px 10px 10px;
box-shadow:5px 5px 5px #ccc;
-moz-box-shadow:5px 5px 5px #ccc;
-webkit-box-shadow:5px 5px 5px #ccc;
margin:80px auto;
padding:25px;
}
</code>

Now comes the turn to stylize our div tag, which is denoted by its id of wrapper. Set its width to 650px, and height to 350px. You can increase or reduce the width and height depending upon your preferences. Then set its background color to white using its hex code i.e., #ffffff. Now give it a 1 pixel border of light grey color using its hex code i.e., #cccccc. This will create the border all around the div, however, we don’t need the border at the top, so using border-top, remove the border from the top by setting it to none. And to make the corners go round, use the border-radius property, and set it to 10px from all four sides. To ensure that this also work in Firefox, Chrome and Safari, use their respective vendor prefixes. To make border-radius work in Internet Explorer, use the CSS3 PIE.

Similarly, add the shadow to the box that we have created now, by using the box-shadow property and don’t forget to add the vendor prefixes for major web browsers. After all this, set the margin to 80px auto, this will bring our box 80 pixels down from the top of the browser, and ‘auto’ will keep the box in the center of the webpage, other than that, keep the padding to 25px.

<code class="language-php">
h1 {
font-family:Tahoma, Geneva, sans-serif;
font-size:32px;
color:#F63;
text-align:center;
text-decoration:underline;
}

p {
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:15px;
}
</code>

Now set the font-family, font-size, color, of the H1 tag, and to keep it to the center, use text-align property, and for underlining it, use the text-decoration property. Similarly, for the paragraph tag, bring its text to the center using the text-align property, and set its font-family and font-size according to your preferences.

<code class="language-php">
li {
float:left;
list-style:none;
margin-right:15px;
margin-top:30px;
}

li a {
float:left;
width:185px;
text-align:center;
border:1px solid #666;
padding:10px 0;
}

li a img {
vertical-align:top;
}

li img {
width:165px;
height:130px;
}
</code>

Now we need to position our list tags. So, start by making them float to the left, and to remove the bullets, set the list-style to none, and keep the margin from the right and top to 15px and 30px respectively. Then we need to position and style our anchor tags placed inside the list tags, so make them also to float to the left. Then set their width to 185 pixels, and also make a 1 pixel solid border, and give it a color of your choice and for padding, keep it to 10 pixels from the top and bottom, and 0 pixels from right and left.

Now to restrict the image from taking the 5 pixel default margin, align it vertically from the top. After that, define the width and height of the images to 165px and 130px respectively. This will bring down the size of our images and keep them inside our list container.

<code class="language-php">
#thelightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(../image/overlay.png) repeat;
text-align:center;
}

#thelightbox p {
text-align:right;
color:#fff;
margin-right:20px;
font-size:12px;
}

#thelightbox img { 
margin-top: 80px;
box-shadow:0 0 25px #111;
-webkit-box-shadow:0 0 25px #111;
-moz-box-shadow:0 0 25px #111;
max-width:940px;
}
</code>

Now define a new id of thelightbox inside the CSS file, and set its position to fixed, and set its top and left edge to 0, for width and height, keep them to 100%. And for background, use the overlay image, and set it to repeat. This will cover the entire area all around the image that will popup once you click on the images placed inside the list tag. And to keep them in center, we have used the text-align property.

Next, we have to define a paragraph tag that will come inside the div with an id of lightbox within the jQuery comprising a short little text that will come up on the screen along with the image whenever you’ll click any of the images placed inside the <li> tag. So first of all, align the text to the right, and give it a color, set its margin from the right to 20 pixels, and keep the font-size to 12 pixels.

Now for the lightbox image, set the margin from the top to 80 pixels, this will bring down the popup images to the midway of the web browser (depending upon the image size). If you would like to add some additional effect to the popup images, add the box-shadow, 0 pixels from the horizontal and vertical axis, and add a 25 pixel blur to it of any color that you would like, here we have used the color hex code of #111. In addition to this, also define the max-width of the light box image to 940-960px to keep the image size within the webpage with, which we generally keep up to 960 pixels.

The jQuery

<code class="language-php">
jQuery(document).ready(function($) {	
    $('.lightbox_trig').click(function(e) {
        e.preventDefault();
        var image_href = $(this).attr("href");
        if ($('#thelightbox').length &gt; 0) { 
            $('#content').html('<img alt="" src="' + image_href + '" />');
            $('#thelightbox').show();
        }
        else { 
            var lightbox =
            '
</code>
‘ + ‘Click to Close

‘ + ‘

‘ + ‘‘ + ‘

‘ + ‘

‘; $(‘body’).append(lightbox); } }); $(‘#thelightbox’).live(‘click’, function() { $(‘#thelightbox’).hide(); }); });

Make the jQuery DOM Ready

<code class="language-php">
jQuery(document).ready(function($) {	
    $('.lightbox_trig').click(function(e) {
        e.preventDefault();
        var image_href = $(this).attr("href");
</code>

Whenever you start working on jQuery, you must ensure that its code is DOM ready, or else, your webpage functionality will not work in a flow. After that, define a lightbox_trig class, and create a function using the .click event handler and set it to e.preventDefault. This will restrict the browser to execute the default action (in this case it restricts the browser to follow the image links).

After this, create a new variable named as image_href, and set its attribute to only href.

Create and if or else statement

<code class="language-php">
if ($('#thelightbox').length &gt; 0) { 
            $('#content').html('<img alt="" src="' + image_href + '" />');
            $('#thelightbox').show();
        }
        else { 
            var lightbox =
            '
</code>
‘ + ‘Click to Close

‘ + ‘

‘ + ‘‘ + ‘

‘ + ‘

‘; $(‘body’).append(lightbox); } });

Now we need to create if or else statement to execute the functionality of the lightbox. At first, define the ‘if’ statement where you need to set the id of thelightbox and set its length to greater than 0, and inside it, define another id of content to place the html. In this case we only have the images to execute, so by using the img tag, place the image_href variable that we created above. Then set the .show event handler to the id of lightbox.

<code class="language-php">
$('#thelightbox').live('click', function() {
        $('#thelightbox').hide();
    });
});
</code>

Inside the ‘else’ statement, set a variable named as lightbox, and keep its value equals to the div tag comprising the id of lightbox, a paragraph tag comprising a short little text i.e., ‘Click to close’, another div tag comprising the id of content, and the img tag, and close both the div tags, and set the function for body to append the lightbox.

Once you are done with the ‘if’ and ‘else’ statement is done, create another click function using the .live event handler for the div id of thelightbox, and set it to .hide.

So here’s our jQuery Lightbox tutorial is complete, and you are free to use the code to make and edit your own lightbox. But don’t forget to share your feedback with us via the comment section provided below.

Posted in CSS, HTML, jQuery
Don't Miss Out On Deals Or Updates!
Be the first to find out what Designrfix has to offer. Signup to our newsletter for all the latest Top Designer Resources, Tech Products and Giveaways.

Written by Ajeet

Ajeet is a professional web programmer, and He is passionate about writing on web design and development. He is associated with SeoSemanticXHTML, a leading company that provides high quality Photoshop to HTML Conversion, and like to keep myself updated on the latest trends. You can also follow me on twitter
  • Very effective post for web designers.thanks for the sharing.

  • Steven

    That’s a nice tutorial, Way to Go! Thank you for sharing :)
    If i am allowed to add a modal window builder i would add Likno Web Modal Windows Builder for those that don’t feel comfortable on coding…otherwise following that tutorial would be nice.