Responsive lightbox gallery. The best lightbox plugins for WordPress

The most popular library is Lightbox Javascript, which we have been using for many years on desktops, but not on mobile platforms.

Here are 14 Lightbox plugins with support for mobile platforms.

PhotoSwipe

PhotoSwipe - Lightweight, touch-enabled, and most importantly a modular plugin that allows you to remove unnecessary parts that are not needed. It works well in mobile browsers. You can change images with a swipe of your finger as if it were a standard app, with smooth transitions.

Required libraries: no.
Browser support: IE8 +, Chrome, Firefox, Safari, Opera, and other mobile browsers.
License: MIT License

Magnific popup

Magnific Popup is another lightbox plugin developed by the same author as PhotoSwipe, Dmitry Semenov. The plugin comes as a jQuery / Zepto plugin and also includes support that PhotoSwipe lacks, such as video, map and Ajax support. This is a great alternative for those who prefer to have more options at hand.

Required libraries: JQuery 1.9.1+ or Zepto.js
Browser support: IE7 (partially),.
License: MIT License

SwipeBox

Swipebox jQuery plugin with touch gesture support for mobile platforms. It also supports Youtube and Vimeo videos besides images. Swipebox is easy to install and has several options to tweak its configuration. I think Swipebox is too cluttered lightbox plugin for those who don't know JavaScript.

Lightbox for Bootstrap

Initially, the Lightbox plugin is missing from Bootstrap. Lightbox for Bootstrap fixes this. If you are using Bootstrap it is highly recommended to use this library. The plugin integrates well with Bootstrap.

Required libraries: JQuery and Bootstrap module
Browser support: IE8 +, Chrome, Firefox, Safari, and Opera
License: GNU license

Nivo lightbox

Nivo Lightbox is a highly customizable lightbox plugin. Various options allow you to change appearance... For example: theme, animation of appearance, and type of navigation.

Required libraries: JQuery
Browser support:
License: MIT License

ImageLightbox

ImageLightbox is a simple lightbox plugin with no bells and whistles. It is only used for the image, hence the name. Neither video nor other types are supported. It also doesn't require additional HTML markup; tag is sufficient. This plugin is easy to use.

Required libraries: JQuery
Browser support: IE9 +, Chrome, Firefox, Safari, and Opera
License: Unspecified

Mini Lightbox

Another lightbox plugin without add-ons. The library weighs only 2 kilobytes and only works with images. This is the perfect plugin if you are only developing for latest version browser and no need to support video or other formats.

Required libraries: No
Browser support: Internet Explorer 10+, Chrome, Firefox, Safari, and Opera
License: MIT License

LightCase

Lightcase is an excellent lightbox plugin. Supports several kinds of animations such as fade, elastic, zoom and scrolling. Besides, it also supports various kinds of media including Youtube Embed, HTML video, SWF and input forms.

Required libraries: JQuery
Browser support: IE9 +, Chrome, Firefox, Safari, and Opera
License: GPL licenses

Featherlight

Featherlight is a basic plugin, weighing 6 kilobytes for knowledgeable developers and includes only the essentials. If you need a lightbox effect, for example for a group of images in a gallery, you can enable the gallery extension. You can also develop your own plugin extension to use in your projects.

Required libraries: JQuery
Browser support: IE8 +, Chrome, Firefox, Safari, and Opera
License: MIT License

LightLayer

LightLayer is an easy to use lightbox plugin. The plugin supports many options, custom JavaScript methods and custom events. The plugin works with images, videos, maps.

Required libraries: JQuery
Browser support: IE9 +, Chrome, Firefox, Safari, and Opera
License: MIT License

LightGallery

LightGallery, another lightbox plugin with big amount functions. It includes over 20 options for customizing various details of lightbox effects.

Required libraries: JQuery
Browser support: IE7 +, Chrome, Firefox, Safari, Opera, IOS, Android, and Windows Phone
License: MIT License

FluidBox

Fluidbox lightbox plugin works with images. Includes support for a variety of displays, including floating images, images at absolute position, images with borders and padding, and galleries. There is also a WordPress plugin.

Required libraries: JQuery
Browser support: IE9 +, Chrome, Firefox, Safari, Opera
License: MIT License

StripJS

StripJS is a unique lightbox plugin. Instead of overlaying an image, the lightbox module slides along with the image from side to side so that the image does not block all of the content. StripJS supports both images and videos.

