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.

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

Jquery http://jquery.com
Slimbox2 http://www.digitalia.be/software/slimbox2

Index.html file

<!--
        index.html
        
        Copyright 2010 Edward <http://ojambo.com/contact>
        
        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
        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
        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"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com Image Jquery Lightbox</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Ojambo.com" />
	<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/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" />
</head>

<body>
	<h1>Ojambo.com 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" />
	</a>		
</body>

</html>

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.

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

Recommended Resources:

Disclosure: Some of the links above are referral (affiliate) links. I may earn a commission if you purchase through them - at no extra cost to you.