Get new jQuery plugins just once a week
February 5, 2014
Image Lightbox | Responsive and Touch-friendly
Image-Lightbox is a jQuery plugin that creates responsive and Touch-friendly modal boxes that can be used on mobiles.
It has got the following features :-
- Ascetic. No captions, navigation buttons or background cover by default. Nothing that would distract user from the main purpose. That’s why I enjoy pointing out Jony Ive’s observation: “An indicator has a value when it’s indicating something, but if it’s not indicating something, it shouldn’t be there”. I think it is the most common thing that designers forget to solve.
- Minimalistic. No bunch of default raster image files that fail on higher resolution screens. Just one source file which is only 4kb in size when minified.
No messy markup. Just one simple element –
- Responsive and touch-friendly. The most trending topics in web design and they are here. Images fit to any screen size and are swipe-able (native behavior) on touch capable devices.
- iOS, Android and Windows Phone compatible. As well as desktop versions of Safari, Chrome, Firefox, Opera and Internet Explorer.
- jQuery 1.x and 2.x compatible. Quite clear, isn’t it?
- Preloads next image. While user is viewing the current picture, the plugin silently preloads the next picture which shows up without any delay when respective action is triggered.
- Uses CSS transform and transition for moving images. Turns out CSS’s
transform performs better than
left (as well as
bottom). But the plugin falls back on
left if a browser does not support transform.
- Interacts with keyboard. Standard, but essential Arrow Left, Arrow Right to switch images and Esc to quit the lightbox.
Example Code and options :-
$( selector ).imageLightbox(
selector: 'id="imagelightbox"', // string;
allowedTypes: 'png|jpg|jpeg|gif', // string;
animationSpeed: 250, // integer;
preloadNext: true, // bool; silently preload the next image
enableKeyboard: true, // bool; enable keyboard shortcuts (arrows Left/Right and Esc)
quitOnEnd: false, // bool; quit after viewing the last image
quitOnImgClick: false, // bool; quit when the viewed image is clicked
quitOnDocClick: true, // bool; quit when anything but the viewed image is clicked
onStart: false, // function/bool; calls function when the lightbox starts
onEnd: false, // function/bool; calls function when the lightbox quits
onLoadStart: false, // function/bool; calls function when the image load begins
onLoadEnd: false // function/bool; calls function when the image finishes loading
Created by Osvaldis Valutis
simple image lightbox
Sign up for our weekly newsletter.