我正在尝试制作一个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”类,而没有任何内容。
感谢您的帮助。