Required libraries: JQuery
Browser support: IE7 +, Chrome, Firefox, Safari, Opera, IOS 5+, and Android 3+
License: Creative Commons BY-NC-ND 3.0 License

I reviewed various image galleries many times, collected an extensive collection of spectacular slideshows and plugins. There is also Lighbox in the piggy bank exclusively on CSS3, without connecting additional js-libraries. But time does not stand still, users are increasingly using various mobile devices to surf the Internet, which means that the adaptability of web elements and, in particular, photo galleries with the "" effect is becoming one of the priorities that web designers and developers should pay attention to.

Here is another collection of 15 responsive jQuery plugins that are friendly both with desktop browsers and fit perfectly into the screens of various mobile devices (laptops, smartphones, tablets, etc.).

Watch the demo on the developers' sites, download the plugin you like and create, create, create ...

1.iLightbox

iLighbox Is a lightweight jQuery lightbox plugin with support for a wide range of different file types: images, videos, Flash / SWF, Ajax content, frames, and embedded maps. This plugin also adds social media buttons, allowing users to share content via Facebook, Twitter, or Reddit. Great opportunity to organize spectacular slideshows, galleries of images and videos, with viewing in normal and full screen modes.

iLighbox works pretty fast and when viewed on mobile devices, more than correctly displays the processed content. Among other things, using this plugin, you can easily implement the display of information blocks as a modal window.

Addiction: jQuery
Browser support: IE7 +, Chrome, Firefox, Safari and Opera
License: And the devil only knows)))

2. SwipeBox

Swipebox Is a jQuery plugin with support touch screens mobile platforms. In addition to images, the plugin supports embedded videos from Youtube and Vimeo. Swipebox is very easy to attach to any project, the plugin has several intuitive options for customizing its functionality and behavior. On the developer's website, there is detailed documentation on connecting and using the plugin, without unnecessary water, everything is just the case, so I think it will not be difficult to figure out what, where, and why.

Addiction: jQuery
Browser support: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android and Windows Phone
License: Not determined, maybe you will be lucky)))

3. MagnificPopup

A well-known and well-proven lightbox plugin based on jQuery or Zepto.js. The author of the plugin is Dmitry Semenov, who is the developer of the PhotoSwipe plugin, which I will talk about below. Supplied as a jQuery / Zepto plugin, it has more advanced features that PhotoSwipe lacks, such as video support, displaying maps and Ajax content, and implementing modal windows with inline forms. By all criteria, this is another great tool in the web developer's cage. Separately, there is a plugin for WordPress and detailed documentation on setup and use. The only depressing thing is the lack of documentation in Russian, judging by the name and surname, the author seems to be Russian, never understood because of the harmfulness of this, or because of the imaginary awareness of his cleverness, but blah. Well, okay, who needs to figure it out, we, too, are not soft-boiled tea))).

Addiction: jQuery 1.9.1+, or Zepto.js
Browser support: IE7 (partially), IE8 +, Chrome, Firefox, Safari and Opera
License: MIT license

4. PhotoSwipe

Addiction: Javascript or jQuery
Browser support
License: MIT license

11. FeatherLight

6 bit lightbox plugin for more or less savvy developers, equipped with all the most necessary functions. In addition to supporting all common content types (text, images, iframe, Ajax), there is the possibility of connecting an additional one, and you can also develop your own extension for this plugin, which will fully meet your needs when creating a new project. How all this economy (development of the extension) works, I did not really delve into it, but those whom this plugin will insert, I think they will figure it out))).

Addiction: jQuery
Browser support: IE8 +, Chrome, Firefox, Safari and Opera
License: MIT license

12. LightGallery

LightGallery- multifunctional lightbox plugin with many additional opportunities... Comes with over 20 options to customize the smallest details of the Lightbox. There is everything, well, or almost everything)). A complete image gallery with neatly arranged thumbnails, navigation controls and thumbnail scrolling. Simple html markup as an unordered list

LightGallery

Addiction: jQuery
Browser support: IE7 +, Chrome, Firefox, Safari, Opera, iOS, Android and Windows Phone
License: MIT license

13. StripJS

Unusual, I would even say: an unusual implementation of a lightbox, more precisely, a not quite familiar presentation of content, when an image or video, in the design of a lightbox, appears on the right, filling not the entire screen, but only on preset size full-size picture or video. On large screens, this approach is understandable, there remains the possibility of interacting with the page. On small screens of mobile devices, this entire innovative design seamlessly transitions into a classic lightbox. The idea is interesting, watch the demo, maybe someone like this will insert.

