jQuery пользовательская галерея изображений логика

Question

Я попытался настроить colorbox на this page, чтобы на главном экране изображения запускался colorbox, но нажатие любого из пальцев просто меняет изображение на основной экран. Это прекрасно работает, но одна проблема с niggling лучше всего обрабатывать индексированием/нумерацией - поскольку я не хочу, чтобы одно и то же изображение дважды отображалось в группе изображений в лайтбоксе, и я также хочу, чтобы отображался правильный индекс изображения и для последовательность, соответствующая последовательности миниатюр. Если бы кто-нибудь мог понять, как улучшить то, что у меня есть, это будет здорово.

JS настоящее время у меня есть:

$j(document).ready(function(e) { 

     function initColorbox() { 
      $j(".product-gallery").colorbox({ 
       rel : "product-gallery", 
       current : function() { 
        var currImg = $j(this).attr("href"); 
        // Grab basename, as initial main image url can differ from corresponding thumb url 
        var baseName = currImg.replace(/^.*\/|\.[^.]*$/g, ''); 
        var pos; 
        var total = $j(".more-product-views li a").length; 
        // Check index by searching for filename in list items 
        $j(".more-product-views li a").each(function() { 
         if ($j(this).attr("href").indexOf(baseName) != -1) { 
          pos = $j(this).parent().index(); 
         } 
        }); 

        return "" + (pos + 1) + " of " + total; 
       }, 
       onOpen : updateGallery, 
       onComplete : function() { 
        $j("#cboxTitle").hide(); 
       } 
      }); 
     } 

     function updateGallery() { 
      // Remove main product image's corresponding thumb from colorbox group to prevent duplication 
      var mainProdImg = $j(".main-prod-img").attr("href"); 

      // Grab basename, as initial main image url can differ from corresponding thumb url 
      var mainProdBaseName = mainProdImg.replace(/^.*\/|\.[^.]*$/g, ''); 

      $j(".more-product-views li a").each(function() { 
       if ($j(this).attr("href").indexOf(mainProdBaseName) != -1) { 
        $j(this).removeClass("product-gallery"); 
       } else { 
        $j(this).addClass("product-gallery"); 
       } 
      }); 

      // Re-init gallery 
      initColorbox(); 
     } 

     initColorbox(); 
     updateGallery(); 

     $j(".prod-more-view").click(function() { 
      var imgFull = $j(this).attr("href"); 
      $j(".product-image a").attr("href", imgFull); 
      $j(".product-image img").attr("src", imgFull); 
      return false; 
     }); 
    }); 

Answer 1

вы можете инициализировать ColorBox и использовать .click из ".product-галерея", как они делают на colorboxFAQ

var $gallery = $("a[rel=gallery]").colorbox(); 
$("a#openGallery").click(function(e){ 
    e.preventDefault(); 
    $gallery.eq(0).click(); 
});  

к измените «.main-prod-img», когда вы нажимаете на «.product-gallery» и запускаете только цветную кнопку при нажатии «.main-prod-img», вам нужно проверить event.originalEvent, если она не определена то вы возвращаете false

var $j = jQuery.noConflict(); 
$j(document).ready(function(e) { 
    //Create the colorbox 
    var $gallery = $j(".product-gallery").colorbox({ 
     rel:"product-gallery", 
     onComplete : function() { 
      $j("#cboxTitle").hide(); 
     } 
    }); 
    //open colorbox on the right image 
    $j(".main-prod-img").click(function(e){ 
     e.preventDefault(); 
     var currImg = $j(this).attr("href"); 
     var baseName = currImg.replace(/^.*\/|\.[^.]*$/g, ''); 
     var pos; 
     var total = $j(".more-product-views li a").length; 
     $j(".more-product-views li a").each(function() { 
      if ($j(this).attr("href").indexOf(baseName) != -1) { 
       pos = $j(this).parent().index(); 
      } 
     }); 
     $gallery.eq(pos).click(); 
    }); 
    //change .main-prod-img src if e.originalEvent is not undefined or open the color box 
    $gallery.click(function(e) { 
     var imgFull = $j(this).attr("href"); 
     $j(".product-image a").attr("href", imgFull); 
     $j(".product-image img").attr("src", imgFull); 
     if(e.originalEvent){ 
      return false; 
     } 
    }); 
});   

на $ j (". Main-prod-img"). Вам нужно искать индекс изображения в элементах списка и запускать правильную «.product-gallery», вот так вот: $ gallery.eq (позы) .click();
HTML-

<div class="wrapper"> 
    <div class="product-img-box"> 
     <p class="product-image product-image-zoom"> 
      <a href="ohoopee3.jpg" class="main-prod-img"><img src="ohoopee3.jpg"></a> 
     </p> 
     <div class="more-views"> 
      <ul class="more-product-views"> 
       <li> 
        <a href="ohoopee3.jpg" class="prod-more-view cboxElement product-gallery"> <img src="ohoopee3.jpg" width="56" height="56"></a> 
       </li> 
       <li> 
        <a href="ohoopee2.jpg" class="product-gallery prod-more-view cboxElement"> <img src="ohoopee2.jpg" width="56" height="56"></a> 
       </li> 
       <li> 
        <a href="ohoopee1.jpg" class="product-gallery prod-more-view cboxElement"> <img src="ohoopee1.jpg" width="56" height="56"></a> 
       </li> 
       <li> 
       <a href="marylou.jpg" class="product-gallery prod-more-view cboxElement"> <img src="marylou.jpg" width="56" height="56"></a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>  

http://jsfiddle.net/bq2fW/