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">
Notice that the files are in directories called 'source' and 'lib'. Maintain this file organization for the lightbox to work.
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">
Finally. to initialise the swipebox JS this script needs to be added before the closing