Lightbox plugins for WordPress allow you to use a pop-up window on your site to display images on top of the current page. They can be used to create beautiful websites.
These jQuery plugins are used to add pop-ups to your website. When you click on any image from the slide gallery, that image opens in a pop-up window along with next, previous and close buttons. Such plugins are a very powerful tool for any web designer and developer, as they help achieve very beautiful effects that give an ordinary website a spectacular and attractive look. To use the jQuery plugin, you need basic knowledge of JavaScript and jQuery. If you don't know the basics, just read the plugin description and follow the instructions. Every year there are many new jQuery plugins that help you create beautiful websites. These jQuery plugins have amazing features and many new features.
Best JQuery lightbox plugins for WordPressIn this article we would like to present you a list of some of the best and useful JQuery popup plugins for 2015, which can help you create beautiful and attractive websites.
Lightbox Slider GalleryLightbox Slider Gallery is an easy-to-manage, space-saving jQuery gallery that displays images and videos.
WP jQuery LightboxWP jQuery Lightbox is a simple, lightweight jQuery popup plugin. It has CSS3 transitions for smoothing effects and manageable image sizes. Improved for mobile devices.
Lightbox Gallery is a free wizard that helps you easily create galleries of pop-up images with stunning overlay effects in a few clicks, without a single line of code.
Easy FancyBoxEasy FancyBox is a tool for displaying images, HTML content and multimedia in a Macintosh lightbox style, appearing on top of a web page.
LightboxLightbox is a responsive and user friendly popup plugin. This jQuery plugin is very easy to use and does not have any unnecessary features.
FooBox Image LightboxFooBox Image Lightbox - Used to create a gallery of images in a popup window simply as "built-in" sliders. A highly responsive jQuery plugin that works equally well on a large monitor as well as on a tablet or smartphone.
Lightbox Plus ColorboxLightbox Plus Colorbox is a lightweight, customizable jQuery plugin. Compatible with jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ browsers.
Royal PrettyPhotoRoyal PrettyPhoto is another jQuery popup plugin suitable for images, embedded content, iFrames, Google maps, Ajax requests, Vimeo and YouTube videos.
Responsive Lightbox by dFactory is a smooth, powerful and revolutionary jQuery popup plugin that will benefit ambitious and creative web designers and developers.
Easy SwipeboxEasy Swipebox is a jQuery plugin for desktop, mobile and tablets. This is a user friendly jQuery plugin.
Magnificent PopupMagnific Popup is a responsive jQuery popup plugin focused on providing the best user experience on any device (Zepto.js compatible).
Lightbox 2Lightbox 2 is a small JavaScript library used to display images on top of the current page. It is easy to install and works with all modern browsers.
The script organizes viewing of images in a pop-up window. The viewing can be organized either by one image or by a gallery, scrolling through the pictures in a pop-up window.
The simplest and fastest script to install. Installs and configures in just a few minutes.
Next, embed the script into your website. In the html code of the page you write the code
And the last step. Outputting images.
You output 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 the picture, a large image pops up.
The data-lightbox="image" parameter is responsible for this effect.
If you have a lot of images on the page, you can open the images without scrolling in a pop-up window, or you can combine images and they will scroll through in a pop-up window.
To combine images you need to use one name for each group of pictures
As you can see, all the pictures can be scrolled through in a pop-up window, since the data-lightbox is the same for everyone.
If you want to separate the pictures so they don't scroll through, use a code like this
Now each picture opens separately, that is, there is no way to scroll to the next one.
What's in the modernized version Button to enlarge the image to real size. You can see it in all examples. It's not in the original versionThere is a setting in the script itself, you can turn off this button.
And the second addition that few people need is the elimination of duplicate pictures.
It is disabled by default, but you can enable it directly in the script, in the same place where the real-size button is enabled.
In normal use of the script, this function only causes harm; it can only be used in completely hopeless situations.
Notice that three of the links are empty, meaning they link to large images but 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 larger picture opens and all the pictures from the empty links are pulled up and you can scroll through it.
And look here, in the links there are two identical pictures (highlighted in red) and when you scroll through, you will see two identical pictures.
If in a specific example you enable the removal of duplicates, 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 strangely enough, I encountered this situation: in one online store, duplicate photos were supposed to be displayed for a product (there were clever substitutions of photos through scripts), and when viewed through lightbox, the duplicate photos looked very wrong. This is where removing duplicates comes in handy.
Comments
12/11/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 a block to the side when I connected this script, it disappeared. Moreover, it disappears if js scripts are connected. I thought it was conflicting because of the version, but not because of them.
05/23/2015 Victor
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
I tried different analogues. This one became without conflicts right away. increase to original the size is gut. If I used the mouse to take and move the field of the picture, it would be a complete mess
01.11.2015 Igor
Hello!
Great gallery. Thanks a lot.
Just this question:
In the example above (3 pictures), the images are shown in a loop. But in the downloaded version of lightbox-2.7.1 this function does not work. When viewing the last image, the button no longer appears.
Tell me, please, what could be the reason?
11/14/2015 Anton
11/15/2015 Anton
On IOS and Android, the screen dims do not cover the entire page!!! what could be the problem. In a regular LightBox - everything is OK!
11/15/2015 Anton
On IOS and Android, the screen dims do not cover the entire 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 great!
05/04/2017 Igor
Thank you very much for the script! I've been looking for something similar and easy to install for a long time.
Only for some reason under my photos strange inscriptions appear Рзображение 8 РеР· 8
Maybe the encoding needs to be corrected somewhere?
09.12.2017 Barsuk
Where were you before? I spent the whole day trying to figure out how to remove duplicates))
I just have a preview of the main image on the main page, and at the bottom there are even smaller previews of additional ones, because of this there were duplicates in the gallery.
One of the previous articles talked about probably the most popular free photo gallery - Lightbox, created based on the jQuery script library. Based on Lightbox, web designers have developed many interesting clones, but the original version is still being developed and is successfully used for photo galleries on many sites. Let's consider its latest update - the Lightbox2 plugin, which is small in size and, as always, easy to install on the site. At the same time, Lightbox2 has an attractive design, works in all browsers and, what’s especially nice, correctly displays large images, compressing them to fit the user’s screen size.
The developer of the Lightbox2 plugin is Lokesh Dhakar, a programmer from San Francisco. Currently (2014) version of Lightbox v2.7.1 is available, which we will try to install on the site. An example of expanding a single image using LightBox2 is shown in the figure.
Installing the LightBox2 photo gallery To install the LightBox2 photo gallery, first create a new folder on the site, calling it, of course, lightbox2. This folder must be in the same directory as the photo gallery page. Then download the archive and unpack it into the created folder. We will get two scripts (*.js), auxiliary images (img folder) and a CSS file (*.css) in it. Next, we will insert into the header of the page with the future photo gallery inside the tag... the following lines indicating the paths to our new files:Important Note: If your site uses several jQuery plugins, then it is more convenient to move the jquery.js file (preferably the latest version) to the root folder so as not to download it several times. In this case, the line for accessing it will look the same for all plugins. In particular, for our example it turns out like this:
.
It is not recommended to use several different versions of jQuery on the same page so that they do not conflict with each other. At the same time, be sure to check that the plugins work with the installed version of jQuery, since not all versions are interchangeable.
Now you need to place the necessary images on the website page. As usual, each should be presented in the form of a thumbnail (small) and a full-size image (big), indicated by a link from the thumbnail. In the link tag, we additionally indicate rel="lightbox" - for a single image, and if we want to combine several images into a gallery, then through a hyphen any expression that is the same for all, for example, rel="lightbox-one" 
and so on.
If it is necessary to make inscriptions for images, then place them in the title of the links.
An example of a simple photo gallery of three images is shown in the figure:
Important Note: if the size of the main image (big.jpg) is larger than the screen size in the user's browser, then LightBox2 automatically adjusts (reduces) it to fit the screen size. At the same time, the enlarged image always fits into the screen, regardless of what device is used for viewing: a smartphone, tablet or high-resolution monitor.
Therefore, it is desirable that a large image have a margin of resolution, for example, at least 1000 vertical pixels for a standard Full HD screen - 1920x1080. In our example, this is the picture “Subbotnik”.
Setting up the LightBox2 photo galleryTo set up a photo gallery, open the lightbox.js file in any HTML or text editor, for example, Notepad. At the very beginning of the file you will see the available settings:
this.fadeDuration = 500; //image opening time ms
this.fitImagesInViewport = true; //fit to screen size true/false
this.resizeDuration = 700; //image unfolding time ms
this.positionFromTop = 50; //indent of the lightBox window at the top of the screen
this.showImageNumberLabel = true; //output the picture number true/false
etc.
The main ones are provided with comments in Russian. Change the parameter values, and after saving the lightbox.js file, you can see the result by opening the page with your photo gallery in the browser.
Some parameters of the gallery window, for example, background color and transparency, caption color, etc., are set in the CSS file lightbox.css. Auxiliary images (forward, backward, loading, exit) are located in the img folder, and they can also be changed at your discretion.
For other programs for creating photo galleries, image carousels and slide shows on the site, see and in the section "
Lightbox is a jQuery plugin that is used to display an image or any other content in a specially designed window, which is usually shown on a translucent shaded background on top of the main page content.
Before installing the plugin on the page and setting it up, let's take a look at the examples:
Getting started with Lightbox Download the latest version of the plugin (also available via Bower: bower install lightbox2 --save). After that, unzip the zip file and take a look at the stripped-down working example located in the folder examples.
Ready to install Lightbox on your page? Start by connecting CSS and Javascript. You can take both of these files from the folder dist. Paste the following code between the head tags in your web page
Insert the following code that connects the plugin before the closing body tag:
Make sure the jQuery that Lightbox requires is also loaded. If you are already using JQuery (requires JQuery 1.7 or higher) on the page, make sure it loads before lightbox.js. If you do not have jQuery enabled, use dist/js/lightbox-plus-jquery.js, which already has this library, or download the latest version from the office. site. Make sure that the four images listed in lightbox.css location at the specified location. You can take images from the folder /dist/images.
Now let's move on to the HTML code. Add a data-lightbox attribute to the link containing the images that we want to apply our plugin to. For the attribute value, use a name that is unique for each image. For example:
Image #1
Add a data-title attribute if you want to show the title. If you have a group of related images that you would like to combine into a set, use the same value in the data-lightbox attribute for the required images. For example:
Img 2 Img 3 Img 4
Lightbox SettingsIf you want to change any of the default options, call the option: method.
lightbox.option(( "resizeDuration": 200, "wrapAround": true ))
- alwaysShowNavOnTouchDevices Default: false
If true, then the left and right navigation arrows that appear on mouseover when viewing a set of images will always be visible on touch-enabled devices
- fadeDuration Default: 500
The time it takes for the container to disappear, in milliseconds.
- fitImagesInViewport Default: true
If true, then proportionally reduce the image size so that the picture fits in the viewing area. This saves the user from having to scroll to see the entire image.
- maxWidth
If set, the image height will be limited to this value (in pixels). The aspect ratio will not be respected.
- maxHeight
If set, the image width will be limited to this value (in pixels). The aspect ratio will not be respected.
- positionFromTop Default: 50
Distance from the top of the viewport to the Lightbox container (in pixels).
- resizeDuration Default: 700
The time during which the Lightbox container will change its width and height when changing images of different sizes (in milliseconds).
- showImageNumberLabel Default: true
If false, the text will indicate the current image number and the total number of images in the set, for example: “Image 2 of 4”.
- wrapAround Default: false
If true, then when the last image is shown, the button for showing the next image does not disappear. Clicking on it will show the first image.
