Podgaric

Simple Lightbox Experiment

by bitstarr

HTML

<a href="http://farm4.static.flickr.com/3150/3080516462_58ef7dfbca_z.jpg"><img src="http://farm4.static.flickr.com/3150/3080516462_58ef7dfbca_m.jpg" alt="Podgaric"></a>

CSS

/* LightBox
-------------------------------------------------------------- */
#LB_overlay {
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    width: 100%;
    height: 100%;
    z-index: 998;
    display: none;
}
#LB_lightbox {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    text-align: center;
    display: none;
}
#LB_lightbox a {
    position: absolute;
    top: 5px;
    width: 20px;
    height: 20px;
    overflow: hidden;
    text-indent: -999em;
    color: #fff;
    background: #fff url("http://cdn1.iconfinder.com/data/icons/nuove/16x16/actions/fileclose.png") no-repeat 1px 2px;
    border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
}
#LB_lightbox img {
    border: 10px solid #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

JavaScript

$(function(){
    $("a[href$='.jpg'], a[href$='.gif'], a[href$='.png']").click(function(e){
        
        e.preventDefault();
        var posTop = $(window).scrollTop() + 25;
        var big_img = $(this).attr('href');
        
        $('body').append('<div id="LB_overlay"></div>')
             .append('<div id="LB_lightbox"><img src="' + big_img + '" /><a href="#" id="LB_light_close" title="close">close</a></div>');
             
        $('#LB_lightbox').css('top', posTop + 'px');
        
        $('#LB_overlay').fadeTo(500, 0.75, function(){
            $('#LB_lightbox').fadeTo(250, 1);
        });
        
        $('#LB_overlay, #LB_light_close').on('click', function(e){
            e.preventDefault();
            $('#LB_lightbox').fadeTo(100, 0, function(){
                $(this).remove();
                $('#LB_overlay').fadeTo(250, 0, function(){
                    $(this).remove();
                });
            });
        });
        
    });
});