jQuery lightbox plugins. How often do you need one? Well, pretty often, if you're doing client work.
jQuery is a powerful tool and using it has become a sine qua non condition of web designing.
It practically transforms a website from dullness to an interactive and catchy piece of work.
For images we have the jQuery lightbox plugin in its many variations. It displays images using modal dialogs and it became very popular because it is very easy to implement.
You have to bookmark this article cause you don't want to forget using one of these plugins in your future designs.
Magnific Popup
Magnific Popup is a responsive jQuery lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js).
You may put any HTML content in each gallery item and mix content types. In this example lazy-loading of images is enabled for the next image based on move direction.
Magnific Popup displays images before they're completely loaded to take full advantage of progressive loading. For in and out transitions CSS3 is used instead of slow JavaScript animation.
Colorbox - a jQuery lightbox
Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+
jQuery lightgallery
lightGallery uses CSS-only approach for resizing images and videos. So it will be extremely flexible, and considerably faster than using the JavaScript approach. Lightgallery comes with a few built in modules, such as thumbnails, full screen, zoom, etc. It is easy to create your own modules, as well as detach modules that you don't want to use.
Lightgallery supports touch and swipe navigation on touchscreen devices, as well as mouse drag for desktops. This allows users to navigate between slides by either swipe or mouse drag. You also have the option to enable animated thumbnails from the settings. otherwise normal thumbnail will be used. You can also make thumbnails automatically load for your YouTube or vimeo videos.
LightGallery video module allow you to create beautiful youtube/vimeo video galleries. It has lots of features such as automatic play/pause videos, thumbnails, posters and more. You can double-click on the image to see its actual size. Zoom-in and zoom-out controls can be used for changing the zoom values of the image. Lightgallery supports native HTML full screen mode as well.
Bootstrap Lightbox
A simple jQuery lightbox plugin based on the bootstrap modal plugin.
Featherlight.js
Featherlight is very, very lightweight. 400 lines of JavaScript, 100 of CSS, less than 6kB combined. Don't be fooled by Featherlight's small footprint! It's smart, responsive, supports images, ajax and iframes out of the box and you can adapt it to your needs.
To get started, simply add the "data-featherlight" with a selector, an image or an ajax-url. It's that simple.
Many lightbox plugins try to handle everything for you. Even the ones called «simple» or «lightweight». Featherlight is different. It's for the pro who knows what he’s doing and just needs a barebones plugin.
Thanks to very low specific css selectors and little code, it's easy to customize and to understand.
baguetteBox.js
Simple and easy to use lightbox script written in pure JavaScript. Its features:
chocolat.js
Chocolat.js enables you to display one or several images staying on the same page. The choice is left to the user to group together a series of pictures as a link, or let them appear as thumbnails.
Chocolat can be opened fullwindow (as many other lightboxes) but it can also be opened in a container (a block element in the page). With recent browser you can also navigate through the images fullscreen.
You can choose either to crop the image or to make it perfectly fit its parent (be it any kind of block) but it’s still quite unclear. Choose to restart at the beginning once you reached the last image. You can navigate through the images using your keyboard and assign keys.
Lightbox 2
The original lightbox script. Eight years later — still going strong! Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.
prettyPhoto
prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.
Slimbox 2
Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. This jQuery lightbox plugin was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.
FaceBox
Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.
It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.
JackBox - Responsive Lightbox (premium)
JackBox was built with 2 goals in mind:
Create a lightbox that worked on mobile devices, even smartphones. JackBox is “responsive”, which means it’s 100% compatible with responsive websites.
Create a lightbox where every image, video and song can be individually shared. This means when someone “likes” one of your photos, when a friend clicks on the shared link, they’ll instantly be shown the exact photo that was originally shared.
If you liked this article with Javascript and jQuery lightbox plugins, you should check out these as well:
Top comments (0)