Addiction: jQuery
Browser support: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ and Android 3+
License: Creative Commons BY-NC-ND 3.0 license

14. LightLayer

An easy-to-use lightbox plugin that goes well with any project and looks good on any screen as well. The LightLayer plugin provides control over many settings, such as changing the background color and the degree of its transparency, the position of the base block, the choice of transition effects when opening / closing, functions that users can manipulate on their own. The plugin works great with external website content, embedded video players and maps.

Addiction: jQuery
Browser support: IE9 +, Chrome, Firefox, Safari and Opera
License: MIT license

15. FluidBox

Fluidbox is a lightbox plugin exclusively for images. The number of possible variations in the presentation of images is truly impressive. The plugin works great with images in various designs, including floating images, images with absolute positioning, pictures and photos that are framed and indented, with single images, and combined into a gallery. In general, it’s in vain to pour water, it will still not work to describe all the possibilities of the plugin in a short presentation, so you’d better watch the demo, twist, twist and I think many will like this plugin.

Addiction: jQuery
Browser support: IE9 +, Chrome, Firefox, Safari, Opera
License: MIT license

That's probably all! I hope this short overview will help you understand the heap of web development products on offer. I want to note that I have not used all of the plugins presented in the collection on working projects, I probed most of them on test sites or on a varnish, so if any questions arise, we will most likely solve them together, but together, as always we will succeed.

Are you looking for a suitable Russian template for your purposes? In this case, you should probably visit the TemplateMonster marketplace. For the simple reason that recently a new section of templates has appeared on the site. Now each user can get acquainted with the collection, which will be updated and updated. The texts for the templates were written by hand. But this is not the only plus of these ready-made solutions. Indeed, in their packages you can find everything that will facilitate the work on the development of an online project, including a visual editor.

With all respect, Andrew

Two individual images

Four image set

Getting started

Download a zip of the latest release (or any previous one) from the Github Releases page.

Or install using npm:

Npm install lightbox2 --save

Open up the zip file and take a peek at the barebones, working example that is included in the / examples folder.

Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the / dist folder.
- Include the CSS at the top of your page in your tag:
- Include the Javascript at the bottom of your page before the closing tag:
Make sure jQuery, which is required by Lightbox, is also loaded.
- If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
- If you are not currently using jQuery, I "ve created a packaged file that includes both Lightbox and jQuery. Include dist / js / lightbox-plus-jquery.js instead of lightbox.js.
Confirm that the four images loaded by lightbox.css are in the correct location. You can grab the images from the / dist / images folder.

Initialize with HTML

Single images. Add a data-lightbox attribute to any image link to enable Lightbox. For the value of the attribute, use a unique name for each image. For example: Optional:
- Add a data-title attribute if you want to show a caption.
- Add a data-alt attribute if you want to set the alt attribute of the linked image.
Image sets. If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:

Options

If you want to change any of the default options, call the option method.

Option	Default	Description
alwaysShowNavOnTouchDevices	false	If true, the left and right navigation arrows which appear on mouse hover when viewing image sets will always be visible on devices which support touch.
albumLabel	"Image% 1 of% 2"	The text displayed below the caption when viewing an image set. The default text shows the current image number and the total number of images in the set.
disableScrolling	false	If true, prevent the page from scrolling while Lightbox is open. This works by settings overflow hidden on the body.
fadeDuration	600	The time it takes for the Lightbox container and overlay to fade in and out, in milliseconds.
fitImagesInViewport	true	If true, resize images that would extend outside of the viewport so they fit neatly inside of it. This saves the user from having to scroll to see the entire image.
imageFadeDuration	600	The time it takes for the image to fade in once loaded, in milliseconds.
maxWidth		If set, the image width will be limited to this number, in pixels. Aspect ratio will not be maintained.
maxHeight		If set, the image height will be limited to this number, in pixels. Aspect ratio will not be maintained.
positionFromTop	50	The distance from top of viewport that the Lightbox container will appear, in pixels.
resizeDuration	700	The time it takes for the Lightbox container to animate its width and height when transition between different size images, in milliseconds.
showImageNumberLabel	true	If false, the text indicating the current image number and the total number of images in set (Ex. "Image 2 of 4") will be hidden.
wrapAround	false	If true, when a user reaches the last image in a set, the right navigation arrow will appear and they will be to continue moving forward which will take them back to the first image in the set.

