如何将花式盒转换为花式盒画廊？

Question

我创建了 this 网站并使用花式框来展示具有效果的图像。我想将此图像转换为图片库。我网站上的图片被放入这样的代码中：

<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,
    });

this 中存在花式盒子画廊的示例。我想创建一个像这样的图片库。如何做到这一点？

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>

如何将花式盒转换为花式盒画廊？

How to convert fancy box to fancy box gallery?

html

css

jquery

image-gallery

fancybox