Cross-Browser & Ajax-Enabled jQuery Lightbox Plugin - mbox

Cross-Browser & Ajax-Enabled jQuery Lightbox Plugin - mbox
File Size: 1.02MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

mbox is a jQuery plugin used to create a cross-browser and ajax enabled lightbox like modal dialog box on your web page, is compatible with all the modern browsers and older versions of opera and Internet Explorer (IE7, IE8 and IE 9).

Features:

  • Supports fullscreen mode and mbox mode.
  • Responsive design.
  • Unlimited possibilities - images, image gallery, flash embedding, vimeo and youtube videos, html divs in page, local and cross-domain ajax, part of page in another website, iframes and more.
  • Lightweight and easy to use. Without writing any javascript codes.

Basic Usage:

1. Load the required jQuery mbox plugin stylesheet file in your document.

<link href="lib-mbox/style.css" rel="stylesheet" type="text/css">

2. Add the following Html snippet in your document.

<a href="test.jpg" data-init="mbox" title="Old Car" data-type="image" class="mbox"> Load an image in mbox mode <span class="mbox-descr">Description Here</span> </a>

3. data-init attribute.

  • data-init="mbox"- mbox mode
  • data-init="fullscreen"- fullscreen mode

4. data-type attribute.

  • image - picture URL, example http://somesite.com/image.png
  • html - css selector of html element to be shown in mbox, example #abcd .my-paragraph
  • iframe - URL to be loaded in iframe in mbox, example http://lipsum.com
  • ajax - URL To perform ajax on same website with url method only (GET method), example xyz.php?id=45
  • xajax - URL To perform ajax on other websites with url method only (GET method), example http://somesite.com/page.php?id=45&rt=55(please note that this method requires php)
  • youtube - URL of youtube video, example http://www.youtube.com/watch?v=C0DPdy98e4c
  • vimeo - URL of vimeo video, example http://vimeo.com/66488183
  • flash - To load flash file, example http://somesite.com/animation.swf

5. Load the jQuery javascript library and mbox.min.js script at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="lib-mbox/mbox.min.js"></script>

6. That's it. Check the documentation folder in the zip for more infomation.


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