Tag Archives: colorbox

Finally, The vBox Plugin!

Posted on by
Reply

Ever wanted a nice plugin that you could just insert, and run with it? No major reconfigurations, no extra images, nothing of the sort.

Bad news first!

Here are some of the cons:
– Modern Browser Support only.
– IE 9+
– Chrome 4+ (all)
– FF 3.5+
– Safari 5.1+
– Safari Mobile 5.0+
– Android 4.0+
– Chrome aor FF for Android (all)
– Dependent on jQuery.

And the good news!

Here are some of the pros:
– Resizeable with window if contents are larger than window.
– Multiple levels, stackable.
– Based on jQuery, easy to implement and use.
– Always stays in the center.
– SUPER light!

Take it, make it, minimize it, do whatever to it. Feedback would be appreciated.

vbox-0.1.2
Updated from 0.1.1: Added a resize on any element within that has the class resizable to fit the pop up which fits the window itself.

vbox-1.0.0
Updated from 0.1.2: Added compatibility for other browsers. Added custom fade time.

Usage:

1
$.fn.vbox('open',{content:'<p>My internal HTML text.</p>'});

If you want to read it without opening the file, here you go:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
(function($){
    var g_vboxlevel = 0;
    $(document).on('click','.vbox-close, .fuzz',function(e) {
        e.stopPropagation();
        $.fn.vbox('close');
    }).on('click','.vbox-content',function(e){
        e.stopPropagation();
    });
    $(window).on('resize',function(){
        $.fn.vbox('resize');
    });
    $.fn.vbox = function (action,options) {
        var settings = $.extend({
            content: 'sample',
            speed: 100
        },options);
       
        var win = $(window);
        var winH = win.height();
        var winW = win.width();
       
        if (action == 'open') {
            g_vboxlevel++;
            $('body').append('<div class="fuzz" id="vbox_'+g_vboxlevel+'"><div class="vbox"><div class="vbox-content"><div class="inner-content">'+settings.content+'<a data-id="'+g_vboxlevel+'" href="#" class="vbox-close">&times;</a></div></div></div></div>');
            $thisbox = $(document).find('#vbox_'+g_vboxlevel);
            $thisbox.animate({opacity:1},settings.speed,function(){
                $.fn.vbox('resize');
            });
        };
        if (action == 'close') {
            $(document).find('#vbox_'+g_vboxlevel).animate({opacity:0},settings.speed,function() {
                $(this).remove();
            });
            g_vboxlevel--;
        };
        if (action == 'resize') {
            $thisbox = $(document).find('#vbox_'+g_vboxlevel);
            $thisbox.find('.inner-content, .resizable').css({'max-width':(winW - 100) + 'px'});
            $thisbox.find('.inner-content, .resizable').css({'max-height':(winH - 100) + 'px'});
        }
       
    }
}(jQuery));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.fuzz {
    position: fixed;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
    vertical-align: middle;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}
.fuzz .vbox {
    display: table-cell;
    vertical-align: middle;
}

.fuzz .vbox-content {
    box-shadow: 0 9px 39px #333;
    display: inline-block;
    padding: 20px;
    background: #fff;
    position: relative;
}
.fuzz .inner-content {
    overflow: auto;
    border: 1px solid #ccc;
    padding: 20px;
}
.fuzz .vbox-close{
    position: absolute;
    font-size: 28px;
    text-decoration: none;
    top: -12px;
    right: -12px;
    border: 3px solid #fff;
    box-shadow: 0 0 10px #000;
    border-radius: 16px;
    height: 26px;
    line-height: 22px;
    background: #000;
    color: #fff;
    width: 26px;
    font-weight: bold;
}

Update:

I’ve managed to make some tweaks with the help from some feedback and the vBox plugin is finally ready for release. Enjoy!