Skip to main content


Lightbox displays images and videos by filling the screen and dimming out the rest of the web page.


  1. Text link: Check my links
  2. Image link: Check my links


1. Add css file:

<link href="//" rel="stylesheet" />

Note: If you create multiple light-boxes on a page, you only need one set of the css code and Javascript. So you only do step #1 and #3 once but repeat step 2 many times.

2. Create a text or image hyperlink, link to an image, make sure to add class="fancybox img-hover-v1" inside the <a> tag. Fancybox create the popup box, img-hover-v1 create the zoom-in effect when mouse over the image hyper link (the thumbnail in this case).

For a text link: <a class="fancybox" href="link to lightbox image" rel="gallery" title="Image 1">Text link</a>

For an image link: <a class="fancybox img-hover-v1"  href="link to lightbox image " title="check my links"><img alt="Check my links" src="image you want to display as the link" /></a>

3. Add the following javascript

<script type="text/javascript" src="//"></script><!-- JS Customization --><!-- JS Page Level --><script type="text/javascript" src="//"></script><script type="text/javascript">
    jQuery(document).ready(function() {

Back to Top