Lightgallery

  1. Lightgallery Image Viewer
  2. Gallery 67 Lighting
  3. Lightgallery.com
  4. Lightgallery Plugin

LightGallery A customizable, modular, responsive, lightbox gallery plugin for jQuery. LightGallery A customizable, modular, responsive, lightbox gallery plugin for jQuery.

A modern, electron and nodejs based image viewer for Mac, Windows and Linux.

Main features

  • Built with Electron.
    • 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 in-built animations.
  • Animated thumbnails
    • You also have the option to enable animated thumbnails 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.
  • Pagers
  • Auto slideshow
  • Support various kind of image formats (jpg, png, gif, webp).
  • Highly customizable
  • And many more.
Watch this repository. More features are coming

Settings

NameDefaultDescription
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
speed600Transition duration (in ms).
hideBarsDelay6000Delay for hiding gallery controls in ms
useLeftfalseforce lightgallery to use css left property instead of transform.
closabletrueallows clicks on dimmer to close gallery.
looptrueIf false, will disable the ability to loop back to the beginning of the gallery when on the last element.
keyPresstrueEnable keyboard navigation
controlstrueIf false, prev/next buttons will not be displayed.
slideEndAnimatointrueEnable slideEnd animation
hideControlOnEndfalseIf true, prev/next button will be hidden on first/last image.
mousewheeltrueChange slide on mousewheel
preload1Number 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
showAfterLoadtrueShow Content once it is fully loaded
countertrueWhether to show total number of images and index number of currently displayed image.
swipeThreshold50By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image.
enableDragtrueEnables desktop mouse drag support
thumbnailtrueEnable thumbnails for the gallery
animateThumbtrueEnable thumbnail animation.
currentPagerPosition'middle'Position of selected thumbnail. 'left' or 'middle' or 'right'
thumbWidth100Width of each thumbnails.
thumbContHeight100Height of the thumbnail container including padding and border
thumbMargin5Spacing between each thumbnails
toogleThumbtrueWhether to display thumbnail toggle button.
enableThumbDragtrueEnables desktop mouse drag support for thumbnails.
swipeThreshold50By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev slide.
autoplaytrueEnable gallery autoplay
pause5000The time (in ms) between each auto transition.
progressBartrueEnable autoplay progress bar
fourceAutoplayfalseIf false autoplay will be stopped after first user action
autoplayControlstrueShow/hide autoplay controls.
pagertrueEnable/Disable pager
zoomtrueEnable/Disable zoom option
scale1Value of zoom should be incremented/decremented

Development

Project's folders

  • app - code of your application goes here.
  • config - place for you to declare environment specific stuff.
  • build - in this folder lands built, runnable application.
  • releases - ready for distribution installers will land here.
  • resources - resources for particular operating system.
  • tasks - build and development environment scripts.

Installation

It will also download Electron runtime, and install dependencies for second package.json file inside app folder.

Starting the app

Making a release

To make ready for distribution installer use command:

It will start the packaging process for the operating system you are running this command on. The file which is ready for distribution will be outputted to releases directory.

You can create Windows installer only when running on Windows, the same is true for Linux and OSX. So to generate all three installers you need all three operating systems.

Other Projects

A customizable, modular, responsive, lightbox gallery plugin.

lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation.

A simple lightweight flash message module for angularjs

An angularjs directive to copy text to clipboard without using flash

Basic astrodynamics formulas chart. A rich WYSIWYG text editor directive for angularjs.

Ladda button directive for angularjs

Integrated Suite of Business Applications. (Not an open source project but free for the first 1,000 Companies!)

Follow me on twitter @sachinchoolur for the latest news, updates about this project.

Special thanks to Jakub Szwacz for electron boilerplate

License

MIT License

A modern, electron and nodejs based image viewer for Mac, Windows and Linux.

Main features

  • Built with Electron.
    • 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 in-built animations.
  • Animated thumbnails
    • You also have the option to enable animated thumbnails 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.
  • Pagers
  • Auto slideshow
  • Support various kind of image formats (jpg, png, gif, webp).
  • Highly customizable
  • And many more.
Watch this repository. More features are coming

Settings

Lightgallery Image Viewer

NameDefaultDescription
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
speed600Transition duration (in ms).
hideBarsDelay6000Delay for hiding gallery controls in ms
useLeftfalseforce lightgallery to use css left property instead of transform.
closabletrueallows clicks on dimmer to close gallery.
looptrueIf false, will disable the ability to loop back to the beginning of the gallery when on the last element.
keyPresstrueEnable keyboard navigation
controlstrueIf false, prev/next buttons will not be displayed.
slideEndAnimatointrueEnable slideEnd animation
hideControlOnEndfalseIf true, prev/next button will be hidden on first/last image.
mousewheeltrueChange slide on mousewheel
preload1Number 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
showAfterLoadtrueShow Content once it is fully loaded
countertrueWhether to show total number of images and index number of currently displayed image.
swipeThreshold50By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image.
enableDragtrueEnables desktop mouse drag support
thumbnailtrueEnable thumbnails for the gallery
animateThumbtrueEnable thumbnail animation.
currentPagerPosition'middle'Position of selected thumbnail. 'left' or 'middle' or 'right'
thumbWidth100Width of each thumbnails.
thumbContHeight100Height of the thumbnail container including padding and border
thumbMargin5Spacing between each thumbnails
toogleThumbtrueWhether to display thumbnail toggle button.
enableThumbDragtrueEnables desktop mouse drag support for thumbnails.
swipeThreshold50By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev slide.
autoplaytrueEnable gallery autoplay
pause5000The time (in ms) between each auto transition.
progressBartrueEnable autoplay progress bar
fourceAutoplayfalseIf false autoplay will be stopped after first user action
autoplayControlstrueShow/hide autoplay controls.
pagertrueEnable/Disable pager
zoomtrueEnable/Disable zoom option
scale1Value of zoom should be incremented/decremented

Development

Project's folders

  • app - code of your application goes here.
  • config - place for you to declare environment specific stuff.
  • build - in this folder lands built, runnable application.
  • releases - ready for distribution installers will land here.
  • resources - resources for particular operating system.
  • tasks - build and development environment scripts.

Installation

Lightgallery.com

Lightgallery

It will also download Electron runtime, and install dependencies for second package.json file inside app folder.

Starting the app

Making a release

To make ready for distribution installer use command:

It will start the packaging process for the operating system you are running this command on. The file which is ready for distribution will be outputted to releases directory.

You can create Windows installer only when running on Windows, the same is true for Linux and OSX. So to generate all three installers you need all three operating systems.

Other Projects

A customizable, modular, responsive, lightbox gallery plugin.

lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation.

A simple lightweight flash message module for angularjs

An angularjs directive to copy text to clipboard without using flash

A rich WYSIWYG text editor directive for angularjs.

Ladda button directive for angularjs

Lightgallery Plugin

Integrated Suite of Business Applications. (Not an open source project but free for the first 1,000 Companies!)

Follow me on twitter @sachinchoolur for the latest news, updates about this project.

Special thanks to Jakub Szwacz for electron boilerplate

License

MIT License