在PrettyPhoto中显示多个图像

Displaying multiple images in PrettyPhoto

本文关键字：图像 显示 PrettyPhoto      更新时间：2023-09-26

我正在建一个网站，其中一个页面上有一个展示一些图片的部分。我觉得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在每张图片上显示多个图片（画廊）吗？如有任何帮助，我们将不胜感激。

所以我能够弄清楚这一点，网站上的文档一点都不好，我花了几个小时才弄清楚，所以希望有人能利用它。

基本上，我试图为我的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就会有助手和按钮。

相关文章：