我的自定义php/jquery画廊灯箱不会集中页面加载

我创建了一个自定义画廊，它在Internet Explorer中完美工作，但是在Firefox和Chrome浏览器中它不能像它应该那样工作。点击缩略图链接时不会弹出灯箱，点击后点击两次，但点击后背景灯亮起，但不是灯箱，但点击缩略图两次后，它会居中并弹出。我不知道为什么，请帮忙。我的自定义php/jquery画廊灯箱不会集中页面加载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Album</title> 

<script type="text/javascript" src="hftpnyc/js/jquery-1.7.1.min.js"></script> 

<link href="albums.css" rel="stylesheet" type="text/css" media="screen"/> 
<link href="Website/print.css" rel="stylesheet" type="text/css" media="print"/> 

<style type="text/css"> 
    body { 

    } 


    .backdrop 
    { position:fixed; 
     top:0px; 
     left:0px; 
     width:100%; 
     height:100%; 
     background:black; 
     z-index:50; 
     display:none; 

    } 
    .smllpic a {text-decoration:none;} 


    .box 
    {margin:auto; 
    clear:both; 
    position:fixed; 
    max-height:705px; 
    max-width:905px; 
    background:black; 
    z-index:52; 
    padding:0px; 
    border:black 1.2px solid; 
    overflow:hidden; 

    } 

    .close 
    { 
     position:absolute; 
     right:6px; 
     margin-top:3px; 
     cursor:pointer; 
     font-size:20px; 
     font-family:acens; 
     font-weight:700px; 
     font-stretch:narrower;   
     opacity: .3; 
    } 
    .smllpic img{cursor:pointer; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }; 
     } 
    </style> 

</head> 

<body> 

<div id="contentcontainer" style="width:100%;clear:both;"> 

<div id="wrapper" style="width:981px; height:100%; margin:0px auto;"> 




<div style="margin:0px auto;width:979px;"> 
<h2 style="font-family:Tahoma, Geneva, sans-serif; color:#333;border-bottom:#A3308E solid 1px; background-color: #E6E6E6;"> Album </h2> </div> 

<div style="float:right; margin-right:3px;"> 
<form action="" method="post"> 
<a href="Albums.php"> 
<input type="button" name="Uploadmre" value="Upload more" style="border: 1px solid #d0ccc9;right:0px;background: #fff;color: #5f95ef;font-size: 11px;font-weight: 700;height:22px; margin-right:7px;"> 
</a> 
</form> 
</div> 

<div id="page-wrap" style=" width:918px; margin: 0px auto;clear:both;"> 


<?php 
    error_reporting(0); 
/* function: returns files from dir */ 
function get_files($images_dir,$exts = array('jpeg','gif','png','jpg')) { 
$files = array(); 
if($handle = opendir($images_dir)) { 
while(false !== ($file = readdir($handle))) { 
    $extension = strtolower(get_file_extension($file)); 
    if($extension && in_array($extension,$exts)) { 
    $files[] = $file; 
    } 
} 
closedir($handle); 
} 
return $files; 
} 

/* function: returns a file's extension */ 
function get_file_extension($file_name) { 
return substr(strrchr($file_name,'.'),1); 
} 

$images_dir = 'hftpnyc/thumbs/'; 
$thumbs_dir = 'hftpnyc/thumbs/thumbnails/'; 
$thumbs_width = 100; 
$images_per_row = 11; 
$string = ""; 
/** generate photo gallery **/ 
$image_files = get_files($images_dir); 
if(count($image_files)) { 
$index = 0; 
foreach($image_files as $index=>$file) { 
$index++; 
$thumbnail_image = $thumbs_dir.$file; 
//if(!file_exists($thumbnail_image)) { 
    //$extension = get_file_extension($thumbnail_image); 
    //if($extension) { 
    //make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width); 
    //} 

//} 

error_reporting(0); 

echo '<div class="smllpic" style=" padding: 0px; margin: 0px; border: 1px solid black; display: block; width: 100px; height:100px; float: left; "><a href="'.$images_dir.$file.'" rel="lrgimg" class="lightbox"> <img id="thumbs" src="',$thumbnail_image,'" width="100px"/></a></div>'; 

if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; } 
} 
} 

else { 
echo '<p>There are no images in this gallery.</p>'; 
} 


