Lightbox

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

Examples:

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

Code:

1. Add css file:

<link href="//www.lib.umd.edu/unify-1.7/assets/plugins/fancybox/source/jquery.fancybox.css" 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="//www.lib.umd.edu/unify-1.7/assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script><!-- JS Customization --><!-- JS Page Level --><script type="text/javascript" src="//www.lib.umd.edu/unify-1.7/assets/js/plugins/fancy-box.js"></script><script type="text/javascript">
    jQuery(document).ready(function() {
        App.init();
        FancyBox.initFancybox();
        });
</script>

Back to Top