Проблема отображения навигации Fancybox

443
10 февраля 2017, 02:35

Здравствуйте. Есть блок слайдера с изображениями:

<div class="owl-carousel owl-theme">
    <div class="item">
        <a href="1.jpg" class="fancybox" rel="group">
            <img src="1.jpg" alt="Изображение 1">
        </a>
    </div>
    <div class="item">
        <a href="2.jpg" class="fancybox" rel="group">
            <img src="2.jpg" alt="Изображение 2">
        </a>
    </div>
    <div class="item">
        <a href="3.jpg" class="fancybox" rel="group">
            <img src="3.jpg" alt="Изображение 3">
        </a>
    </div>
</div>

Для увеличения изображений по клику прикрутил Fancybox, в котором есть встроенная "фича" отображения количества изображений в стиле точек (dotted navigation), работающая с помощью функций на JS - addLinks() и removeLinks():

$(".fancybox").fancybox({
    nextEffect  : 'fade',
    prevEffect  : 'fade',
    padding     : 0,
    margin      : [15, 15, 40, 15],
    afterLoad   : addLinks,
    beforeClose : removeLinks
});
function addLinks() {
    var list = $("#links");
    if (!list.length) {    
        list = $('<ul id="links">');
        for (var i = 0; i < this.group.length; i++) {
            $('<li data-index="' + i + '"><label></label></li>').click(function() { $.fancybox.jumpto( $(this).data('index'));}).appendTo( list );
        }
        list.appendTo( 'body' );
    }
    list.find('li').removeClass('active').eq( this.index ).addClass('active');
}
function removeLinks() {
    $("#links").remove();    
}

Элементы навигации отображаются, но проблема вот в чём: изображения 3, а этих элементов 7. Они кликабельны, изображения переключаются, но повторяются по два-три раза. Также при открытии первого изображения становится активен третий элемент навигации, а не первый. Если я правильно понял, то проблема заключается именно в такой вложенности изображений в разные блоки.

Подскажите, пожалуйста, каким образом переписать код функции так, чтобы элементы навигации при такой структуре вложенности работали как надо, даже если изображений будет больше.

READ ALSO
input поле только для цифр html

input поле только для цифр html

Есть поле <input class="ss" type="text"> Вешаю на него событие:

397
Как выводить объекты Queryset&#39;а по одному?

Как выводить объекты Queryset'а по одному?

Идея такая: фильтром выбрать из базы несколько элементов (вопросов к тесту)Далее надо выводить эти элементы по одному

281
Определить верные координаты при клике SIGMA.JS

Определить верные координаты при клике SIGMA.JS

ЗдравствуйМне при клике на граф sigma

297
overflow и высота блока в %

overflow и высота блока в %

столкнулся с проблемой, в общем на сайте в body должен быть отключен скролл, а у левого блока он должен присутствовать, все работает, но только...

361