jquery multibox

Home Licenses Contact

Divbox

download jquery multiboxDivBox is simple, easy style format, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector. DivBox is a plugin for jQuery. It was inspired in Multibox by http://phatfusion.net/multibox/.

Lastest code update:

svn checkout http://divbox.googlecode.com/svn/trunk/

Example | Features | How to use | Options

Gallery

Single
HTML descriptions
Media types
flv example
mp3 example
mp4 example
wmv example
mov example
swf example
Youtube video
More...
Download link
External link(Iframe)
HTML Element
Ajax
API functions
Define languages
  • Here the text
  • Here the text
  • Here the text
  • Here the text
  • Here the text

Your comment

colin (2014-08-10 10:21:46)I'm using this lightbox on my website to show my videos hosted on Youtube. This works great on a desktop computer. However, on a mobile phone the video does pop up, but when I try to
play it, it automatically goes to the Youtube website.
I want it to play inside the pop-up window. Is there a way to fix this? Thanks in advance.

herman (2014-05-06 22:27:29)how to manual show the div box or close the div box?
i want make the java function to show it or function to close it?

nganlamsong (2014-04-07 09:17:49)Hello there, Your plugin is excellent, I really love it. But When I used it with jquery v2.0 or higher, It didn't work, and the other plugin isn't work with the older version of Jquery. SO I can't use this plugin anymore :-(

Iris (2014-01-23 04:04:19)Hi again, I solved the problem :-)

Iris Kuhn (2014-01-22 00:06:32)Hi, I have problem with mp4 video in browser google chrom and IE 11. In google chrome I have sound but no picture and in IE 11 the ligtbox is opening but the video will be played in media player. What can I do against ist? Thanks a lot for your help.

Flagada15 (2013-12-16 23:07:10)Hi again! It seems that caption don't appear with the v1.3 do you have the same pb ?

Flagada15 (2013-12-16 16:11:58)Hi,
Thank you for your great divbox! I just found a pb if the global css have a -moz-box-sizing: border-box
To avoid this you should add a -moz-box-sizing: content-box to the #divbox_frame in the divbox.css
Bye
fred

haris (2013-11-29 21:02:59)how to pause and play video ??

Jin (2013-08-06 22:13:59)@adrien: I don't see the attribute auto_open in multibox source code, what you mean for this attribute ? You want to auto open divbox when onload website? that right ? if it is right. You can use $.divbox('body',{url:'images.gift',....}) instead ( not $('select).divbox()

adrien (2013-07-30 22:07:10)Hello and thanks!
Is there a auto_open feature like the one multibox had?

Steve (2013-07-25 07:44:25)I need to set max width and max height on lightbox for youtube videos, but unsure how it is set. I have

Link:http://www.likeforlike.com.au/charts/?country=RO

Ariel Pont (2013-05-25 04:36:31)thanks a lot! It's awesome !

Jin (2013-04-04 10:43:34)@Ariel Pont: I fixed it. B/c jquery 1.9 don't support $.browser anymore. Please update your file divbox.js ate http://divbox.googlecode.com/svn/trunk/divbox/divbox.js

Ariel Pont (2013-03-21 00:58:05)I have problems with jquery 1.9! With the previus version (1.8) it´s works.

Jin (2013-03-19 19:04:59)@ Claudia: Yes you can with divbox api. Except you call it from iframe.

Claudia (2013-03-14 18:27:02)Can i call divbox in a click event? I want this click event inside the divbox, so it should close and open the divbox. is that possible?

Jin (2013-03-06 23:07:27)Hi Manu,

Maybe you have to set width hight for the page insize the divbox.

Can you show me the problem ?

Manu (2013-03-02 03:02:11)Hi,
I don't know why but if I load a page inside divbox the size of the box won't resize to the content. Even with width: null, height: null.

Am I doing something wrong?

I have only a button and a gray background on the included side.

Thanks in advance
Manu

Jin (2012-04-23 09:08:05)Hi Elias,

Currently, I'm using flash player to play video, and iPad don't support to view flash, so it is the problem.

I will try to update new version that support view video with HTML5 soon.

Elias Rahme (2012-04-20 15:53:15)Hy, first of all thank you for this creation it is the best!!
But i have a situation, i need the effect to work properly and loads the video when opened from an ipad!!
Till now, the effect loads but the video doesn't . please reply ASAP!! i appreciate your helo

Baumer (2012-04-18 00:02:35)Hi mates!
In IE9 after closing the divbox which shows an iframe the page remains totally black!

But it is only in IE9. I can't manage to solve the problem!

It'll be great if you can help me!
the page is:
http://test.sporthotelideal.at/de/skipanorama-hochgurgl-obergurgl.php

gerry_baumer@web.de

Jin (2012-02-10 11:23:03)@Daniel: Divbox support to show a page by iframe and you can add any parameters to url.

Note: to Divbox show a Youtube's link in iframe, you set it:

$('selectors').divbox({type: 'iframe' })

Daniel (2012-02-08 23:31:52)Hi,
i'm trying to link to a youtube video without it showing the youtube logo on the bottom right. The solution is to add "&modestbranding=1" to the link. But this only works with iframes. Do you have a solution for this problem? Thanks

