Giter Club home page Giter Club logo

lightgallery-desktop's Introduction

lightGallery

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

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

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

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

npm install

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

Starting the app

npm start

Making a release

To make ready for distribution installer use command:

npm run release

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

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

lightgallery-desktop's People

Contributors

sachinchoolur avatar sikanderiqbal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lightgallery-desktop's Issues

Animation improvements (Duration and easing)

Currently, switching between images takes pretty long with an ease-in-out-like timing. For a better user experience, I think this should probably be shortened, and switched to an ease-out timing, or no animation at all.

This is more similar to Apple's default slideshows.

Option to reset settings

Would be nice to be able to click 'Reset to default settings' from the menu. If you've messed around with the settings and want to restore to default...

Add "Fit to screen" option

The image should maintain it's aspect ratio but take up as much space as possible in width/height. Most image viewers have this feature.

unable to load images from folders with special prefix such as #

pretty much the what the title said, change the folder name and removing the prefix will fix the issue but I use it to organize my folders, so I'm not willing the change it.
anyway, it gives " err file not found".

hopefully, there is a work around it in the code and it will probably fix the issues mentioned by others that they were also unable to load the images for some reason.

Interrupted Autoplay

When displaying images using the "autoplay" feature and manually moving to the next image the autoplay gets interrupted, but still shows "enabled" in the toolbar menu.

Couldn't find any information about which version I'm using but I assume it's the latest Linux build since I downloaded it this morning.

Support videos

It would be nice to support videos, webm, mp4, etc, basically anything the native browser can play. It's becoming pretty popular to convert .gifs to .mp4 so would be nice to play those in the image viewer.

Zoom focus stuck

Zoom focus stuck on middle of image, need to be able to move within zoomed image.

Image rendering

Rendering a 4K image takes too long. Sometimes a 4K image chops off when you play it in a slide show. And there is a transaction problem with Linux version, transaction between image flow isn't smooth. Try fixing them

Add rotate option

Hi, I make the request to add a button to rotate the images in the sense clockwise.
Thanks

Add slideshow mode

Although there is a play button, this doesn't really reflect a true slideshow mode. In nearly all image viewers, a slideshow mode is pretty much full screen image without any controls whatsoever. It's a one click operation. Currently you need to go through the settings and configure a minimal based UI just to enter a slideshow. It would be nice to have one button to achieve this.

Open File/Folder from CLI doesn't work

OS: Elementary OS (Ubuntu 16)

I would expect that something similar to:
/opt/lightgallery/lightgallery MyImage.jpg

Would open/view the image or folder as passed in, but instead it just opens lightagallery and ignores the parameter.

Set as default image viewer

How can I set it as my default image viewer in linux?
It doesn't appear in application list to open images with it.

thumbnail slider

Hi Guys,

is there a way to either disable or hide by default, the thumbnail slider ( below the full size image slider )?

thanks in advance...

Scrolling gallery with Mousewheel

Hi I saw in one of your demos a reference to mousewheel.js but this doesnt seem to be part of the npm module.

I have found it in your github repo though and it looks like it is reference jquery, is there a non jquery version?

Gallery Close

I want the gallery to close when the mouse wheel moves.

I know it's not a problem. how can I do it?

unable to load images

Hey,

thanks for the great package. I tried to run the app using rpm start, but can unfortunately not load the images with file/open directory. I am attaching the "npm install" output in the file links bellow. Installing the app from the prebuild .dep package works as expected.

Any clues why it doesn't not work?

Thanks!

npm_install_stderr.txt
npm_install_stdout.txt

My operating system: Ubuntu 14.04
$ node --version
v6.3.1
$ npm --version
3.10.6

$ npm start

@ start /home/me/lightgallery-desktop
node ./tasks/start

