Modern Flexible jQuery Lightbox Plugin Vanillabox - Download Modern and Flexible jQuery Lightbox Plugin - Vanillabox

Download Modern and Flexible jQuery Lightbox Plugin – Vanillabox

By Posted on

This time I will share jQuery Plugin and tutorial about Modern and Flexible jQuery Lightbox Plugin – Vanillabox, hope it will help you in programming stack.

Modern Flexible jQuery Lightbox Plugin Vanillabox - Download Modern and Flexible jQuery Lightbox Plugin - Vanillabox
File Size: 125 KB
Views Total: 3295
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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

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

2. Include a theme css file on the web page

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

3. Create a group of images

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

4. The javascript. (With default options)

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

5. Options

view source
01 $('#grouped-image-list a').vanillabox({
02     animation: 'default', // <a href="https://www.jqueryscript.net/animation/">Animation</a> type. Set 'none' to disable animation.
03     closeButton: false, // Visibility of a close button. If true, a mask will be unclickable.
04     keyboard: true, // If false, keyboard operations will be disabled.
05     loop: false, // If true, grouped images will become a continuous loop.
06     preferredWidth: 800, // Used when a content doesn't have fixed width (e.g. iframe)
07     preferredHeight: 600, // Used when a content doesn't have fixed height (e.g. iframe)
08     repositionOn<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>: false, // If true, reposition on scroll will be enabled.
09     type: 'image', // Type of contents. Set 'iframe' to show an external webpage.
10     adjustToWindow: both, // 'both', 'horizontal', 'vertical', 'none'. A direction to fit a large content to the window bounding rectangle.
11     grouping: true // If false, content grouping will be disabled.
12 });

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.

source : jqueryscript.net

Related posts: