Modern and Flexible jQuery Lightbox Plugin - Vanillabox

Vanillabox is a simple jQuery plugin for creating clean and skinable lightbox effects with a little bit codes.

Features:

• Small and easy to use
• Supports images, grouped images, web page, iframe, etc
• Keyboard and arrows navigation
• Closeable fullscreen overlay
• Flexible and responsive design for desktop and mobile
• Free for personal and commercial use.
• 4 pre-defined themes: bitter, bitter frame, sweet and sweet frame

Basic Usage:

1. Include the jQuery javascript library and jQuery Vanillabox plugin on your web page

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="vanillabox/vanillabox.js"></script>

2. Include a theme css file on the web page

<link rel="stylesheet" href="vanillabox/theme/bitter/vanillabox.css">

3. Create a group of images

<ul id="grouped-image-list">
<li><a href="1.jpg" title="Title 1">Image 1</a></li>
<li><a href="2.jpg" title="Title 2">Image 2</a></li>
<li><a href="3.jpg" title="Title 3">Image 3</a></li>
<li><a href="4.jpg" title="Title 4">Image 4</a></li>
...
</ul>

4. The javascript. (With default options)

$('#grouped-image-list a').vanillabox();

5. Options

$('#grouped-image-list a').vanillabox({
    animation: 'default', // Animation type. Set 'none' to disable animation.
    closeButton: false, // Visibility of a close button. If true, a mask will be unclickable.
    keyboard: true, // If false, keyboard operations will be disabled.
    loop: false, // If true, grouped images will become a continuous loop.
    preferredWidth: 800, // Used when a content doesn't have fixed width (e.g. iframe)
    preferredHeight: 600, // Used when a content doesn't have fixed height (e.g. iframe)
    repositionOnScroll: false, // If true, reposition on scroll will be enabled.
    type: 'image', // Type of contents. Set 'iframe' to show an external webpage.
    adjustToWindow: both, // 'both', 'horizontal', 'vertical', 'none'. A direction to fit a large content to the window bounding rectangle.
    grouping: true // If false, content grouping will be disabled.
});

Basic Usage:

v0.1.7 (2015-10-27)

• Fixed iframe content that requires fullscreen
• Adopted modern JavaScript syntax

2015-10-26

• Add 'allowfullscreen' attribute to iframe element

2014-05-31

• Add 'grouping' option

2014-05-22

• Add 'dispose' option and fix related bugs

v0.1.4 (2013-12-13)

• Add adjustToWindow option

v0.1.1 (2013-12-01)

• Fixed a bug of event handling

---

This awesome jQuery plugin is developed by cocopon. For more Advanced Usages, please check the demo page or visit the official website.