Giter Club home page Giter Club logo

lg-zoom.js's Introduction

travis bower npm

Zoom module for lightgallery.js

Full featured javascript gallery. Zero dependencies. lightgallery

Main features

  • Zoom in and zoom out.
  • Double click on images to see it's actual size.
  • Zoom in/out the clicked position.

Browser support

lightgallery supports all major browsers including IE 9 and above..

Installation

Install with Bower

You can install lightgallery zoom plugin using the Bower package manager.

$ bower install lg-zoom.js --save

npm

You can also find lightgallery zoom plugin on npm.

$ npm install lg-zoom.js

Download from Github

You can also directly download lg-zoom from github.

Include Javascript files

Include lg-zoom plugin after lightgallery.min.js.

<body>
   ---
    <!-- Include lightgallery.js -->
    <script src="js/lightgallery.min.js"></script>
    
    <!-- Include lg-zoom.js -->
    <script src="js/lg-zoom.min.js"></script>
    
    <!-- Include other lightgallery plugins (Optional) -->
    <script src="js/lg-thumbnail.min.js"></script>
</body>  

License

Commercial license

If you want to use lightgallery.js to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about the commercial license

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this project under the terms of the GPLv3.

lg-zoom.js's People

Contributors

sachinchoolur avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

lg-zoom.js's Issues

Zoom reset the image position

Hi, thanks for this awesome plugin :)
On zoom the image and move it to see a specific part and increase the scale again, the position of the image is reset to center. Is there any way to fix this?

Errors when used on galleries with mixed content

On galleries with mixed image and video content, this plugin raises exceptions when the current slide is not an image.

The error appears to originate from

var image = _this.core.outer.querySelector('.lg-current .lg-image');

Where the query selector fails, var image is undefined, raising errors when trying to read image.clientWidth and image.clientHeight. Should there be a guard against non-image slides?

destroy() is way too long

I have a gallery with 700+ photos with the plugin enabled.
When the gallery is closed, the destroy method takes a couple of seconds, and so block the process of closing the gallery.

Is there any way to speed it up ?

Zoom drag doenst work on mobile

Awesome plugin!
But i have a small issue, on mobile i cant drag around the image, when zoomed ind.

Also in your documentation you say: "Zoom in/out the clicked position." When i click the image nothing happens.

I can reproduce the issue on your demo

Add option to hide zoom controllers

I love this plugin.

When using a mixed media gallery (images, videos, etc.), zoom controls currently cannot be hidden on a per slide basis.

It would be nice to allow individual icons to be hidden on a per slide basis (like the download button). This way users aren't trying to zoom into videos when that is not supported.

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.