This time I will share jQuery Plugin and tutorial about Image Lightbox & Gallery For jQuery – Lightbox2, hope it will help you in programming stack.
Lightbox2 is a simple and useful script which can be used to overlay your images or photos on top of the current web page.
It also can be used as an Image Gallery or a Slideshow that the users are able to switch between images in the same group.
Dead simple to use and without the need of writing any JS code.
How to use it:
1. Add jQuery JavaScript library and the Lightbox2 plugin’s JavaScript & CSS to your html page.
1 |
< link rel = "stylesheet" href = "dist/css/lightbox.min.css" > |
2 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
3 |
< script src = "dist/js/lightbox.js" ></ script > |
2. Create a basic lightbox for images using the data-lightbox
attribute.
1 |
< a class = "demo" href = "1.jpg" data-lightbox = "example-1" > |
2 |
< img class = "example-image" src = "thumb-1.jpg" alt = "image-1" > |
5 |
< a class = "demo" href = "2.jpg" data-lightbox = "example-2" > |
6 |
< img class = "example-image" src = "thumb-2.jpg" alt = "image-2" > |
3. Sometimes you might need to display the image caption in the lightbox. The plugin enables you to add custom image captions using the data-title
attribute:
1 |
< a class = "demo" href = "3.jpg" data-lightbox = "example-3" data-title = "Caption" > |
2 |
< img class = "example-image" src = "thumb-3.jpg" alt = "image-3" > |
4. To create a gallery lightbox, just make the data-lightbox
attribute has the same value as these:
01 |
< a class = "demo" href = "1.jpg" data-lightbox = "gallery" > |
02 |
< img class = "example-image" src = "thumb-1.jpg" alt = "image-1" > |
05 |
< a class = "demo" href = "2.jpg" data-lightbox = "gallery" > |
06 |
< img class = "example-image" src = "thumb-2.jpg" alt = "image-2" > |
09 |
< a class = "demo" href = "3.jpg" data-lightbox = "gallery" > |
10 |
< img class = "example-image" src = "thumb-3.jpg" alt = "image-3" > |
13 |
< a class = "demo" href = "4.jpg" data-lightbox = "gallery" > |
14 |
< img class = "example-image" src = "thumb-4.jpg" alt = "image-4" > |
17 |
< a class = "demo" href = "5.jpg" data-lightbox = "gallery" > |
18 |
< img class = "example-image" src = "thumb-5.jpg" alt = "image-5" > |
5. Possible options with default values. Feel free to override the following options to customize the Image Lightbox & Gallery plugin.
02 |
albumLabel: 'Image %1 of %2' , |
03 |
alwaysShowNavOnTouchDevices: false , |
05 |
fitImagesInViewport: true , |
06 |
imageFadeDuration: 600, |
11 |
showImageNumberLabel: true , |
Changelog:
v2.11.3 (2020-07-12)
- feat: When displaying SVGs, max out their size
v2.11.2 (2020-07-07)
- When displaying SVGs, max out their size
v2.11.1 (2019-07-15)
- Bugfix – MaxHeight wouldn’t work.
- fix: use max[Width|Height] when fitImagesInViewport is false.
- feature: Prevent Esc keypress from bubbling
v2.11.0 (2019-04-22)
- SVGs without width and height attrs incorrectly sized in IE11 and older Firefox.
- Remove alpha kbd aliases for closing and nav (x/c/o/n/p). Keep ESC and arrows.
- Disable Scrolling scrolls to top when image is clicked.
- Adds empty alt text for placeholder image.
- Add aria-labels to prev and next images.
- Toggling visibility of elements on open/close revealing intentionally hidden elements.
- Caption links handlers doesn’t trigger.
- Fixed images size when changing positionFromTop.
2018-05-31
2018-05-31
This awesome jQuery plugin is developed by lokesh. For more Advanced Usages, please check the demo page or visit the official website.