Small jQuery Video & Image Lightbox Plugin - MediaBox

MediaBox is a very small jQuery lightbox plugin that allows you to display images or Html5 videos in a popup window with minimal markup.

How to use it:

1. Place the jQuery mediabox plugin after jQuery library, before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.media.box.js"></script>

2. Use the data-src attribute to define the path to your media files. The data-width and data-height attributes are used to specify the width and height of your videos and images.

<div class="media" 
     data-src="media/demo.mp4" 
     data-width="640" 
     data-height="360"
>Open Movie</div>

<a href="javascript:void(0)" class="media" 
   data-src="media/demo.jpg" 
   data-width="540" 
   data-height="358">
>Open Image</div>
</a>

3. Call the plugin with default parameters.

$('.media').mediaBox();

4. Style the lightbox in your CSS.

.mb-base { display: none; }

.mb-contents {
  position: fixed;
  z-index: 10000;
  background: #000;
  left: 50%;
  top: 50%;
  box-shadow: 0 0 2px rgba(200, 200, 200, 0.3), 0 0 2px #ccc, 0 0 5px rgba(0, 0, 0, 0.4);
}

.mb-decoration-close {
  position: absolute;
  display: block;
  z-index: 100001;
  top: -14px;
  left: -14px;
}

5. All default parameters.

// lightbox template
html: {
  base: '<div class="mb-base">' +
  '<div class="mb-contents">' +
  '<span class="mb-close mb-decoration-close"><img src=":src"></span>' +
  '<div class="mb-arrange"></div>' +
  '</div>' +
  '</div>',
  video: '<video class="mb-video mb-close" autoplay src=":src" width=":width" height=":height"></video>',
  image: '<img class="mb-image mb-close" src=":src" width=":width" height=":height" />'
},

// CSS classes for the lightbox
elem: {
  base: '.mb-base',
  contents: '.mb-contents',
  arrange: '.mb-arrange',
  video: '.mb-video',
  image: '.mb-image',
  close: '.mb-close'
},

// close icon
closeImage: 'close.png',

// animation speed
openSpeed: 500,
closeSpeed: 300

---

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