Saturday, 9 March 2013

v5

css
***************************************************


#light-box {
   
   box-shadow:2px 2px 27px 6px rgb(73, 68, 68);
   -webkit-box-shadow:2px 2px 27px 6px rgb(73, 68, 68);
   -moz-box-shadow:2px 2px 27px 6px rgb(73, 68, 68);
   
   display:none;z-index:99999;position:absolute;border:solid 5px #ffffff
    }
   
 #light-box img{
    /* max-width:500px;max-height:500px*/
 }
   
   
#modal-div{
 z-index:9999;
 display:none;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color:#000;
 -moz-opacity:0.5;
 opacity:.50;
 filter:alpha(opacity=50);
}

#dvImgClose {
background: url(http://wn7x64-37c16bs.blr.amer.dell.com/en/widgetfiles/ed28fe6f19b540688dc33c6ff4195ef8/d/fancy_close.png?m=634981602706435601);
width: 30px;
height: 30px;
float: left;
position: absolute;
margin-top: -21px;
right: -22px;
cursor:pointer;
}

 ******************************************
 js
***************************************


jQuery(document).ready(function($) {
   
       
    $('.Lightbox').click(function(e) {

//prevent default action (hyperlink)
e.preventDefault();

//Get clicked link href
var image_href = $(this).attr("href");
 
     //Append the popup div to body        
     $('body').append('<div id="light-box"></div><div id="modal-div"></div>');
   
     //Add the closed image div      
     var img = '<div id="dvImgClose"></div><img id="modal-img" src="' + image_href + '" />';
       
        //Fill the popup with images
        $('#light-box').html(img);
       
        //Put the popup at center of screen
        $('#light-box').center();
     
        //Show the transparent div behind the popup
        $('#modal-div').show();
$('#light-box').show('slow');
     
        $('#dvImgClose').live('click',function(){
              closePop();
        });
     
        $('#modal-div').live('click',function(){
              closePop();
        });
       
        $('#modal-img').live('click',function(){
              $(location).attr('href',this.src);          
        });
     
});

});

$.fn.center = function () {
 
   
    $('#light-box #modal-img').css("max-width",$(window).width()*0.63);
    $('#light-box #modal-img').css("max-height",$(window).height()*0.63);
   
    var heightRatio = ($(window).height() != 0) ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) ? this.outerWidth() / $(window).width() : 1;
       

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

var closePop = function () {
   
     $('#light-box').html('');
    $('#light-box').hide();
    $('#modal-div').hide();

}

  ***********************
HTML
*********************


 if (isLightBox) {
       this.data.html = this.data.html.replace("<a ", "<a class='Lightbox'");
     
   }


No comments:

Post a Comment