code everywhere
technology, web services and applications

jQuery lightbox plugin

posted on November 7, 2015, 12:00 am in

code

jQuery.fn.lightbox = function() {
   
    var 
close = function() {
        $(
'.ui-lightbox').fadeOut(500, function () {
            $(
'.ui-backdrop, .ui-backdrop-light').fadeOut(200, function () {
                $(
this).remove();
                $(
document).off('keydown');
                $(
window).off('resize');
            });
        });
    };

    var 
resize = function(event) {
        var 
maxw = ($(window).width() - 75 100) ? 100 : $(window).width() - 75,
            
maxh = ($(window).height() - 75 100) ? 100 : $(window).height() - 75,
            
height event.data.height,
            
width event.data.width,
            
ratio maxh maxw;

        if (
height width ratio) {
            if (
height maxh) {
                
width Math.round(width * (maxh height));
                
height maxh;
            }
        } else {
            if (
width maxw) {
                
height Math.round(height * (maxw width));
                
width maxw;
            }
        }
        $(
'.ui-lightbox > img').attr({ widthwidthheightheight });
        $(
'.ui-lightbox').css({ 'width'width'height'height });
    };


    var 
open = function(a) {
        $(
'body').prepend('<div class="ui-backdrop"><div class="ui-lightbox"><a class="ui-lightbox-close">&#215;</a>Loading...</div></div>');

        $(
'.ui-close').click(function(e) {
            
e.preventDefault();
            
close();
        });

        var 
img = new Image();
        
img.onload = function() {
            $(
'.ui-lightbox')
                .empty()
                .
append('<a class="ui-lightbox-close" href="#">&#215;</a>')
                .
append('<img src="' img.src '" alt="" width="' this.width '" height="' this.height '" />');

            $(
'.ui-backdrop, .ui-lightbox-close').click(function(e) {
                
e.preventDefault();
                
close();
            });

            $(
window).on('resize.cssui', {
                    
widththis.width,
                    
heightthis.height
                
}, resize);
            $(
window).trigger('resize.cssui');
            
        };
        
img.src = $(a).attr('href');
        
        $(
'.ui-backdrop, .ui-backdrop-light').fadeIn(250, function () {
            $(
'.ui-lightbox').fadeIn(100);
        });

        $(
document).on('keydown', function (e) {
            switch (
e.which) {
                case 
37console.log("left"); break;
                case 
39console.log("right"); break;
                case 
27console.log("esc"); close(); break;
            }
            return 
false;
        });
    };

    $.
each($(this), function(ak) {
        $(
k).click(function(e){ e.preventDefault(); open(k); });
    });
    return 
this;
};
.ui-backdrop{
    
positionfixed;
    
width100%;
    
height100%;
    
displaynone;    
    
backgroundrgba(0,0,0,.6);
    
background: -webkit-gradient(radialcenter center0center center950from(rgba(0,0,0,.3)), to(rgba(0,0,0,.6)));
    
top0;
    
left0;
    
z-index998;
}

.
ui-lightbox{
    
width450px;
    
positionrelative;        
    
displaynone;
    
margin50px auto;                    
    
background-colorblack;
    
padding0px;
    
z-index999;
    -
webkit-box-shadow0px 0px 25px rgba(0,0,0,.6);
    -
moz-box-shadow0 0 25px rgba(0,0,0,.6);                
    
box-shadow0 0 25px rgba(0,0,0,.6);
}
.
ui-lightbox-close{
    
text-decorationnone;
    
positionabsolute;
    
text-shadow0px 0px 1px #7a7a7a;    
    
colorwhite;
    
top0px;
    
right10px;
    
width25px;
    
height25px;
    
font-size38px;
    
opacity0.2;
}
.
ui-lightbox-close:hover{
    
opacity1;
}

usage

Run with

$('a.lightbox').lightbox();

Check out the fiddle: jsfiddle.net/j6hsw2et/

recent posts

< back