jQuery自定义图像库逻辑

Question

我试图定制colorbox this page，以便主图像显示启动colorbox，但点击任何拇指只是将图像交换到主图像显示。这是工作正常，但一个小问题最好处理索引/编号 - 因为我不希望相同的图像在灯箱图像组中出现两次，我也希望正确的图像索引显示和序列以对应于缩略图序列。如果任何人都能看到如何改善我现在拥有的伟大的事物。

的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

可以初始化的颜色框，并使用“产品画廊”的。点击像他们在colorboxFAQ

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

做当你点击“.product-gallery”时，更改“.main-prod-img”，只有当点击“.main-prod-img”时才会触发colorbox，如果它不是未定义的，你需要检查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; 
     } 
    }); 
});   

on $ j（“。main-prod-img”）。点击需要搜索列表项中图片的索引并触发右边的“.product-gallery”点击这个$ gallery.eq （POS）。单击（）;
的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/