steve (2012-02-05 14:03:10)Have created a fiddle and emailed it to you Jin cheers mate

Jin (2012-02-04 17:19:02)@steve: ok, you can send it to my email

steve (2012-02-04 14:34:16)Hi Jin, no we still cannot get it to work. Its driving me nuts, may i send you our code for the QR image, and see if you can get it to work?

Jin (2012-01-31 13:22:52)@Steve, I replied email to you, is it ok ?

Steve (2012-01-29 12:04:20)I tried that , with this code: $('.qrlightbox').divbox({caption: false,width: null, height: null}); but doesnt work. I will email you directly link to our page, I have cocked somethign up

Jin (2012-01-26 08:32:56)Hi Steve, sorry for late reply. You can set it when you call $('selector').div({width: null, height: null})

Steve (2012-01-15 19:57:27)Hi Jin, great script. Issue I have is we have class="lightboxQR" and I need modal to open specific size, can we accomplish this inline, if not how. I see you said set null and auto.. not sure where to add this.

Jin (2012-01-14 09:23:28)@Force: this is my wrong, when i dev i test with demesion 100x100, you can change it {width: null, height: null}

I will update in the next modified version.
Thanks!

Jin (2012-01-14 09:23:28)@Force: this is my wrong, when i dev i test with demesion 100x100, you can change it {width: null, height: null}

I will update in the next modified version.
Thanks!

