mBox : Lightweight jQuery lightbox Plugin


mBox jQuery lightbox Plugin

mBox mBox jQuery lightbox Plugin is a simple jQuery lightbox plugin. It’s main goal is to be easy to use and lightweight. As you can see in the examples below, it takes only 4 lines of code to initialize the plugin and transform your static images into awesome lightbox gallery.

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.

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

2. Add the following Html snippet in your document.

1<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.

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

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

For More Jquery Plugins Click


 

Leave a Reply

Your email address will not be published. Required fields are marked *