Image Jquery Lightbox

On 3 minutes, 1 second read By Edward

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

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.

    Recommendations:

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