Image Jquery Lightbox

Apply image effects using Jquery and Lightbox plugin

Lightbox is a Jquery plugin which is used to display images instantly. Both Jquery and Lightbox are Javascript applications. Lightbox is used to display large images in dialog boxes.

Slimbox is a light-weight version of Lightbox. In this tutorial, Slimbox2 will be utilized to display individual images loaded on a web page.

This demonstration will show the enlarged image whenever someone clicks the thumbnail.

    Tools are required:

  • Graphical package to re-size images recommended.
  • Jquery and Slimbox2 plugin.
  • Text editor for creating and modifying the website header html information.
  • Web server.
  • HTML.
  • Knowledge of the images to be served.

Download Jquery and Slimbox2


Index.html file

        Copyright 2010 Edward <>
        This program is free software; you can redistribute it and/or modify
        it under the terms of the GNU General Public License as published by
        the Free Software Foundation; either version 2 of the License, or
        (at your option) any later version.
        This program is distributed in the hope that it will be useful,
        but WITHOUT ANY WARRANTY; without even the implied warranty of
        GNU General Public License for more details.
        You should have received a copy of the GNU General Public License
        along with this program; if not, write to the Free Software
        Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
        MA 02110-1301, USA.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">

	<title> Image Jquery Lightbox</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="" />
	<script type="text/javascript" src=""></script>
	<script type="text/javascript" src="js/slimbox2.js"></script>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

	<h1> Image Jquery Lightbox Demo</h1>
	<a href="Profile/Profile_0011.png" rel="lightbox-profile">
		<img src="Profile/Profile_0011_thumbnail.png" width="80" height="80" border="0" />


How to Use:

Add rel=”lightbox” to all your link tags. If you have an album or category then use lightbox-album, where album is the name of all the categories.

Working Demonstration

Click on the image at the bottom of the post to open up the larger image.


  1. Let Google host the Jquery if you have non-commercial/critical uses.
  2. Resize the thumbnails for faster page loads.

Tags: , , , , , , ,

This entry was posted on Wednesday, August 18th, 2010 at 2:59 am and is filed under Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Image Jquery Lightbox”

  1. Ojambo Image Jquery Lightbox Video 0007 Says:

    June 8th, 2011 at 8:51 am

    […] Video for the image jquery lightbox article. Part One of […]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>