如何将花哨盒转换成花哨盒画廊？

Question

我创建这网站，并使用花式框显示图像的效果。我要把这些图像转换成图片库。我在网站上的图片被放置在代码中，如下所示：

<div class="col-md-4   to-animate popup text-center fadeInUp animated">
                    <br>
                    <a href="images/best-Exporter-91.jpg" class="fancybox">
                        <img src="images/best-Exporter-91.jpg" class="center-block img img-responsive"></a>
                    <h4 class="center-block">Best Exporter Award 2012</h4>
                </div>

我使用这个jquery foe运行花式盒：

  /***************** Initiate Fancybox ******************/

    $('.fancybox').fancybox({
        padding: 4,
    });

在这中存在一个花式盒图库的示例。我想要创建一个像这样的图片库。怎么做？

​

​

Answer 1

尝试使用rel="gallery1"对图像进行分组：

<div class="col-md-4   to-animate popup text-center fadeInUp animated">
   <br>
   <a href="images/best-Exporter-91.jpg" class="fancybox" rel="gallery1">
   <img src="images/best-Exporter-91.jpg" class="center-block img img-responsive"></a>
   <h4 class="center-block">Best Exporter Award 2012</h4>

   <br>
   <a href="images/best-Exporter-91.jpg" class="fancybox" rel="gallery1">
   <img src="images/best-Exporter-91.jpg" class="center-block img img-responsive"></a>
   <h4 class="center-block">Best Exporter Award 2012</h4>

   <br>
   <a href="images/best-Exporter-91.jpg" class="fancybox" rel="gallery1">
   <img src="images/best-Exporter-91.jpg" class="center-block img img-responsive"></a>
   <h4 class="center-block">Best Exporter Award 2012</h4>
</div>