Отображение нескольких изображений в PrettyPhoto

Question

Я создаю веб-сайт, и на одной из страниц есть раздел, чтобы показать некоторые изображения. Я думал, что prettyPhoto выглядит хорошо, и решил использовать его.

Прямо сейчас у меня есть квадратная «коробка» в бутстрапе с 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

Таким образом, я смог понять, что документация на сайте не очень хорошая, и мне потребовалось пару часов, чтобы понять, так что, надеюсь, кто-то может воспользоваться этим.

В основном, я пытался отобразить галерею изображений для каждого из 6 изображений в моих 2x3 строках. Код оказался;

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 есть помощники и кнопки, когда вы получаете несколько изображений.