First, download the latest version of Vanillabox from the official page.
Unzip an archive and copy vanillabox
directory to your project.
+ doc LICENSE.txt README.txt + vanillabox | + theme | jquery.vanillabox-#.#.#.min.js | jquery.vanillabox.js
Add required tags inside head
element in your page.
<link rel="stylesheet" href="vanillabox/theme/bitter/vanillabox.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="vanillabox/vanillabox-#.#.#.min.js"></script>
Write code, and setup an image gallery.
<script type="text/javascript"> $(document).ready(function() { $('selector-for-image-elements').vanillabox(); }); </script>
If you don't know how to write a jQuery selector, see the official document.
If you want to customize a behavior, see demo page for available options.