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