Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

venobox

nicolafranchini9.8kMIT2.1.8

Responsive javascript modal window plugin, touch swipe gallery

lightbox, modal, responsive, plugin, popup, gallery, window, no-jquery, vanilla, touch, swipe

readme

VenoBox

venobox (latest) venobox (downloads)

Responsive modal window javaScript plugin, touch swipe gallery

Just another responsive lightbox plugin, suitable for images, inline contents, iFrames, videos.

The big difference compared to many others plugins is that VenoBox calculates the max width of the image displayed and preserves its height if is taller than the window (so in small devices you can scroll down the content, avoiding vertical microscopic resized images).

Demo: https://veno.es/venobox/

Quick start

Install

This package can be installed with:

  • npm: npm install venobox
  • composer: composer require nicolafranchini/venobox

Static HTML

Download the latest release or get the sources from jsDelivr

Put the required stylesheet into your <head> to load our CSS:

<link rel="stylesheet" href="venobox/dist/venobox.min.css" />

Include the script near the end of your pages, right before the closing </body> tag:

<script src="venobox/dist/venobox.min.js"></script>

Usage

Insert one or more links with a custom class

<a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>

Initialize the plugin and your VenoBox is ready for all the selected links.

new VenoBox({
  selector: '.venobox'
});

Documentation

The full documentation is available at https://veno.es/venobox/

License: released under the MIT License

changelog

Changelog

[2.1.8]

  • Fix: Wrong format plugin options jQuery #195
  • Fix: maxWidth does not work correctly due to overwriting width in styles #193
  • Update: Moved DOM initializations to object creation #196

[2.1.7]

  • Update: New options initialScale and transitionSpeed #191

[2.1.6]

  • Update: use /youtube-nocookie.com/embed/ for all YouTube videos

[2.1.5]

  • Update: return false after function execution for onPostOpen and onPreClose #190

[2.1.4]

  • Fix: Enable Wave preloader

[2.1.3]

  • Update: Max width proportional to aspect ratio

[2.1.2]

  • Update: Global fitView option can be set also as data attribute data-fitview to specific links

[2.1.1]

  • Fix: preload timing sync for gallery navigation

[2.1.0]

  • Fix: Random flickering during gallery navigation with IOS

[2.0.9]

  • Fix: Swiping doesn't work on Android devices #184

[2.0.8]

  • Fix: overlayClose does not work #178
  • Update: Video Handling - Unknown Extension Types #174

[2.0.7]

  • New option: fitView resizes the images to fit within the viewport
  • Fix: minimum 3 items to activate infinite gallery

[2.0.6]

  • Update: composer version

[2.0.5]

  • New option: focusItem to focus current element on window close
  • Update: youtube-nocookie support

[2.0.4]

  • New option: customClass
  • New attribute: data-customclass (overrides global option customClass)
  • New attribute: data-border (overrides global option border)
  • New: option ratio: 'full' for a 100% viewport height of iFrame and video content

[2.0.3]

  • New: ECMAScript module import VenoBox from './src/venobox.esm.js'

[2.0.2]

  • New: Fast gallery navigation
  • Update: default maxWidth: 100%
  • Update: minor css fixes

[2.0.1]

  • Update: 'share' option boolean.
  • Deprecated: facebook, twitter, linkedin, pinterest share
  • New share tools: Copy link, Navigator share, Download
  • New: option navKeyboard
  • New: option navTouch
  • Update: minor fixes

[2.0.0]

  • Dropped jQuery dependency.
  • Async gallery navigation and items loading
  • New: support local videos (mp4, webm, ogg)
  • Update: more preload spinners

Check Migrating to VenoBox 2.

[1.9.4]

  • New: navSpeed option

[1.9.3]

  • New: noArrows option

[1.9.2]

  • Update: Remove focus from link to avoid multiple calls with enter key

[1.9.1]

  • Fix: Error thrown in safari #147

[v1.9.0]

  • Update: reset content scrollTop on change

[v1.8.9]

  • New share buttons available options: ['facebook', 'twitter', 'linkedin', 'pinterest', 'download']

[v1.8.8]

  • Hide infinigall navigation if has only 1 item
  • Hide numeratio if has only 1 item
  • Higher z-index for vbox-overlay

[v1.8.7]

  • Percentual window padding
  • Minified CSS

[v1.8.6]

  • Namespaced some css classes #133

[v1.8.5]

  • New callback: cb_content_loaded(obj, gallIndex, thenext, theprev)

[v1.8.4]

  • Scrollbar dissappears behind .vbox-overlay background (Chrome) #109
  • Overlay close does not work on iPad, and full overlay is not clickable #115
  • Allow autoplay in Chrome - attribute needed for iframe #121

[v1.8.3]

  • New spinkit preloaders #106
  • Hide spinner when popup has been loaded #101
  • Add support of customized Gallery items directly on the JavaScript init. #120

[v1.8.2]

  • Fix: infinigall & nextok = false #98

[v1.8.1]

  • update: use strict - thanks @shivarajnaidu
  • Fix: fade in overlay

[v1.8.0

  • New: touch swipe support
  • New methods: call close, next or previous item outside the plugin
  • Update: new callbacks

[v1.7.3]

  • Update: brought back data-gall instead of data-vbgall

[v1.7.2]

  • Fix: gallery navigation with different title attributes
  • Fix: position absolute for preloader to avoid scroll overlay
  • Update: .json files

[v1.7.1]

  • New: options for title and navigation elements: position and colors
  • New: pure css3 preloaders
  • New: 5 Callbacks added - thanks @garyee
  • New: video autoplay as option - thanks @codibit
  • Update: data-type changed to data-vbtype
  • Update: css3 next - prev arrows
  • Update: iframe and inline windows with default height realtive to viewport
  • Update: Removed deprecated functions for jQuery 3
  • Update: new youtube parser to convert more urls
  • Update: video format to 16:9
  • Update: panel shadow
  • Fix: wait to loading all images inside ajax modal
  • Fix: https:// for video iframes