lightgallery V0.1.0
A modern, electron and nodejs based image viewer for Mac, Windows and Linux.
View on github Available on other platformsCore Features
Modern
Lightgallery uses HTML, CSS, and JavaScript with Chromium and Node.js to build the app.
Cross-platform
Lightgallery works across operating systems. You can use it on OS X, Windows, or Linux.
20+ Animations
LightGallery comes with numerous number of beautiful inbuilt animations.
Animated thumbnails
You also have the option to enable animatedthumbnails from the settings.
Zoom & Fullscreen
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.
Mouse Drag & keyboard Navigations
Lightgallery allows users to navigate between slides via mouse drag and keyboard arrows.
Settings
| Name | default | description |
|---|---|---|
| mode | 'lg-slide' |
Type of transition between images. lightGallery comes with lots of transition effects such as 'lg-slide''lg-fade''lg-zoom-in''lg-zoom-in-big''lg-zoom-out''lg-zoom-out-big''lg-zoom-out-in''lg-zoom-in-out''lg-soft-zoom''lg-scale-up''lg-slide-circular''lg-slide-circular-vertical''lg-slide-vertical''lg-slide-vertical-growth''lg-slide-skew-only''lg-slide-skew-only-rev''lg-slide-skew-only-y''lg-slide-skew-only-y-rev''lg-slide-skew''lg-slide-skew-rev''lg-slide-skew-cross''lg-slide-skew-cross-rev''lg-slide-skew-ver''lg-slide-skew-ver-rev''lg-slide-skew-ver-cross''lg-slide-skew-ver-cross-rev''lg-lollipop''lg-lollipop-rev''lg-rotate''lg-rotate-rev''lg-tube' |
| cssEasing | 'ease' |
Type of easing to be used for animations |
| speed | 600 |
Transition duration (in ms). |
| hideBarsDelay | 6000 |
Delay for hiding gallery controls in ms |
| useLeft | false |
force lightgallery to use css left property instead of transform. |
| closable | true |
allows clicks on dimmer to close gallery. |
| loop | true |
If false, will disable the ability to loop back to the beginning of the gallery when on the last element. |
| keyPress | true |
Enable keyboard navigation |
| controls | true |
If false, prev/next buttons will not be displayed. |
| slideEndAnimatoin | true |
Enable slideEnd animation |
| hideControlOnEnd | false |
If true, prev/next button will be hidden on first/last image. |
| mousewheel | true |
Change slide on mousewheel |
| preload | 1 |
Number of preload slides. will exicute only after the current slide is fully loaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded |
| showAfterLoad | true |
Show Content once it is fully loaded |
| counter | true |
Whether to show total number of images and index number of currently displayed image. |
| swipeThreshold | 50 |
By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image. |
| enableDrag | true |
Enables desktop mouse drag support |
| thumbnail | true |
Enable thumbnails for the gallery |
| animateThumb | true |
Enable thumbnail animation. |
| currentPagerPosition | 'middle' |
Position of selected thumbnail. 'left' or 'middle' or 'right' |
| thumbWidth | 100 |
Width of each thumbnails. |
| thumbContHeight | 100 |
Height of the thumbnail container including padding and border |
| thumbMargin | 5 |
Spacing between each thumbnails |
| toogleThumb | true | Whether to display thumbnail toggle button. |
| enableThumbDrag | true |
Enables desktop mouse drag support for thumbnails. |
| swipeThreshold | 50 |
By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev slide. |
| autoplay | true |
Enable gallery autoplay |
| pause | 5000 |
The time (in ms) between each auto transition. |
| progressBar | true |
Enable autoplay progress bar |
| fourceAutoplay | false |
If false autoplay will be stopped after first user action |
| autoplayControls | true |
Show/hide autoplay controls. |
| pager | true |
Enable/Disable pager |
| zoom | true |
Enable/Disable zoom option |
| scale | 1 |
Value of zoom should be incremented/decremented |