Modern and Flexible jQuery Lightbox Plugin - Vanillabox

File Size: 125 KB
Views Total: 3490
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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=""></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>

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


  • Add 'allowfullscreen' attribute to iframe element


  • Add 'grouping' option


  • 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.