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'");
}
***************************************************
#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