msp/lightgallery

LightGallery 的 Magento 模块包装器

安装次数: 25,517

依赖关系: 0

建议者: 0

安全性: 0

星标: 6

关注者: 5

分支: 2

公开问题: 1

语言:JavaScript

类型:magento2-module

0.1.1 2016-10-24 08:10 UTC

This package is auto-updated.

Last update: 2024-08-28 22:17:26 UTC


README

PHP version

此模块允许您通过 requirejs 在 Magento 2 中使用 LightGallery

安装

composer require msp/lightGallery
bin/magento module:enable MSP_LightGallery
bin/magento setup:upgrade

使用方法

您必须通过布局 XML 包含 CSS,例如,如果您想在产品页面中使用相册,请添加到 catalog_product_view.xml

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

您可以使用 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>

或使用一个 <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>