UPD.
У меня есть модалка (Fancybox) и слайдер (owl)
<div class="popupgallery_block" id="popupgallery_block" >
<div class="popupgallery js-gallery" >
<div class="row">
<div class="col col-md-12">
<div class="fancybox-title fancybox-title-inside-wrap"><?=$arResult["NAME"]?></div>
<div class="row">
<div class="col col-sm-9">
<div class="navigations">
<div class="around_changeit">
<div class="changeit">
<div class="owl-popupgallery_slider owl-carousel">
<?if($arResult["DETAIL_PICTURE"]["SRC"]!="" || $arResult["PREVIEW_PICTURE"]["SRC"]!=""):?>
<div class="slider__bestitem">
<img src="<?= $arResult["DETAIL_PICTURE"]["SRC"] ? $arResult["DETAIL_PICTURE"]["SRC"] : $arResult["PREVIEW_PICTURE"]["SRC"]?>" alt="" class="slider__item_img img-fluid">
</div>
<?endif;?>
<?if($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"]!=""):?>
<?foreach($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $arPhoto):?>
<div class="slider__bestitem">
<img src="<?=CFile::GetPath($arPhoto);?>" alt="" class="slider__item_img img-fluid">
</div>
<?endforeach;?>
<?endif;?>
</div>
</div>
</div>
</div>
</div>
<div class="col col-sm-3 fullright">
<div class="preview">
<?=$arResult["NAME"]?>
</div>
</div>
</div>
<div class="description"><?=$arResult["DETAIL_TEXT"]?></div>
</div>
</div>
</div>
</div>
Что должен делать скрипт:
- подставлять в dots превью слайдов.
На странице много слайдеров, и скрипт считает каждый. соответственно в превью подставляются слайды из других слайдеров на этой же странице.
Как я пытался:
function dots (){
$(document).ready(function(){
// 1) ASSIGN EACH 'DOT' A NUMBER
dotcount = 1;
$('.owl-dot').each(function() {
$(this).addClass( 'dotnumber' + dotcount);
$(this).attr('data-info', dotcount);
dotcount=dotcount+1;
console.log('complete');
});
// 2) ASSIGN EACH 'SLIDE' A NUMBER
slidecount = 1;
jQuery('.owl-item').not('.cloned').each(function() {
jQuery(this).addClass( 'slidenumber' + slidecount);
slidecount=slidecount+1;
});
// SYNC THE SLIDE NUMBER IMG TO ITS DOT COUNTERPART (E.G SLIDE 1 IMG TO DOT 1 BACKGROUND-IMAGE)
jQuery('.owl-dot').each(function() {
grab = jQuery(this).data('info');
slidegrab = jQuery('.slidenumber'+ grab +' img').attr('src');
console.log(slidegrab);
jQuery(this).css("background-image", "url("+slidegrab+")");
});
});
}
function dots2 (){
$(document).ready(function(){
// 1) ASSIGN EACH 'DOT' A NUMBER
dotcount = 1;
$('.owl-popupgallery_slider .owl-dot').each(function() {
$(this).addClass( 'dotnumber1' + dotcount);
$(this).attr('data-info', dotcount);
dotcount=dotcount+1;
console.log('complete');
});
// 2) ASSIGN EACH 'SLIDE' A NUMBER
slidecount = 1;
jQuery('.owl-item').not('.cloned').each(function() {
jQuery(this).addClass( 'slidenumber1' + slidecount);
slidecount=slidecount+1;
});
// SYNC THE SLIDE NUMBER IMG TO ITS DOT COUNTERPART (E.G SLIDE 1 IMG TO DOT 1 BACKGROUND-IMAGE)
jQuery('.owl-dot').each(function() {
grab = jQuery(this).data('info');
slidegrab = jQuery('.slidenumber1'+ grab +' img').attr('src');
console.log(slidegrab);
jQuery(this).css("background-image", "url("+slidegrab+")");
});
});
}
$(document).ready(function() {
dots2 ('.owl-popupgallery_slider');
$('#fancybox__gallery').fancybox({
helpers : {
title: {
titleShow: true,
type: 'inside',
position: 'top'
}
},
autoSize : true,
width: 1140,
height: 705,
afterShow: function() {
dots2 ('.owl-popupgallery_slider');
$('.owl-popupgallery_slider').owlCarousel({
items: 1,
loop: false,
dots: true,
nav: true,
autoplay: false,
margin:10
})
}
// 1) ASSIGN EACH 'DOT' A NUMBER
});
});
Соответственно dots для первого слайдера и dots2 для слайдера после открытия модалки. Но это не работает. Все так же считает слайды и точки для всех слайдеров на странице по очереди.
Простой
