<h2>fancyBox - Images</h2>

<h3>Single image</h3>

<p>
  Add a <code>data-fancybox</code> attribute to any image link to enable fancyBox.
</p>

<p>
  <a href="https://farm4.staticflickr.com/3953/15594397982_477385f90d_b_d.jpg" data-fancybox>
    <img src="https://farm4.staticflickr.com/3953/15594397982_477385f90d_m_d.jpg" />
  </a>
</p>


<h3>Image gallery</h3>

<p>
  Galleries are created by adding the same <code>data-fancybox</code> attribute value.
</p>

<p>
  <a href="https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg" data-fancybox="images">
      <img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" />
  </a>

  <a href="https://c2.staticflickr.com/6/5499/30972532232_051e1dc57e_h.jpg" data-fancybox="images">
      <img src="https://c2.staticflickr.com/6/5499/30972532232_e9a298a0c5_m.jpg" />
  </a>

  <a href="https://c1.staticflickr.com/9/8021/29345513551_0c565462d8_k.jpg" data-fancybox="images">
      <img src="https://c1.staticflickr.com/9/8021/29345513551_16024a89e3_m.jpg" />
  </a>
  
</p>


<h3>Gallery with one preview image</h3>

<p>
  To show only one or a few images but have a large gallery, simply hide the rest of the links. <br />
  Optionally, use <code>data-thumb</code> for thumbnail image.
</p>
<p>
    <a href="https://c1.staticflickr.com/1/357/31876784275_12286240d4_h.jpg" data-fancybox="images-single">
      <img src="https://c1.staticflickr.com/1/357/31876784275_fbc9696913_m.jpg" />
    </a>
</p>

<div style="display: none;">
  
  <a href="https://farm3.staticflickr.com/2947/33594572585_b48eba935b_k_d.jpg" data-fancybox="images-single"
     data-thumb="https://farm3.staticflickr.com/2947/33594572585_46ca00f3a5_m_d.jpg"></a>
  
  <a href="https://farm3.staticflickr.com/2859/33395734202_522f9d8efd_k_d.jpg" data-fancybox="images-single"
     data-thumb="https://farm3.staticflickr.com/2859/33395734202_15a81c4ef3_m_d.jpg"></a>
  
</div>