Start by including the ViewBox CSS and Javascript
<link rel="stylesheet" href="viewbox.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.viewbox.min.js"></script>
HTML Example
Optional: Add a title attribute if you want to show a caption.
<a href="images/i1.jpg" class="image-link"> <img src="images/i1-thumb.jpg" alt=""> </a> <a href="images/i2.jpg" class="image-link" title="Image Title"> <img src="images/i2-thumb.jpg" alt=""> </a> <a href="images/i3.jpg" class="image-link"> <img src="images/i3-thumb.jpg" alt=""> </a>
Initializing ViewBox
Apply viewbox()
method to a set of image links.
$(function(){ $('.image-link').viewbox(); });
Options
These options are default.
$(function(){ $('.image-link').viewbox({ setTitle: true, margin: 20, resizeDuration: 300, openDuration: 200, closeDuration: 200, closeButton: true, navButtons: true, closeOnSideClick: true, nextOnContentClick: true }); });