Lightbox
Examples:
- Text link: Check my links
- Image link:
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>