How to convert fancy box to fancy box gallery?

I create this website and use fancy box for show images with effect. I want convert this images to image gallery . My images in my website placed into codes such as 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>

I use this jquery foe run fancy box :

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

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

Exist a sample for fancy box gallery in this. I want create a image gallery such as it. How to do this?

Solution

Try using rel="gallery1" to group the images:

<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>