„Eule Karussell“ und „colorbox“ slide Aktion Ausgabe

Question

Ich würde Hilfe brauchen eine Diashow Problem mit colorbox über und owlcarrousel

ich die Bilder in den „colorbox“ Modul-Fenster Dia viele Male gemacht. Wenn ich nach dem Schließen des Modulfensters versuche, die Bilder zu überprüfen, sehe ich, dass es anders aussieht und nur die Hälfte der Bilder angezeigt wird. Um es einfacher zu verstehen, habe ich einen Film des Problems auf YouTube hochgeladen.

YouTube: https://youtu.be/uCOkgeoPSh8

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

Auch ich folgte dem Rat in den unten stehenden Link, I „unbind“ im Skript, aber es handelt sich nicht bewegen. Wie kann ich dieses Problem beheben?

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

Sie müssen returnFocus: false hinzufügen Optionen ColorBox wie so:

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

Der Fokus Rückkehr irgendwie die Eule Schieber verwirrt, die in der Tat unerwartet ist.