(node:11427) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[13:07:46] Using gulpfile ~/lightgallery-desktop/gulpfile.js
[13:07:46] Starting 'clean'...
[13:07:46] Finished 'clean' after 95 ms
[13:07:46] Starting 'bundle'...
[13:07:46] Starting 'less'...
[13:07:46] Starting 'copy'...
[13:07:46] Starting 'finalize'...
[13:07:46] Finished 'finalize' after 1.62 ms
Treating 'electron' as external dependency
Treating 'fs' as external dependency
Treating 'electron' as external dependency
Treating 'fs-jetpack' as external dependency
Treating 'fs-jetpack' as external dependency
[13:07:46] Finished 'bundle' after 166 ms
[13:07:46] Finished 'less' after 190 ms
[13:07:47] Finished 'copy' after 429 ms
[13:07:47] Starting 'build'...
[13:07:47] Finished 'build' after 5.94 μs
(node:11456) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[13:07:47] Using gulpfile ~/lightgallery-desktop/gulpfile.js
[13:07:47] Starting 'watch'...
[13:07:48] Finished 'watch' after 352 ms

Memory Leak?

Hi, I am not sure if it is normal or not, but when the slider running in autoplay, the memory is keep increasing. Any idea to prevent it happen?

App Image Request

as deb only supports debian based linux can u provide an app image, snap or flatpak Pls :)

RPM release

Hi there! Great project!
Thanks for zip/tar.gz source code released. Can you guys, release *.rpm package for linux too ? Any redhat / fedora user will love and appreciate it !

Do some performance optimizations

Loaded a directory of 346 images and each image ~15 MB of size. I waited for ~40 seconds but nothing loaded up. Consider doing lazy loading of previews, i.e load the previews of first few images and then accordingly with time load others as the user navigates. Loading all at the time, eats up a lot of RAM and slows down the app.

Dynamic Source Folder Content Update

While in Autoplay mode, it would be great if the app can poll the source folder and update the enqueued image list based on the most recent contents in the folder.

This is to facilitate a use case where lightgallery is used to display content like in a kiosk setting, where the content being autoplayed is being updated in the background while the autoplay is occuring.

Thumbnails squished

Would make a big difference if the thumb images weren't squished to a square. I'm picturing making it optionally either like background-size: cover or background-size: contain.

Thumbnail resizing squashing the images

The created thumbnails look pretty squashed, it'd make more sense to fill the canvas around them and keep their original aspect ratio.

I use the following method for that in simplethumbnails:

  function resize(imagewidth, imageheight, thumbwidth, thumbheight) {
    var w = 0, h = 0, x = 0, y = 0,
        widthratio  = imagewidth / thumbwidth,
        heightratio = imageheight / thumbheight,
        maxratio    = Math.max( widthratio, heightratio );
    if ( maxratio > 1 ) {
        w = imagewidth / maxratio;
        h = imageheight / maxratio;
    } else {
        w = imagewidth;
        h = imageheight;
    }
    x = ( thumbwidth - w ) / 2;
    y = ( thumbheight - h ) / 2;
    return { w:w, h:h, x:x, y:y };
  }

I'm currently on a plane, but I may be able to create a pull request with this soon.

Install Location? Windows Version?

Is LightGallery Desktop compatible with Windows XP? If not, skip the rest of my post. If so . . .

Why can't I place LightGallery on-a-drive/in-a-directory of my choosing? I had to hunt down where it installed (In Windows Program Files folder) and manually move it to the Drive + Folder I intend to use it in, but I get a "not a valid Win32 application" error when I attempt to launch the program.

Animate thumbnail option

This doesn't appear to be working? The thumbnail doesn't animate. Maybe it's not looping the gif?

Problems with buying licence

Hallo sachinchoolur,

I just bought a licence and I cannot download the receipt - it tries to download "true.html" (?) but then a server error occurs.

I also have a question concerning licences for another project.

How can I contact you??

Regards
Anna

Fullscreen mode

Doesn't seem to get rid of the controls at the top of the screen (Window, File, Thumbnail, ....) so not really a true fullscreen mode?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.