Responsive lightbox

Here is an example of a responsive lightbox, called Swipebox. This plugin is simple, easy to implement and looks good on mobile devices.

Swipebox

Screenshot of large image with Swipebox

>> Download the files used in this lightbox
>> The Swipebox web site for info and documentation


Responsive lightbox - Swipebox
Click on a thumbnail to reveal a larger version. The larger image is responsive to available space. This makes it suitable for use on mobile and desktop devices. An extra feature is that swipe is activated for touch sensitive devices.

The JS and CSS files for the Swipebox can be obtained from the link at the top of the page.

Links to the following need to be included in the document:
<link rel="stylesheet" href="source/swipebox.css">
<script src="lib/jquery-1.9.0.min.js"></script>
<script src="source/jquery.swipebox.min.js"></script>

Notice that the files are in directories called 'source' and 'lib'. Maintain this file organization for the lightbox to work.

File structure

file structure

The larger image is linked to from the thumbnail. An attribute of class="swipebox" is included in the link which is referenced in the script before </body> (see below). This enables the Swipebox behaviour. The title attribute in the link provides a caption for the image:
<a href="img/Raj_Horse_lge.jpg" class="swipebox" title="The Raj">
<img src="img/Raj_Horse_sm.jpg">
</a>

Finally. to initialise the swipebox JS this script needs to be added before the closing </body> tag:
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>