Здравствуйте. Есть блок слайдера с изображениями:
<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. Они кликабельны, изображения переключаются, но повторяются по два-три раза. Также при открытии первого изображения становится активен третий элемент навигации, а не первый. Если я правильно понял, то проблема заключается именно в такой вложенности изображений в разные блоки.
Подскажите, пожалуйста, каким образом переписать код функции так, чтобы элементы навигации при такой структуре вложенности работали как надо, даже если изображений будет больше.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Идея такая: фильтром выбрать из базы несколько элементов (вопросов к тесту)Далее надо выводить эти элементы по одному
столкнулся с проблемой, в общем на сайте в body должен быть отключен скролл, а у левого блока он должен присутствовать, все работает, но только...