Force (2011-12-21 16:46:41)Hi, I have a problem, when I put a class and set it by javascripit like this:
$('a.divbox).divbox(); The divbox always have 100x100px and the only way to change it is to set width and height in options, but I need dimensions of the pictures which are very different. Any tip in this?

Waqas Mahmood Khan (2011-11-30 21:24:58)Great plugin,
There is a slight problem. I have on this page. (http://www.proformanceshades.co.nz/indextesti.php)
You see that there is a youtube video on the left side. When plugin open the image from side bar. the youtubve IFrame is hover over the pop up image. How can this be corrected that video should not come over the opened image.

Giauffret (2011-11-26 05:24:42)Thank you for this splendid job, it is very useful.
Should it be possible, for example, to have divbox opening the image2.jpg just after loading the HTML page, without clicking anywhere ? This would be perfect for my gallery. :)

Dennis (2011-11-25 19:44:52)$('a.divbox).divbox(opt); there is a ' missing.

Jin (2011-11-25 11:18:07)@Mahesh: yes it is posible, here is demo http://dev.sofresh.ca/tpmg/v01/

Click on "Login" and click "Forget username or password? "

Mahesh (2011-11-15 00:28:54)Hi,

Can i call divbox in a click event? I want this click event inside the divbox, so it should close and open the divbox. is that possible?

(2011-10-07 19:09:12)Great work !
Is it possible to go next/prev picture by clicking on the left or right part of the picture ?

Jin (2011-10-07 12:04:48)@Jeff Olson: yes you can, please get the lastest version (http://divbox.googlecode.com/svn/trunk/divbox/divbox.js) and then set {animate: 'none'}

It will turn off animation

Jeff Olson (2011-09-28 04:52:50)It is possible to remove the opening animation?
I would just open the frame in the center of the window.
In the rest of this pluigin is perfect.
great job.

michael conner (2011-08-26 12:13:07)hi again

my fault: I'm hosting a flash movie -- so I set the type to "swf" and put in my height and width and it plays great in IE9. sorry!

Michael

michael conner (2011-08-26 11:40:30)hi
I'm using this in an iframe, working great in FF, Chrome and IE8 and below -- but, when closing window in IE9, browser window retains black overlay. I downloaded v. 1.3 to try and same story. Great job otherwise, thanks!

Jin (2011-08-02 11:57:00)You cant do that,b/c browser isnt allow you call a js function from parent window

Richard (2011-07-25 21:05:41)Hi, how can i add my own 'close' (or 'cancel') button inside the iframe. For example, i want the iframe to contain a form, with a cancel button, or, when the form has been submitted, a function that will close the iframe window. thanks!

Dennis Tafel (2011-05-21 10:12:29)that a nice, really good work. I just notice that this comment box dont´t display right in google chrome.

Jin (2011-05-20 23:52:26)@Dennis: I added function for MOV file.

Please update your divbox.js with this http://divbox.googlecode.com/svn/trunk/divbox/divbox.js

Zammer (2011-05-19 12:41:10)Great work man,
I used multibox provided by pathfusion and I loved it, and now I needed to have same functionality using jqueryand I found this... great work man... heaps of thanks

Dennis (2011-05-10 19:43:42)Is it possible to add support for MOV files?

Dennis (2011-05-10 18:57:37)Great work, i love it =)

Jin (2011-05-03 10:58:05)thanks iamfigo@foxmail.com for view WMW issue.

Jin (2011-04-25 18:08:34)@moi: what your browser and OS you are using? I tested on IE 6,7,8 and it works.

moi (2011-04-24 18:42:25)great plugin, but it is not working with ie

n (2011-04-24 08:58:06)..

Jin (2011-04-19 13:59:10)Update version 1.3 at http://divbox.googlecode.com/svn/trunk/divbox/divbox.js

* if you have a request, please keep your email, i'll reply email when I have update. Thanks!

 

Features Top

How to use Top

Options Top

Option Default Description
width null The width of the box if it's not null, else the width will be auto.
height null The height of the box if it's not null, else the height will be auto.
speed 500 The speed of each the animation as string in jQuery terms ("slow" or "fast") or milliseconds as integer
left null The value from the left that the box should open to. If left is null, the left will be auto.
top null The value from the top that the box should open to. If top is null, the top will be auto.
type null The specify the format that you want assign to. If type is null, the format will be auto. Divbox support formats:

Image(jpg,jpeg,image,png),Media(mp3, mp4, flv, swf, wmv),element, ajax, youtube or any string (show in a iframe)

Example:

HTML:
<a href="http://google.com" class="lightbox">External link(Iframe)</a>
<a href="#" class="popup" rel="box_id">HTML Element</a>
<a href="ajax.php" class="ajax">Ajax</a>
JS:
<script type="text/javascript">
$('.lightbox').divbox({caption: false});
$('.popup').divbox({type: 'element',caption: false});
$('.ajax').divbox({type: 'ajax',caption: false});
</script>

src href The specify attribute that the value is a source to show on the box.
scrollbar auto Set value of atrribute scrolling in iframe

<iframe scrolling="scrollbar option" ..... ></iframe>

btn_closed #divbox_frame .closed The jquery selector of element that is close button
btn_prev #divbox_frame .prev The jquery selector of element that is previous button
btn_next #divbox_frame .next The jquery selector of element that is next button
btn_number #divbox_frame .number The jquery selector of element that show the current items per total items
path players/ The folder that includes players.
resize_large_image true Allow resize image auto if the demension size is so large and else.
click_full_image true Allow click on image to view full image if the image has been auto resize.
overlay true Allow use a semi-transparent background.
caption true Allow show the caption:
- false: hide the caption
- true: the title of the element will show on caption
if caption is a function, the value return will show on caption, this is useful to show caption with HTML description.
Example:

HTML:
<a href="photos/image1.jpg" title="Title 1" class="lightbox3" rel="descript_1"><img src="photos/thumb_image1.jpg" /></a>
<a href="photos/image2.jpg" title="Title 2" class="lightbox3" rel="descript_2"><img src="photos/thumb_image2.jpg" /></a>

<p style="display: none;" id="descript_1">HTML <strong>Description</strong> <a target="_blank" href="http://jquery.phpbasic.com"><img src="images/cart.gif" border="0" /></a></p>
<p style="display: none;" id="descript_2">HTML <em>Description</em> 2</p>

JS:
<script type="text/javascript">
var opt = {
caption: function(obj){
return $('#'+$(obj).attr('rel')).html();
}
}
$('a.lightbox3').divbox(opt);
</script>

caption_control true Allow show the caption control ( includes next and previous buttons)
caption_number true Allow show the current item per total items
event click The mouse event on the HTML element to show box.
container document.body The containing element for the overlay if used.
download_able   The extentions file that will go direct to link ( don't show box). Default defined:

download_able: ['pdf', 'zip', 'gz', 'rar', 'doc', 'docx', 'xls', 'xslx', 'ppt', 'pptx', 'csv']

Example:

HTML:
<a href="photos/download.zip" class="lightbox">Download link</a>
JS:
<script type="text/javascript">
$('.lightbox').divbox({caption: false});
</script>

languages Defines text string show on box. Default defined:

languages:{
btn_close: 'Close',
btn_next: 'Next',
btn_prev: 'Prev',
click_full_image: 'Click on here to view full image',
error_not_youtube: 'This is not a youtube link',
error_cannot_load: "We can't load this page\nError: ";
}

Example:

HTML:
<a href="photos/image2.jpg" class="lang" title="Define languages (mouse hover on close, next, prev buttons to see the changes)">Define languages </a>
JS:
<script type="text/javascript">
var opt = {};
opt.languages = {
btn_close: 'Dong',
btn_next: 'Sau',
btn_prev: 'Truoc',
click_full_image: 'Xem hinh lon',
error_not_youtube: 'Day khong phai la link youtube',
error_cannot_load: "Khong the load trang nay\nMa loi: "
}
$('.lang').divbox(opt);
</script>

api   Callback functions

api:{
start: function(){ /* do some thing before Divbox begin /*},
beginLoad: function(){ /* do some thing before Divbox load the content /*},
afterLoad: function(){ /* do some thing after Divbox load the content /*},
closed: function(){ /* do some thing after Divbox closed /*}
}

Example:

HTML:
<a href="photos/image2.jpg" class="api" title="API functions">API functions</a>
JS:
<script type="text/javascript">
var opt = {};
opt.api = {
start: function(obj){alert('Start...');},
beginLoad: function(obj){alert('Begin to load ...');},
afterLoad: function(obj){alert('Load success...');},
closed: function(obj){alert('Closed...');}
}
$('.api').divbox(opt);
</script>

 

Top