###前提・実現したいこと
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>
###補足情報
jquery-1.10.2.min.js
Owl Carousel
Colorbox
回答2件
あなたの回答
tips
プレビュー