?> 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
$(document).height(); 
$('.backdrop').height($(document).height()); 

$(document).ready(function(){ 
$('.smllpic img').hover(function() { 
var $this = $(this); 
$this.stop().animate({'opacity':'1.0'},200); 
},function() { 
var $this = $(this); 
$this.stop().animate({'opacity':'0.7'},200); 
});}); 

$(window).bind("load", function() { 
var preload = new Array(); 
$(".box").each(function() { 
    s = $(this).attr("src").replace(/\.(.+)$/i, "_on.$1"); 
    preload.push(s) 
}); 
var img = document.createElement('img'); 
$(img).bind('load', function() { 
    if(preload[0]) { 
     this.src = preload.shift(); 
    } 
}).trigger('load'); 
}); 

$(document).ready(function(){ 
function centreit(){ 
//get the height and width of the modal 
var modal_height = $('.box').height(); 
var modal_width = $('.box').width(); 
//get the height and width of the page 
var window_width = $(window).width(); 
var window_height = $(window).height(); 
//calculate top and left offset needed for centering 
var topp = (window_height - modal_height)/2; 
var left = (window_width - modal_width)/2; 

//apply new top and left css values 
    $('.box').css({'top' : topp+'px' , 'left' : left+'px', 'right': left+'px','bottom':topp+'px'}); }; 




$('.lightbox').click(function(e) { 
e.preventDefault(); // keeps new page from loading 

var thisPicture = $(this).attr('href'); // path to full sized picture, 
function getit(){ 
$('body').append('<div class="backdrop" label="click to close"></div><div class="box" id="centre" ><div class="close">x</div><div style="cursor:pointer; opacity:1;font-family:Agency FB;margin-top:50%; right:-20px;position:fixed;color:white;font-size:50px; z-index:50;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-moz-box-shadow:0px 0px 5px #444444;-webkit-box-shadow:0px 0px 5px #444444;box-shadow:0px 0px 5px #444444;">></div><div style="cursor:pointer; opacity:.35;font-family:Agency FB;margin-top:50%; left:-20px; position:absolute; font-size:50px;color:white; z-index:70;-webkit-border-radius:5px;-moz-border-radius: 5px; border-radius:5px;-moz-box-shadow:0px 0px 5px #444444; -webkit-box-shadow:0px 0px 5px #444444; box-shadow:0px 0px 5px #444444;"><</div><img class="motown" src="'+thisPicture+'" style="max-height:705px;max-width:905px;z-index:50;"/></div>'); 
}; 
$(window).resize(function(){ 
    $('.box').resize(); 
    $('.motown').resize(); 
    centreit(); 
}); 

    getit(); 
centreit(); 
$("html").css("overflow", "hidden"); 
$('.backdrop').fadeTo(500,0.9); 
$('.box').children().fadeIn(1000); 








//$('.backdrop').css({ 'display' : 'block', opacity : 0}); 


$('.close').click(function(){ 
close_box();}); 


$('.backdrop').click(function(){ 
close_box();}); 


function close_box(){ 
$('.backdrop').remove(); 
$('.box').remove(); 
$("html").css("overflow", "");}; 

});}); 
</script> 




</body> 
</html>

来源

2012-02-20 Jackass corn

你会碰巧有一个URL来看？ – 2012-02-20 20:07:41

不知道这是你在找什么，但乍一看......它弹出与它的图像？如果您将具有未指定尺寸图像的内容居中，则在您第二次加载它之前，您的居中将关闭。这是因为图像尚未完成下载，并且第一次加载时大小未知。 – dqhendricks 2012-02-20 20:17:28

没有我没有网址，我正在使用测试服务器。你有什么想法我可以修复它？ – 2012-02-20 23:42:05

你应该尝试：

margin: 0 auto 0; 
left: 0; 
right: 0;

要解决的中心。所以这会给你带来：

.box 
{ 
    margin:0 auto 0; 
    left: 0; 
    right: 0; 
    clear:both; 
    position:fixed; 
    max-height:705px; 
    max-width:905px; 
    background:black; 
    z-index:52; 
    padding:0px; 
    border:black 1.2px solid; 
    overflow:hidden; 
}

来源

2012-03-22 21:43:32

我的自定义php/jquery画廊灯箱不会集中页面加载

回答

相关问题