Responsive Multimedia Modal Plugin For jQuery - LiveBox

LiveBox is a simple yet robust jQuery plugin that helps you display text, images, html content and any other content types in a highly customizable, responsive modal popup.

More features:

• AJAX enabled.
• Supports iframes and Youtube videos.
• Custom fade in/out animations.
• Custom background overlay styles.
• Allows to preload images.
• Content loading spinner.
• Draggable and cacheable.

Basic usage:

1. Load the jQuery LiveBox plugin and other required resources in the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/livebox.js"></script>
<link rel="stylesheet" href="src/livebox.css">

2. Create a basic inline modal.

$.fn.livebox({
  type: 'html',
  content: 'This is a modal'
});

3. Create an image lightbox.

$.fn.livebox({
  type: 'image',
  content: '1.jpg'
});

4. Load modal content from a specific container within the document.

$.fn.livebox({
  type: 'selector',
  content: '#modalContent'
});

5. Loads data from an external data source via AJAX request.

$.fn.livebox({
  type: 'ajax',
  content: 'https://www.jqueryscript.net'
});

6. Display an Youtube video in the modal.

$.fn.livebox({
  type: 'youtube',
  content: 'yI2oS2hoL0k' // video id
});

7. Plugin's default configuration options.

// 'image'
// 'ajax'
// 'iframe'
// 'youtube'
// 'html'
// 'text'
// 'selector'
type: 'auto',

opacity: 0.6,

// animations
animation: true,
animationSpeed: 'fast',

width: 500,
height: 'auto',
minHeight: 20,
headerHeight: 35,

// 'left', 'right', 'out', 'none'
closeButton: 'right', 
closeOverlay: true,


// Allow to close lightbox by pressing Esc key
closeEsc: true,

// Customize background overlay
overlayColor: '#000000',

overflowx: 'auto',
overflowy: 'auto',

borderRadius: 10,

padding: 10,

noCache: false,
preloadImages: true,
shadow: true,

loaderShape: false,

headerNoHtml: true,
headerContent: '',
title: '',
content: '',

noExtraUi: false,

// For type `selector`
// If content element is hidden (display=none) it will be shown
// and reverted back to `none` when window is hidden
autoShowContentBlock: true,

contentScroll: true,

// Popup top position
// null - center
// <int> number of pixels from the top
// <int>% - top position in percents
topPos: null,

// Allow lightbox drag&drop (move) or not
draggable: true,

onOpen: null,

/**
 * For type `selector`:
 * If true - dom elements will not be cloned, so changes to DOM elements will be preserved
 * (including filled out form fields)
 */
preserveChanges: false

8. Hide the modal manually.

var myModal = $.fn.livebox({
  type: 'image',
  content: '1.jpg'
});

myModal.hide();

9. Default options for the content loading spinner.

noEvents: true,
height: 50,
width: 50,
loaderShape: true,
closeButton: 'none',
headerHeight: 0,
padding: 0,
borderRadius: 1000,
contentScroll: false,
content: '<div class="liveboxSpinner"></div>'

Change log:

2016-06-30

• JS update.

2016-06-29

• setContent() fix

2016-06-08

• Added shortcut option 'title'
• Every chain element gets its own id

2016-06-07

• JS update

2016-06-05

• Click on close button holder should close lightbox
•  Make suto-show of content element optional

---

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