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!
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
<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" />
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-type | href |
---|---|
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 |
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
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