Modern and Flexible jQuery Lightbox Plugin - Vanillabox
File Size: | 125 KB |
---|---|
Views Total: | 3527 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.