Git Product home page Git Product logo

lg-zoom's Introduction

travis bower npm

Zoom module for lightGallery

A customizable, modular, responsive, lightbox gallery plugin for jQuery. 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 --save

npm

You can also find lightgallery zoom plugin on npm.

$ npm install lg-zoom

Download from Github

You can also directly download lg-zoom from github.

CDN

If you prefer to use a CDN you can load files via jsdelivr

Include Javascript files

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

<body>
   ---
    <!-- Include lightGallery -->
    <script src="js/lightgallery.min.js"></script>
    
    <!-- Include lg-zoom -->
    <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 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's People

Contributors

sachinchoolur avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

lg-zoom's Issues

Can't zoom with <picture> tags

Hello,

I am using lg-zoom V1.3.0

I use the tags instead of a regular tags in my slider. Here's the structure:

picture
source.../source
source.../source
img
/picture

So the zoom() function cannot position the zoom properly because it uses $image.parent(), which will apply the translation to my tag instead of the image wrapper. My fix is to replace those calls with $image.closest(".lg-img-wrap").

I think you should consider a similar fix.

Unable to load

Error occurs stating $.fn.lightGallery is undefined even after loading lightgallery.min.js

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.