2014-01-21 27 views
1

有圖像的兩組:一個彩盒的兩組圖像

<div class="gallery1"> 
<p><a href="image1.jpg" class="group1" /><img src="small/image1.jpg" alt="" /></a></p> 
<p><a href="image2.jpg" class="group1" /><img src="small/image3.jpg" alt="" /></a></p> 
<p><a href="image3.jpg" class="group1" /><img src="small/image3.jpg" alt="" /></a></p> 
</div> 

<div class="gallery2"> 
<p><a href="image4.jpg" class="group2" /><img src="small/image4.jpg" alt="" /></a></p> 
<p><a href="image5.jpg" class="group2" /><img src="small/image5.jpg" alt="" /></a></p> 
<p><a href="image6.jpg" class="group2" /><img src="small/image6.jpg" alt="" /></a></p> 
</div> 
  • 有沒有爲每個組在同一時間啓動和運行一個彩盒的方式,但沒有增加兩個彩盒<script></script>組在<head></head>?像有一些變量,而不是一個選擇器jQuery('a.group1')。colorbox({rel:'group1'});?

更新1

我發現它是如何使用一個變量的類名:

<script> 
    jQuery(document).ready(function(){ 
    jQuery("a").click(function(){ 
     var myclassname = $(this).attr('class'); 
     alert('a.'+myclassname); 
     jQuery('a.'+myclassname).colorbox({rel:'myclassname'}); 
    }); 
    }); 
</script> 

但還是問題沒有解決。由於腳本的功能是這樣的:

  • 一個新加載的頁面:一組圖像(在其中「A」標記)上點擊 - 彩盒啓動並顯示在一系列的相應組的所有圖像。正如它應該的那樣。

  • 但是,如果你繼續在同一頁面無需重新加載,點擊另一組圖像(在其中「A」標記),彩盒啓動並顯示了一系列相應的組所有圖像的所有圖片先前點擊過的羣組。因爲它不希望。

看來Colorbox必須以某種方式在每次啓動/關閉porcess後被刪除。所以下一次啓動會重新開始,就像在新加載的頁面上一樣。

這是如何實現的?或者也許還有其他方法?

回答

1

你需要這樣的東西?

<a href="image1" rel="group1" class="gallery"> 
<img src="image1"> 
</a> 
<a href="image2" rel="group1" class="gallery"> 
<img src="image2"> 
</a> 

<a href="image3" rel="group2" class="gallery"> 
<img src="image1"> 
</a> 
<a href="image4" rel="group2" class="gallery"> 
<img src="image2"> 
</a> 

<script> 
$(".gallery").colorbox(); 
</script> 

注重REL在這個例子中,A HREF標籤 屬性有會是2個不同勢畫廊組