Hello. There is a slider block with images:
<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> To zoom in on images, I screwed Fancybox, which has a built-in "feature" of displaying the number of images in the style of dots (dotted navigation), working with the help of functions on JS - addLinks () and 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(); } Navigation elements are displayed, but the problem is this: images 3, and these elements 7. They are clickable, the images are switched, but repeated two or three times. Also, when opening the first image, the third navigation element becomes active, and not the first one. If I understood correctly, then the problem lies precisely in this nesting of images into different blocks.
Please tell me how to rewrite the function code so that the navigation elements with this nesting structure work as it should, even if there are more images.
