在PrettyPhoto中顯示多個圖像

Question

我正在建設一個網站，並在其中一個頁面上展示一些圖像。我認爲prettyPhoto看起來不錯，並決定使用它。

現在我在引導中有一個方框'box'，共有2個col-md-4行（共6個）。每個圖像都有一個懸停狀態，懸停狀態發生變化，顯示一個圖標點擊，並從此處打開prettyPhoto。

我不知道如何給文檔添加多張圖片到prettyPhoto，但是在他們的文檔中有它的例子，我只是沒有任何運氣來實現它們。

這裏是我的代碼

HTML

<div class="row centered"> 
      <div class="col-md-4 portfolio-item web-design"> 
      <div class="he-wrap tpl6"> 
       <img src="images/portfolio-2/crate-of-california.jpg" height="450px" width="600px" class="img-responsive" alt=""> 
        <div class="he-view"> 
        <div class="bg a0" data-animate="fadeIn"> 
         <h3 class="a1" data-animate="fadeInDown">Crate of California</h3> 
         <a data-rel="prettyPhoto[gallery1]" href="images/portfolio-2/crate-of-california.jpg" width="600" height="486" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a> 
        </div><!-- he bg --> 
       </div><!-- he view -->  
      </div><!-- he wrap --> 
      </div> 

JS

(function($) { 
// prettyPhoto 
    jQuery(document).ready(function(){ 
     jQuery('a[data-gal]').each(function() { 
      jQuery(this).attr('rel', jQuery(this).data('gal')); 
     });  
     jQuery("a[data-rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:false,overlay_gallery: false,social_tools:false,deeplinking:false,allow_resize:true}); 
    });  
})(jQuery); 

如果需要的話，我可以張貼的CSS，但大部分沒有任何與問題。

有誰知道我怎麼能用prettyPhoto顯示每個圖像的多個圖像（畫廊）？任何幫助，將不勝感激。

Answer 1

所以我得到了這個想法，該網站上的文檔並不是很好，我花了幾個小時才弄明白，所以希望有人得到一些用處。

基本上，我試圖爲我的2x3行中的6個圖像中的每一個顯示一個圖像庫。代碼結束了;

HTML

<div class="col-md-4 portfolio-item web-design"> 
      <div class="he-wrap tpl6"> 
       <img src="images/portfolio-2/kenneth-cole.jpg" height="450px" width="600px" class="img-responsive" alt=""> 
        <div class="he-view"> 
        <div class="bg a0" data-animate="fadeIn"> 
         <h3 class="a1" data-animate="fadeInDown">Kenneth Cole</h3> 
         <a rel="prettyPhoto[gallery2]" href="images/portfolio-2/kenneth-cole.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a> 
         <a href="images/portfolio-images/kennethcole2.png" class="lightbox-image lightbox-hide" rel="prettyPhoto[gallery2]" title="Another Title 2"></a> 
         <a href="images/portfolio-images/kennethcole3.png" class="lightbox-image lightbox-hide" rel="prettyPhoto[gallery2]" title="Another Title 2"></a> 
         <a href="images/portfolio-images/kennethcole4.png" class="lightbox-image lightbox-hide" rel="prettyPhoto[gallery2]" title="Another Title 2"></a> 
        </div><!-- he bg --> 
       </div><!-- he view -->  
      </div><!-- he wrap --> 
      </div> 



     ..... 
     <!-- beneath your main content, before your closing body tag 
the social tools (twitter and facebook sharing) are in there by default, so this takes it off --> 
     <script type="text/javascript" charset="utf-8"> 
      $(document).ready(function(){ 
       $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''}); 
      }); 
     </script> 
     </body> 

基本上你只需要確保你的「扳機」是rel=prettyPhoto，你可以在每個格中的多者。 prettyPhoto有助手和按鈕，一旦你得到多個圖像顯示。