Question

我用HTML和CSS制作了一个照片库。我想，当我点击时，我的图像将在一个盒子里慢慢显示全尺寸。但我不知道怎么能做到。你能帮帮我解决这个问题吗？如果可能的话，请给我完整的代码。我的代码是：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> My gallery</title>
    <style type="text/css">
.gallery {
    border: 1px solid #000;
    width: 160px;
}
.img_head {
  border-bottom: 1px solid #000;
  text-align: center;
}
img {
  height: 150px;
  width: 150px;
  margin: 5px;
}
img:hover {
  height: 158px;
  width: 158px;
  margin: 1px;
  cursor: pointer;
}
    </style>
</head>
<body>
    <div class="gallery">
        <div class="img_head">
            <h3>My Image</h3>
        </div>
        <img src="http://i.imgur.com/jnMGOR9.jpg?1" alt="image" />
    </div>
</body>
</html>

Answer 1

以下示例可能对您有用：

jsFiddle Demo

<强> HTML：

<div id="overlay" class="abs"></div>
<div id="lb" class="abs">
  <div id="lbHead">
    <div id="lbTitle">Your image</div><div id="lbX">X</div>
  </div>
  <div id="lbBody">
  </div>
</div>
<div class="gallery">
  <div class="img_head">
    <h3>My Image</h3>
  </div>
  <img src="http://i.imgur.com/jnMGOR9.jpg?1" width="50" height="50" alt="image" />
</div>

<强> JS / jQuery的：

$('img').click(function(){
    var tmp = $(this).attr('src');
  $('#lbBody').html('<img src="'+tmp+'" />');
  $('#overlay, #lb').fadeIn(1800);
});

$('#lbX').click(function(){
  $('#overlay, #lb').fadeOut(800);
});

<强> CSS：

.abs {position:absolute}
#overlay{top:0;left:0;right:0;bottom:0;background:black;opacity:0.5;}
#lb{top:5%;left:3%;width:94%;height:50%;overflow:hidden;}
#lbHead{height:40px;width:100%;background:darkcyan;}
#lbTitle{float:left;width:70%;height:30px;color:white;}
#lbX{float:right;width:30px;height:30px;padding:10px;text-align:center;}
#lbX:hover{background:white;color:darkcyan;cursor:pointer;}
img:hover{cursor:pointer;}

#overlay, #lb{display:none;}

Answer 2

您可以使用这些类型的图库

http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/ https://blueimp.github.io/Bootstrap-Image-Gallery/ http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/#

如何制作一个画廊

2 个答案: