The best gallery for jQuery I’ve found so far is the jQuery lightbox plugin. The usage is very easy:
Exact sequence of steps
- Include jQuery
- Include lightbox JavaScript
- Include lightbox CSS
- Write a little function that selects links which should be used by lightbox
- Insert lightbox links which will have the fullsize image as target
- Surround your thumbnail images with those links
Example code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery lightBox plugin</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
jQuery(document).ready(function($)
{
$('a.lightbox').lightBox();
});
</script>
</head>
<body>
<div id="wrapper">
<a href="photos/image1.jpg" class="lightbox">
<img src="photos/thumb_image1.jpg" alt="Thumbnail" />
</a>
<a href="photos/image2.jpg" class="lightbox">
<img src="photos/thumb_image2.jpg" alt="Thumbnail" />
</a>
<a href="photos/image3.jpg" class="lightbox">
<img src="photos/thumb_image3.jpg" alt="Thumbnail" />
</a>
<a href="photos/image4.jpg" class="lightbox">
<img src="photos/thumb_image4.jpg" alt="Thumbnail" />
</a>
<a href="photos/image5.jpg" class="lightbox">
<img src="photos/thumb_image5.jpg" alt="Thumbnail" />
</a>
</div>
</body>
</html> |