将图像动态加载到灯箱中

Question

所以我知道我在某个地方搞砸了，但我想不通。

我正在运行安装一个名为 light gallery 的灯箱。我引用了 lightgallery.min.js 和 lightgallery.min.css，并且文件位于正确的文件夹中。 /css 和 /js

为了动态调用图像，我正在尝试运行以下脚本。（取自这里 LightGallery 我只是在我的系统上引用了一张图片。

 $('.#dynamic').on('click', function() {

        $(this).lightGallery({
            dynamic: true,
            dynamicEl: [{
                "src": '/img/splash/header.jpg',
                'thumb': '/img/splash/header.jpg',
                'subHtml': '<h4>Cover</h4><p>Test image</p>'
            }, {
                "src": '/img/splash/header.jpg',
                'thumb': '/img/splash/header.jpg',
                'subHtml': "<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>"
            }, {
                "src": '/img/splash/header.jpg',
                'thumb': '/img/splash/header.jpg',
                'subHtml': "<h4>Coniston Calmness</h4><p>Beautiful morning</p>"
            }]
        })

    });

我的页面上有一个 id 为 dynamic 的按钮，但是我无法加载灯箱。

<button class="btn btn-success btn-lg mrb50" id="dynamic">Launch Gallery
                             </button>

我已经尝试将脚本放在页面的头部和主体中，但我无法将它放到运行。如有任何建议，我们将不胜感激。

Answer 1

使用

$('#dynamic').click(function() {

而不是

 $('.#dynamic').on('click', function() {

将图像动态加载到灯箱中

Loading images into a lightbox dynamically

html

javascript

css

jquery

lightbox