imgBox: A tiny lightbox jQuery plugin

imgBox is a tiny lightbox script written as a jQuery plugin. The idea was to create a tiny yet responsive, accessible and stable lightbox script. It doesn't have all the bells and whistles and it's not supposed to, but here is what it does have:

Features

  • Small footprint (minimal code)
  • Images can be displayed singularly or as part of a set
  • Arrow keys can be used to navigate within a set
  • Images can be given captions
  • Pure CSS for the design, JS is only used for the functionality
  • Nothing is broken if JS is disabled
  • Cross browser support (works in all modern browsers and IE8+)
  • Responsive design

Demo

Single images with and without captions:

Rocket City Street light Welder

Images that are part of a set:

Pink flowers Pink and yellow flower Greenery Blue rose Green plant Frog on a leaf

Images that are part of another set on the same page:

Silhouette Silhouette Silhouette Silhouette Silhouette Silhouette

Images that are the only item in their own set with and without captions (If a set only contains one image it isn't given the previous and next buttons, it's treated like a single image):

Sunset Lumberjack Diver Nature

Tutorial

It's dead easy to use, just take a look at this simple example: index.html

<head>
	<link rel="stylesheet" href="imgbox.css"/>
</head>
<body>
	<div id="thediv">
		<!-- This will show "diver.jpg" in the lightbox when you click the link !-->
		<a href="diver1.jpg">Diver 1</a>
		<!-- You could use a thumbnail instead of text !-->
		<a href="diver1.jpg"><img src="diver1-thumbnail.png"/></a>
		<!-- Or add an optional caption !-->
		<a href="diver1.jpg" data-caption="It's a scuba diver!">Diver 1</a>
		<!-- You could put it into a set, but sets with only one item are treated like single images !-->
		<a href="diver1.jpg" data-set="diver1">Diver 1</a>
		<!-- You could put it into a multi item set and use optional captions !-->
		<a href="diver1.jpg" data-set="divers">Diver 1</a>
		<a href="diver2.jpg" data-set="divers" data-caption="It's the second diver!">Diver 2</a>
		<a href="diver3.jpg" data-set="divers"><img src="diver3-thumbnail.png"/></a>
		<!-- You can have multiple sets on the same page, just use a different name !-->
		<a href="swimmer1.jpg" data-set="swimmers" data-caption="It's the first swimmer!"><img src="diver1-thumbnail.png"/></a>
		<a href="swimmer2.jpg" data-set="swimmers"><img src="diver2-thumbnail.png"/></a>
		<a href="swimmer3.jpg" data-set="swimmers" data-caption="It's the third swimmer!"><img src="diver3-thumbnail.png"/></a>
	</div>
	<!-- Include the required scripts just before the closing body tag, preferably in this order !-->
	<script src="jquery.min.js"></script>
	<script src="imgbox.js"></script>
	<script src="your_script.js"></script>
</body>

your_script.js

/* When the DOM is ready */
jQuery(document).ready(function($){
	/* Choose the link element(s) you want to apply the imgBox to */
	$('#thediv a').imgBox();
	/* ...Or you could do something like this: */
	$('[data-toggle=imgbox]').imgBox();
});

Download

Feel free to modify both of these files to suit your needs.

0 comments

Comments (0)

Your comment