Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Loading Images in JavaScript with LightBox Technique

This article discuss about using the Lightbox Javascript in HTML to load images.

Have you always wanted to add those JavaScript lightbox galleries to your website, but have no clue about how to do so? This guide is aimed at guiding you through the step by step process of installing the lightbox script and getting everything working.

What is Lightbox (JavaScript)?

As per the Wikipedia (http://en.wikipedia.org/wiki/Lightbox_(JavaScript)) definition:

Lightbox is a JavaScript technique used to display images and other web content using modal dialogs. Lightbox was originally the name of a specific JavaScript plugin, written by Lokesh Dhakar. However, common usage of the term has evolved to encompass Lightbox-style JavaScript plugins and effects in general.

There are many Javascipt s' for lightbox feature available in market today. In this article I shall demonstrate the use of LightBox JavaScript written by Lokesh Dhakar.

First let’s write an HTML page example.html which would include two images. The contents of the example.html are as below:

Listing 1: Code of example.html page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> LightBox Example - MrBool </title>
  <meta name="Author" content="Manisha Patil">
   </head>

 <body>
  <h1>Sample Images Without Lightbox feature:</h1>
  <div>
  <tr>
	  <td>
		<a href="img1.jpg">
			<img src="img1.jpg" alt="" width="150" height="113" border="0" />
		</a>
	 </td>

	  <td>
		<a href="img2.jpg">
			<img src="img2.jpg" alt="" width="150" height="113" border="0" />
		</a>
	  </td>
  </tr>
  </div>
 </body>
</html> 

Next to apply the lightbox effect to the images, download the Lightbox JavaScript code from the link : https://github.com/lokesh/lightbox2 and select the Download Zip option as shown in the screen below:

Downloading the lightbox gallery

Figure 1: Downloading the lightbox gallery

Now unzip the file in the same directory where your HTML file is placed. Now load jquery-1.10.2.min.js and lightbox-2.6.min.js both of these found under js directory in your HTML page. Load jQuery first:

Listing 2: Loading jQuery File

<script src="lightbox/js/jquery-1.10.2.min.js"></script>
<script src="lightbox/js/lightbox-2.6.min.js"></script>

Now load lightbox.css (found under directory css).

Listing 3: Loading CSS file

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

Our HTML page would be same except that we need to include "rel=lightbox" attribute as shown below:

Listing 4: HTML page after include "rel=lightbox"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> LightBox Example </title>
  <meta name="Author" content="Manisha Patil">
  <script src="lightbox/js/jquery-1.10.2.min.js"></script>
  <script src="lightbox/js/lightbox-2.6.min.js"></script>
  <link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
 </head>

 <body>
  <h1>Sample images with Lightbox feature:</h1>
  <div>
  <tr>
	  <td>
		<a  rel="lightbox"  href="img1.jpg">
			<img rel="lightbox" src="img1.jpg" alt="" width="150" height="113" border="0" />
		</a>
	 </td>

	  <td>
		<a  rel="lightbox"  href="img2.jpg">
			<img src="img2.jpg" alt="" width="150" height="113" border="0" />
		</a>
	  </td>
  </tr>
  </div>
 </body>
</html>

Now open the page and click on any of the images the screen as below would appear:

Showing lightbox effect

Figure 2: Showing lightbox effect

As you can see image overlay on top of the current page.

Now, suppose we have more number of images to be displayed on the screen and we want to navigate from one image to the other using previous and next buttons. In such cases we need to group these images and give them same name as shown below:

Listing 5: Grouping images

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> LightBox Example </title>
 <meta name="Author" content="Manisha Patil">
  <script src="lightbox/js/jquery-1.10.2.min.js"></script>
  <script src="lightbox/js/lightbox-2.6.min.js"></script>
  <link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
 </head>

 <body>
  <h1>Sample images grouped with lightbox feature:</h1>
  <div>
  <tr>
	  <td>
		<a  rel="lightbox[groupedfoto]"  href="img1.jpg">
			<img rel="lightbox" src="img1.jpg" alt="" width="150" height="113" border="0" />
		</a>
	 </td>

	  <td>
		<a  rel="lightbox[groupedfoto]"  href="img2.jpg">
			<img src="img2.jpg" alt="" width="150" height="113" border="0" />
		</a>
	  </td>
	   <td>
		<a  rel="lightbox[groupedfoto]"  href="img3.jpg">
			<img src="img3.jpg" alt="" width="150" height="113" border="0" />
		</a>
	  </td>
  </tr>
  </div>
 </body>
</html>

Now, open the page in your browser. The images can now be navigated using next and previous links as seen below:

Images with navigation(Next)

Figure 3: Images with navigation(Next)

Images with navigation(Previous)

Figure 4: Images with navigation(Previous)

You can also provide a caption to your image as shown below:

Listing 6: Inserting caption into images

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> LightBox Example </title>
 <meta name="Author" content="Manisha Patil">
  <script src="lightbox/js/jquery-1.10.2.min.js"></script>
  <script src="lightbox/js/lightbox-2.6.min.js"></script>
  <link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
 </head>

 <body>
  <h1>Sample images grouped with lightbox feature:</h1>
  <div>
  <tr>
	  <td>
		<a  rel="lightbox[groupedfoto]"  href="img1.jpg" title="My caption for image1">
			<img rel="lightbox" src="img1.jpg" alt="" width="150" height="113" border="0" />
		</a>
	 </td>

	  <td>
		<a  rel="lightbox[groupedfoto]"  href="img2.jpg" title="My caption for image2">
			<img src="img2.jpg" alt="" width="150" height="113" border="0" />
		</a>
	  </td>
	   <td>
		<a  rel="lightbox[groupedfoto]"  href="img3.jpg" title="My caption for image3">
			<img src="img3.jpg" alt="" width="150" height="113" border="0" />
		</a>
	  </td>
  </tr>
  </div>
 </body>
</html>

Now open the HTML in your browser and click on any image the caption would appear as below:

Image with caption

Figure 5: Image with caption

Conclusion

This article discussed about using the Lightbox JavaScript for images. We first downloaded the JavaScript, and then saw how to use this feature in the HTML pages. We also saw how to group the images and navigate between images. Further we can also customize as per your taste by modifying the CSS lightbox.css. That’s all for now.



Web developer and passioned for web design, SEO and front end technologies.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login