Browser support

Lightbox2 has been tested successfully in the following browsers:

Internet Explorer.
The lightbox-plus-jquery.js file includes jQuery v2.x and supports IE 9+. If you want to support IE 6, 7, and 8, use your own copy of jQuery v1.x with lightbox.js.
Chrome
Safari
Firefox
iOS Safari
iOS Chrome
Android Browser
Android Chrome

License

100% Free. Lightbox is free to use in both commercial and non-commercial work.
Attribution is required. This means you must leave my name, my homepage link, and the license info intact. None of these items have to be user-facing and can remain within the code.

Help

Have a question about how to use Lightbox?

Follow the steps below to get help. Make sure you have read the documentation on this page and looked at the included example first.

Search Stackoverflow to see if other people have run into the same issue you are having.
If your issue is unique, then post a new question on Stackoverflow. Use the lightbox2 tag.

Do not use Github Issues to report personal support requests.

Found a bug?

If you find a bug, follow the instructions in the Contribution Guildelines to report the issue.

The script organizes the viewing of images in a pop-up window. Viewing can be organized either by one image, or by a gallery, scrolling through the pictures in a pop-up window.
The easiest and fastest script to install. It is installed and configured in just a few minutes.

How to install lightbox

html code

And the last step. Displaying images.
You do the output of images like this

The standard code for displaying a small image and a link to a large image, only two parameters are added to the link.
Here is an example of this code - when you click on a picture, a large image pops up.

The parameter is responsible for this effect data-lightbox = "image".
If you have a lot of images on the page, you can open images without swiping in the pop-up window, or you can combine images and they will scroll in the pop-up window.
To combine images, you need to use one name for each group of images.

As you can see, you can scroll through all the pictures in the pop-up window, since data-lightbox all have the same.
If you want to split pictures so that they do not scroll, use a similar code

Now each picture is opened separately, that is, there is no way to scroll to the next.

What's in the upgraded version

original version

And the second addition that few people need is the exclusion of duplicate pictures.
Disabled by default, you can enable it directly in the script, in the same place where the real-size button is enabled.
In the usual use of the script this function brings only harm, it can be used only in completely desperate situations.

Note that three links are empty, meaning they link to large images, but there is nothing between the tags, and one link is filled with an image.
As a result, only one picture is visible in the browser, when you click on it, a large picture opens and all pictures from the unfilled links are pulled up and you can scroll.
And look here, there are two links in the links. identical pictures(highlighted in red) and when you scroll through, you will see two identical pictures.
If you enable the removal of duplicates in a specific example, then there will be no duplicate images.

Of course, such a situation should not exist, why display two identical pictures and then delete them. But oddly enough, I faced such a situation, in one online store, duplicate photos should have been displayed for the product (there were tricky photo substitutions through scripts), and when viewed through a lightbox, duplicate photos looked very wrong. This is where the removal of duplicates came in handy.

Comments (1)

11.12.2014 Victor
The script is very good. You can even describe a picture using data-title. But I had a problem, I had a script on the page that pushed the block to the side when this script was connected, it disappears from me. And it disappears if js scripts are connected. I thought because of the version there is no conflict, not because of them.

05/23/2015 Victor
It doesn't work for me when
href = "http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
looks like this. Without? Ver = 20150523142822
works

05/25/2015 kaha
thanks a lot

06/29/2015 Andrey
Thank you very much for your work! Everything worked almost the first time)

08/26/2015 Alexander
tried different analogues. without conflicts, this one became immediately. increase to origin. size gut. if you still use the mouse to take and move the field of the picture, generally kapets

11/01/2015 Igor
Hello!
Great gallery. Thank you very much.
Just such a question:
In the above example (3 pictures) the images are shown in a loop. And in the downloaded version of lightbox-2.7.1 this function does not work. When viewing the last image, the button does not appear further.
Can you please tell me what could be the reason?

11/14/2015 Anton

11/15/2015 Anton
on IOS and Android, the screen dimming does not occur for the whole page !!! what could be the problem. In a regular LightBox - everything is OK!

03/30/2016 Anton
Hello!
Is it possible to make the picture open in a higher resolution?

11/18/2016 Yura
Thanks a lot! Everything works perfectly!

