« carrousel de hibou » et faites glisser l'action question « colorbox »

Question

je aurais besoin d'aide au sujet d'un problème de diaporama avec colorbox et owlcarrousel

J'ai fait les images dans la fenêtre du module « colorbox » slide à plusieurs reprises. Après avoir fait cela et fermé la fenêtre du module, si j'essaie de vérifier les images, je peux voir que c'est devenu différent et que seulement la moitié des images est affichée. Pour faciliter la compréhension, j'ai téléchargé un film du problème sur YouTube.

YouTube: https://youtu.be/uCOkgeoPSh8

magasin: http://www.ks-clothing.click/men/tees-knits-and-polos/lexington-cardigan-sweater-479.html

En outre, j'ai suivi les conseils donnés dans le lien ci-dessous, je mets « unbind » dans le script, mais il ne bougeait pas. Comment pourrais-je résoudre ce problème?

stackoverflow: colorbox and preventdefault not working together?

<?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"> 
       <a class="gallery" href="<?php echo $this->getGalleryImageUrl($_image); ?>">Colorbox</a> 
<!--    <a 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()); ?>" /> 
<!--    </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(function ($) { 
     $("a.gallery").unbind('click').colorbox({ 
      rel:'slideshow', 
      transition:'none', 
      maxWidth:'100%', 
      maxHeight:"100%", 
      opacity: 0.5 
     }); 
    }); 
    //]]> 
</script> 

<script type="text/javascript"> 
    //<![CDATA[ 
    jQuery(function($) { 

      var sync1 = jQuery("#sync1"); 
      var sync2 = jQuery("#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; 
       jQuery("#sync2") 
        .find(".owl-item") 
        .removeClass("synced") 
        .eq(current) 
        .addClass("synced") 
       if(jQuery("#sync2").data("owlCarousel") !== undefined){ 
        center(current) 
       } 
      } 

      jQuery("#sync2").on("click", ".owl-item", function(e){ 
       e.preventDefault(); 
       var number = jQuery(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> 

Answer 1

Vous devez ajouter returnFocus: false à ColorBox des options comme ceci:

$("a.gallery").unbind('click').colorbox({ 
      rel:'slideshow', 
      transition:'none', 
      maxWidth:'100%', 
      maxHeight:"100%", 
      opacity: 0.5, 
      returnFocus: false 
     }); 

Le retour de mise au point embrouille en quelque sorte le curseur Owl, qui est en effet inattendu.