我的网站主题产品页面的图片库默认是使用Elevatzoom，将鼠标悬停以缩放照片。

shop.designerfans.com.au。 test.designerfans.com.au

现在，我想在Popup图片库中添加一个OnClick属性。（使用默认的opencart大型pop）。现在的问题是，无法正确捕捉图库照片的图像。 添加了以下javascript：

$('.imgallery').magnificPopup({
    //delegate: 'a',type: 'image',closeonContentClick: true,closeBtnInside: true,gallery: { enabled: true },//callbacks:{},mainClass: 'mfp-with-zoom mfp-img-mobile',image: {
    verticalFit: true,titleSrc: function(item) {
        return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
        }
    },zoom: {
        enabled: false
    }
});

.twig html元素：

<div class="thumbnails">
            <a class="thumbnail" title="{{ heading_title }}"/>

            <!--<a class="thumbnail" title="{{ heading_title }}"/>-->

                <img data-zoom-image="{{ popup }}" src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}"/>
                <!-- class="with-caption image-link" href="{{ thumb }} -->

            </a>
        </div>          
        {% if images %}
            <div id="gallery_01" class="thumbnails-additional owl-carousel owl-theme">
                <a style="display: none" href="#" class="thumbnail current-additional" data-image="{{ thumb }}" data-zoom-image="{{ popup }}"  title="{{ heading_title }}">
                    <img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}"/>
                </a>
                {% for image in images %}
                <a style="display: none" href="#" class="thumbnail" data-image="{{ image.thumb }}" data-zoom-image="{{ image.popup }}" title="{{ heading_title }}"/>
                    <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" href="{{ image.thumb }}" class="imgallery"/> <!-- href="{{ image.thumb }}" class="imgallery" -->
                </a>
                {% endfor %}
            </div>

我的问题是，如何将悬停属性更改为OnClick弹出窗口是最好的方法？ 请随时告诉我是否有任何误会，