jQuery プラグインが別のプラグインの動作に影響する件です。
前提・実現したいこと
1ページ内でOwlCarousel と Colorbox を使用しています。
そして、「Zoom」ボタンをクリックし 「Colorbox」を操作したあと、ポップアップ・ウィンドウを閉じたら、「OwlCarousel」のメイン画像部分が反復されます。
「Colorbox」を操作したあと、「OwlCarousel」のメイン画像部分が反復しないようにするにはどうすればよろしいでしょうか。
ご教授の程、よろしくお願いします。
確認用のURL
http://www.ks-clothing.click/women/tops-blouses/black-nolita-cami.html
該当のソースコード
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<div id="sync1" class="owl-carousel">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<div class="item">
<div class="cloud-zoom" rel="position: 'inside' , showTitle: false" href="<?php echo $this->getGalleryImageUrl($_image); ?>">
<img src="<?php echo $this->getGalleryImageUrl($_image); ?>" alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>" title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />
</div>
<a class="gallery" href="<?php echo $this->getGalleryImageUrl($_image); ?>">ZOOM</a>
</div>
<?php endif; ?>
<?php $i++; endforeach; ?>
</div>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div id="sync2" class="owl-carousel">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<div class="item">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</div>
<?php endif; ?>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($){
$(function(){
$(".gallery").colorbox({
rel:'slideshow',
maxWidth:"100%",
maxHeight:"100%",
opacity: 0.5
});
var sync1 = $("#sync1");
var sync2 = $("#sync2");
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
navigation: true,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
});
sync2.owlCarousel({
items : 15,
itemsDesktop : [1199,10],
itemsDesktopSmall : [979,10],
itemsTablet : [768,8],
itemsMobile : [479,4],
pagination:false,
responsiveRefreshRate : 100,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el){
var current = this.currentItem;
$("#sync2")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($("#sync2").data("owlCarousel") !== undefined){
center(current)
}
}
$("#sync2").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});
function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+2)
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}
}
});
});
//]]>
</script>