JQuery - Как совместить Lightbox2 и Magnify? - PullRequest
Новая
       20

JQuery - Как совместить Lightbox2 и Magnify?

0 голосов
/ 08 марта 2019

Я пытаюсь создать карусель 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, включив в него класс «zoom» для увеличения в классах «lb-image» и / или «lightbox» и ничего.

Любая помощь приветствуется.

...