“mBOX” Documentation by “satish100” v1.0


“mBOX”

Created: 06/08/2013
By: Satish Sharma
Email: sakush100@gmail.com

Thank you for downloading my script. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Introduction
  2. Installation
  3. Usage Instructions
  4. Points to Remember
  5. Sources and Credits

A) Introduction - top

mBox is a true full-screen light box(modal box) solution. Full Screen feature is supported by most of the popular browsers today like Chrome, Firefox, Safari. But it is not supported by older versions of opera and Internet Explorer. So we apply fullscreen mode in supported browsers and use the full browser area to simulate full screen in non-supported browsers. Below are the main features of mBox


B) Installation - top

  1. Download the zip file and extract the contents.
  2. Upload the 'lib-mbox' folder to your server's root directory (http://yoursite.com/lib-mox/).
  3. Include jQuery 1.10.2, mbox.min.js and style.css in your page's head section
    <script type="text/javascript" src="lib-mbox/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="lib-mbox/mbox.min.js"></script>
    <link type="text/css" rel="stylesheet" href="lib-mbox/style.css" />
  4. Installation is complete.

C) Usage Instructions - top

As soon as you finish integrating/configuring the script, you are ready for using it. Before using it, you should know what is where. Look at the image below.


Now on pages, you need to create links similar to the HTML code below. You are going to change some values depending on what and how you need.

<a href="wallpaper.jpg" data-init="fullscreen" title="AJAX in mBox" data-type="image" class="mbox">
Load all the contents of file in fullscreen mode
<span class="mbox-descr">Description Here</span>
</a>

We must use class="mbox" on the particular links which we need to open in mBOX. title is text to be shown in mBOX title. you can replace Description Here with whatever you like to be shown in description part. You can even use html tags here. data-init defaults to mbox if data-init is not used. It has two values mbox and fullscreen

fullscreen - launches mBOX directly in full-screen mode, in full screen you cant see description.
mbox - launches mBOX in non-fullscreen mode, you can see description at right side of screen.

data-typehref
imagepicture URL, example http://somesite.com/image.png
htmlcss selector of html element to be shown in mbox, example #abcd .my-paragraph
iframeURL to be loaded in iframe in mbox, example http://lipsum.com
ajaxURL To perform ajax on same website with url method only (GET method), example xyz.php?id=45
xajaxURL 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)
youtubeURL of youtube video, example http://www.youtube.com/watch?v=C0DPdy98e4c
vimeoURL of vimeo video, example http://vimeo.com/66488183
flashTo load flash file, example http://somesite.com/animation.swf

To enable navigation(previous and next buttons), all links should be inside a single div and not be wrapped by any other html tags. If you want brief and step by step documentation with live examples, please visit our live demo site here


D) Points to Remember - top


E) Sources and Credits - top

All the source / content in plugin files, like images, scripts, etc except above are completely my own work best to my knowledge. However, i would like to thank PHP and jQuery teams to make such things possible through open sourcing.


You can always visit my website ( phploaded.com ) to discuss or request new features the plugin.

Satish Sharma

Go To Table of Contents