彩盒與畫廊

Question

我有一個小畫廊：

• 大圖
• 小大拇指底部

當拇指大的照片變化，OKE大的用戶點擊。

現在我已經在大照片上添加了Colorbox插件，所以當用戶點擊大照片時，他會看到一個較大的照片，這很有效。但是，當用戶第一次點擊一些拇指，然後他們點擊ColorBox的大圖加載，但不加載我添加的設置。

這裏是我的js：

$(function() { 
$("#wrapper #right #detail #photo #big #image a").colorbox({ 
    transition: 'elastic', 
    speed: 200, 
    opacity: 0.4, 
    scalePhotos : true, 
    maxWidth : '800px' 
}); 

$("#wrapper #right #detail #photo ul li .thumb").click(function() { 
    var image = $(this).attr("rel"); 
    $('#image').hide(); 
    $('#image').fadeIn('fast'); 
    $('#image').html('<a href="' + image + '" class="cboxElement" title=""><img src="' + image + '" alt="" /></a>'); 
    return false; 
}); 
}); 

和HTML：

<div id="photo"> 
<div id="big"><div id="image"><a href="gfx/detail/1.jpg"><img src="gfx/detail/1.jpg" border="0"/></a></div></div> 

<ul> 
    <li><a href="#" rel="gfx/detail/1.jpg" class="thumb"><img src="gfx/detail/1.jpg" alt="" /></a></li> 
    <li><a href="#" rel="gfx/detail/2.jpg" class="thumb"><img src="gfx/detail/2.jpg" alt="" /></a></li> 
    <li><a href="#" rel="gfx/detail/3.jpg" class="thumb"><img src="gfx/detail/3.jpg" alt="" /></a></li> 
</ul> 
</div> 

能somewone幫助我，讓顏色框加載設置？

Answer 1

$("#wrapper #right #detail #photo #big #image a") 
$("#wrapper #right #detail #photo ul li .thumb") 

沒有必要在這麼長的選擇器中，你失去了性能。 #是id選擇和id必須是唯一的，這就是爲什麼你可以刪除#wrapper #right #detail

您更換上附上顏色框選擇要素，問題在於在這個層面上，作爲解決方案，您可以綁定click。像這樣：

$('#image').on('click', 'a', function(e){ 
    e.preventDefault(); 
    $.colorbox({ 
     transition: 'elastic', 
     href: this.href, 
     speed: 200, 
     opacity: 0.4, 
     scalePhotos : true, 
     maxWidth : '800px' 
    }); 
});