lightGallery
A customizable, modular, responsive, lightbox gallery plugin.
OTHER License
Published by sachinchoolur over 3 years ago
Upgrade angular to v12
Published by sachinchoolur over 3 years ago
Bugfix - https://github.com/sachinchoolur/lightGallery/issues/1038
The image is shifted under certain circumstances
Published by sachinchoolur over 3 years ago
🔥 Add lit component support
🕷 Bugfix - Fix setting selector type
Published by sachinchoolur over 3 years ago
Bug fixes -
- Enable all functionalities which are not relevant with just one slide, if the gallery is modified with more slides using the
refreshcall. - If lightgallery is included in the header tag,
settings.containerwill be null, as the settings are initialized on import of the script
Published by sachinchoolur over 3 years ago
Features
- Add
refreshmethod
This helps to refresh lightGallery when children or dynamicEl are changed without callingdestroymethod - Allow plugins to modify core settings
- New plugin for medium like zoom experience
- Add
elementClassNamesprop for react component
Bug fixes
- remove unwanted scrolling with the dynamic gallery.
when the dynamic gallery is initialized with a focusable element such as a, or button if the gallery is opened via a click from another button somewhere else on the page, after closing gallery document scrolls to the first element - Fix dynamic option type
typeof dynamic wasfalseinsteadboolean
Published by sachinchoolur over 3 years ago
Make dynamicEl optional in refresh method
Published by sachinchoolur over 3 years ago
- Add options to pass an array of dynamicEl via refresh method.
- Add elementClassNames prop for react component
- bugfix: remove unwanted scrolling with the dynamic gallery.
when the dynamic gallery is initialized with a focusable element such as a, or button if the gallery is opened via a click from another button somewhere else on the page, after closing gallery document scrolls to the first element
Published by sachinchoolur over 3 years ago
Add new refresh method
This is extremely useful to update lightGallery with a new set of child items.
Previously, destroy and re-initialization was required.
Published by sachinchoolur over 3 years ago
- Allow plugin to modify core settings
- Add plugin for medium like zoom experiance
Published by sachinchoolur over 3 years ago
Due to some unexpected build problems, lightGallery React, Angular, and Vue.js builds were not included in the previous release
Published by sachinchoolur over 3 years ago
Version 2.0
- Completely re-wrote from scratch in typescript
- Removed jQuery dependency
- Available for React, Vue.js, and Angular
- Moved all modules to the main repo for better maintainability.
- Dropped IE 8 and 9 support. Let me know if you still need support for IE 8 and 9. I’ll consider adding a plugin to add support if there is enough demand.
- Separated plugin and transitions CSS from the core CSS file.
New features
- Pinch to zoom
- Virtual slides
- Swipe to close
- Zoom from the origin
- Inline gallery
- Next-generation image formats support(webp, JPEG XL). etc
- Better customizability
- Better performance on mobile devices.
- Dynamically add, remove slides while the gallery is open
- Comment interface
- and much more.
How to upgrade
To make the upgrade seamless, v2 follows the API structure as much as possible. But, few settings are removed and a lot of additional settings are added, the way we use public methods is changed slightly and few events are renamed.
Initialization
V2 doesn’t require jQuery as a dependancy.
lightGallery(document.getElementById('lightgallery'), {
plugins: [lgZoom, lgThumbnail,]
speed: 500
... other settings
});
Plugins - To avoid polluting global scope, since v2 plugins has to be passed via settings.
lightGallery(document.getElementById(‘’lightgallery), {

plugins: [lgZoom, lgAutoplay, lgComment, lgFullscreen , lgHash, lgPager, lgRotate, lgShare, lgThumbnail, lgVideo]

});
CSS - Separated plugin and transitions CSS from the core CSS file. For each plugins, CSS files has to be included separately
<head>
<link type="text/css" rel="stylesheet" href="css/lightgallery.css" />
<!-- lightgallery plugins -->
<link type="text/css" rel="stylesheet" href="css/lg-zoom.css" />
<link type="text/css" rel="stylesheet" href="css/lg-thumbnail.css" />
<!-- OR -->
<link type="text/css" rel="stylesheet" href="css/lightgallery-bundle.css" />
</head>
- Removed in-built support for Dailymotion VK. We Will be adding separate plugins for DailyMotion and Vimeo support
Added Wistia support - HTML videos - Videos can be passed via data-video attribute instead of passing it via hidden div
data-video='{"source": [{"src":"/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
- Events are renamed - Please take a look at the documentation
- Few settings are added, removed, or renamed.
Rather than listing down all the changes here, I’d recommend going through the current settings that you are using and compare them with the new documentation.
Published by sachinchoolur over 3 years ago
Bug fixes and improvements.
Published by sachinchoolur over 3 years ago
Breaking change
Separated plugin and transitions CSS from the core CSS file.
<head>
<link type="text/css" rel="stylesheet" href="css/lightgallery.css" />
<!-- lightgallery plugins -->
<link type="text/css" rel="stylesheet" href="css/lg-zoom.css" />
<link type="text/css" rel="stylesheet" href="css/lg-thumbnail.css" />
<!-- OR -->
<link type="text/css" rel="stylesheet" href="css/lightgallery-bundle.css" />
</head>
Published by sachinchoolur over 3 years ago
- Remove unnecessary CSS reference in angular component
- Fix minor bugs and other improvements
Published by sachinchoolur over 3 years ago
Add Angular, React and Vue packages
Published by sachinchoolur over 3 years ago
Version 2.0
Subscribe to get notified on the stable release. - ProductHunt
- Completely re-wrote from scratch in typescript
- Removed jQuery dependency
- Moved all modules to the main repo for better maintainability.
- Dropped IE 8 and 9 support. Let me know if you still need support for IE 8 and 9. I’ll consider adding a plugin to add support if there is enough demand.
- Website
- Docs
- Demos
New features
- Pinch to zoom
- Virtual slides
- Swipe to close
- Zoom from the origin
- Inline gallery
- Next-generation image formats support(webp, JPEG XL). etc
- Better customizability
- Better performance on mobile devices.
- Dynamically add, remove slides while the gallery is open
- Comment interface
- and much more.
How to upgrade
To make the upgrade seamless, v2 follows the API structure as much as possible. But, few settings are removed and a lot of additional settings are added, the way we use public methods is changed slightly and few events are renamed.
Initialization
V2 doesn’t require jQuery as a dependancy.
lightGallery(document.getElementById('lightgallery'), {
plugins: [lgZoom, lgThumbnail,]
speed: 500
... other settings
});
Plugins To avoid polluting global scope, since v2 plugins has to be passed via settings.
lightGallery(document.getElementById(‘’lightgallery), {

plugins: [lgZoom, lgAutoplay, lgComment, lgFullscreen , lgHash, lgPager, lgRotate, lgShare, lgThumbnail, lgVideo]

});
- Removed in-built support for Dailymotion VK. We Will be adding separate plugins for DailyMotion and Vimeo support
Added Wistia support - HTML videos - Videos can be passed via data-video attribute instead of passing it via hidden div
data-video='{"source": [{"src":"/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
- Events are renamed - Please take a look at the documentation
- Few settings are added, removed, or renamed.
Rather than listing down all the changes here, I’d recommend going through the current settings that you are using and compare them with the new documentation.
Published by sachinchoolur almost 4 years ago
Breaking change
- Upgrad from frooglaloop to vimeo player.js
Since version 1.4.0-beta.0, lightGallery requires player.js to control(Play, Pause, etc) vimeo videos instead of depricated frooglaloop2 API.
Improvements
- Update video js error message
- Enhance autoplay support
- Add support for player.vimeo.com/video/<video_id>
Published by sachinchoolur almost 4 years ago
Published by sachinchoolur about 4 years ago
-
Add option to turn off hiding toolbar and controls
If0is passed viahideBarsDelay, lightGallery will not hide the toolbar and controls. -
new
supportLegacyBrowseroption
This helps make the usage of picturefill libray optional as all modern browsers support srcset attribute now -
Better error messaging
-
Minor bug fixes
Published by sachinchoolur about 4 years ago
Fix issue - #951
Flip buttons class names are interchanged in both CSS and JavaScript