jQuery-如何结合Lightbox2和Magnify?

时间:2019-03-08 04:39:44

标签: javascript jquery jquery-plugins lightbox2 magnify

我正在尝试制作一个lighbox2轮播,当用户在浏览器中看到模态图像时,他可以将图像悬停/抓取以应用放大镜头效果。但我能实现的全部工作都是在画廊上,而不是灯箱模式图片上。 插件: https://github.com/thdoan/magnify https://github.com/lokesh/lightbox2/

这是代码:

html / django

<div class="owl-carousel owl-theme" style="max-width: 950px; alignment: center">
    {% for img in imgz %}
        <a href="{{ img.filedocument__documentimage }}" class="zoom" data-lightbox="roadtrip" >
            <img src="{{ img.filedocument__documentimage }}"  style="width: 175px; height: 200px; border: 4px solid #ddd;
border-radius: 5px;
padding: 1px;
box-shadow: 2px 1px 5px #aaaaaa;"/>
        </a>
    {% endfor %}
</div>

JS相同文件:

<script src="{% static 'js/carousel.js' %}"></script>
<script src="{% static 'js/jquery.magnify.js' %}"></script>
<script src="{% static 'js/lightbox.js' %}"></script>
<script>
$(document).ready(function() {
    $('.zoom').magnify();
});
lightbox.option({
    'fitImagesInViewport': true,
    'wrapAround': true,
    'maxWidth': 800
})
</script>

我尝试修改lightbox.js文件,使其在“ lb-image”和/或“ lightbox”类中包含放大的“ zoom”类,而没有任何内容。

感谢您的帮助。

0 个答案:

没有答案