我已经建立了一个灯箱来展示我的大图像。我有 4 张图像，但是当我单击数字 1 时，它会显示数字 2，当我单击数字 2 时，它也会显示数字 2。换句话说，它只会显示数字 2 的图像，而不会显示其他图像。
jQuery在这里：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.lightbox').click(function(){
$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.box').animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});
$('.close').click(function(){
close_box();
});
$('.backdrop').click(function(){
close_box();
});
});
function close_box()
{
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
});
}
</script>
当我想看到我的照片时，我喜欢这样只看到它们：
function gallery()
{
if ($stmt = $this->mysqli->prepare('SELECT `rank`, `img`, `navn` FROM `gallery`')) {
$stmt->execute();
/* Bind resultatet */
$stmt->bind_result($rank, $img, $navn);
/* Hent rækker og udskriv data */
while ($stmt->fetch()) {
if($rank != 1)
{
?>
<a href="#" class="lightbox"><img src="/indhold/gallery/<?php echo $img;?>" alt="<?php echo $navn;?>"></a>
<div class="backdrop"></div>
<div class="box"><div class="close">x</div><img src="/indhold/gallery/index/<?php echo $img;?>" alt="<?php echo $navn;?>"></div>
<?php
}
}
/* Luk statement */
$stmt->close();
} else {
/* Der er opstået en fejl */
echo 'Der opstod en fejl i erklæringen: ' . $this->mysqli->error;
}
}
.backdrop {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .0;
filter: alpha(opacity= 0);
z-index: 50;
display: none;
}
.box {
position: absolute;
top: 20%;
left: 30%;
height: 175px;
width: 370px;
background: #fff;
z-index: 51;
padding: 10px;
display: none;
}
.close
{
float: right;
margin-right: 10px;
margin-bottom: 20px;
cursor: pointer;
}