onetikk/onetikkk-m2-lightgallery

Magento 2 module wrapper for LightGallery with Image Zoom

Maintainers

Details

github.com/dileepgg711/onetikkk-m2-LightGallery

Source

Issues

Installs: 0

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 0

Open Issues: 0

Language:JavaScript

Type:magento2-module

dev-master 2020-07-06 04:33 UTC

Requires

GNU 3.0 ec19c3d0d5f664cab4b15b805ad31ba27683f00f

This package is auto-updated.

Last update: 2024-05-06 12:47:36 UTC

README

This module lets you use LightGallery with Magento 2 through requirejs. And also added zoom functionality too.

Usage

You must include the css via layout XML, for example if you want to use the gallery in the product page add to catalog_product_view.xml:

<head>
    ...
    <css src="Onetikk_M2_LightGallery::css/lightgallery.min.css"/>
    ...
</head>

You can init the gallery with data-mage-init:

<div id="your-gallery" data-mage-init='{
    "LightGallery": {
        "thumbnail":true
    }
}'>
    <a href="img/kitten1.jpg">
        <img src="img/kitten1-thumb.jpg" />
    </a>
    <a href="img/kitten2.jpg">
        <img src="img/kitten2-thumb.jpg" />
    </a>
    <a href="img/kitten3.jpg">
        <img src="img/kitten3-thumb.jpg" />
    </a>
</div>

or with a <script type="text/x-magento-init">:

<div id="your-gallery">
    <a href="img/kitten1.jpg">
        <img src="img/kitten1-thumb.jpg" />
    </a>
    <a href="img/kitten2.jpg">
        <img src="img/kitten2-thumb.jpg" />
    </a>
    <a href="img/kitten3.jpg">
        <img src="img/kitten3-thumb.jpg" />
    </a>
</div>
<script type="text/x-magento-init">
     {
         "#your-slider": {
             "LightGallery": {
                "thumbnail":true
             }
         }
     }
 </script>