05/04/2017 Igor
Thank you so much for the script! For a long time I was looking for something similar and easy to install.
Only for some reason, under the photos, incomprehensible inscriptions appear Р˜Р · РѕР ± СЂР ° Р¶РµРЅРёРµ 8 РёР · 8

Maybe somewhere you need to fix the encoding?

12.09.2017 Barsuk
Where have you been before! Spent the whole day trying to fix the removal of duplicates))

I just have home page a preview of the main image, and at the bottom of it there are even fewer thumbnails of additional ones, because of this there were duplicates in the gallery.

It's really great that more and more of the latest web technologies are available to us, with the help of which our work will become much easier. Modal windows - functional element to display any type of HTML content, focused on creating a user-friendly design and interface.

In this roundup, we've put together a list of jQuery lightbox libraries and scripts to help developers and designers create even better and more professional websites.

You can easily add the below scripts to your site. So without further ado, let's get right down to it and take a look at these super jQuery lightbox libraries you can add to your arsenal.

1. Photoswipe

PhotoSwipe is an HTML photo gallery on CSS based and JavaScript targeted specifically at mobile devices. When developing it, the authors took image viewing services for mobile devices IOS and Google as a model. PhotoSwipe has a familiar and intuitive clear interface, which makes it easier to work with images on a mobile site.

All major functions are supported: moving to the next or previous image, zooming in, dragging, zooming out or closing, and others.

2. Swipebox

Swipebox is a jQuery plugin for stationary computers, smartphones and tablets. It supports touch control for mobile, keyboard navigation for desktop, CSS fallback transitions to jQuery controls, pretty easy to set up.

The plugin has been tested on Chrome, Safari, Firefox, Opera, Internet Explorer 8+, iOS4 +, Android, Windows Phone. Released under the MIT license.

3.iLightbox

iLightBox makes it easy to create very beautiful responsive modal windows while using JQuery. Combining support for a wide range of media content with great skins and a user-friendly API, iLightBox strives to make your lightbox as perfect as possible. iLightBox provides the ability to view in full screen mode, Retina-compatible skins, touch event control, the ability to integrate YouTube and Vimeo for HTML5 video, a powerful JavaScript API. The plugin has free support and version updates.

4. Image Lightbox

Image Lightbox is a minimalistic, extensible and customizable plugin for IOS, Android and Windows Phone. You can simply load the next image with the keyboard thanks to the use of CSS transforms and transitions.

5. Magnific Popup

Magnific Popup is Free responsive jQuery plugin that focuses on providing the best possible experience between user and device. For most lightbox plugins, you need to size the window using JS. In Magnific Popup, you can use relative units like EM or resize the lightbox with CSS media queries.

6. Nivo Lightbox

Nivo Lightbox is a flexible lightbox plugin. There are many options to choose from, with which you can easily change the appearance of the lightbox. For example, change theme, transition effect and navigation method.

7. Lightcase

Lightcase is a flexible, responsive and extensible lightbox plugin developed with using jQuery... It works great in all popular browsers like Internet Explorer 7+, Firefox, Opera, Webkit and others. The plugin supports photo, video, HTML5 video, Iframe, SWF and AJAX calls.

8. Lightlayer.js

LightLayer is a script for displaying responsive lightboxes, it works well with other components on any screen. This script is really very easy to use. LightLayer provides control over many parameters: background color and opacity, lightbox position, open / close transitions, and many other customizable features.

9. Strip.js

Strip is a lightbox that expands to only part of the page. This makes it less intrusive and allows you to interact with other page elements on large screens; on mobile devices, the lightbox has a classic look. Strip uses jQuery and is supported in all major browsers.

10. Fluidbox

Fluidbox is a jQuery plugin designed to provide an unobtrusive, responsive lightbox that's perfect for high resolution images. It works great on mobile devices and can also be applied on screens with more high resolution for beautiful display of images.

11. Featherlight

Featherlight is a very lightweight plugin in 400 JavaScript strings , 100 CSS lines and less than 6Kb in size. Smart, responsive lightbox, supports images, AJAX and iframe by default. You can also adapt it to suit your needs. Featherlight works in IE8 +, everyone modern browsers and mobile platforms.

12. Yalb

Yalb stands for Another Lightbox ( Yet Another Lightbox) - but it isn't. Yalb comes with a large set of interfaces, including custom events that allow you to define its state ( open, closed).