单击包含 div 时如何让 img 弹出(图片库)

Question

我正在制作一个简单的图像库并完成一般结构，此时我只是想让 Jquery 工作，所以当单击 Div 时，里面的 img 被放大到完整并在屏幕上居中（就像大多数图像画廊一样）。

这是我使用引导程序的 HTML。

<div class = "row gallery">
    <div class = "col-md-12 gallery_row">
        <div class = "pic_div"><img src="test.png" class = "pic"></div>
        <div class = "pic_div"><img src="test.png" class = "pic"></div>
        <div class = "pic_div"><img src="test.png"  class = "pic"></div>
        <div class = "pic_div"><img src="test.png"   class = "pic"></div>
    </div>
</div>

到目前为止，当我尝试使用 Jquery 时，我已经能够在单击时调整图像大小，但它只能调整大小以适应div，而不是调整为初始大小。

var $pic_div = $('.pic_div');
$pic_div.on('click',function(){
    $(this).find('img').css({'height' : '100%' , 'width' : '100%'});
});

我

不确定如何让图像从div 中弹出，或者我必须加载相同的图像。我试图使添加新图片变得容易，所以我偏离了每个图像的特定命名。

这里还有包含div 的 CSS：

.pic_div{
width: 150px;
height: 150px;
margin: 25px;
overflow:hidden;
display:inline-block;

}

Answer 1

您也可以滚动自己的灯箱：

jsFiddle 演示

var pd = $('.pic_div');
pd.on('click',function(){
    var i = $(this).find('img').clone();
    $('#lightbox').html(i);
    $('#lightbox img').css({'width':'100%','height':'auto'});
    $('#overlay, #lightbox').fadeIn();
});
$('#overlay').click(function(){
    $('#lightbox, #overlay').fadeOut();
    $('#lightbox').html();
});

.pic_div{width: 150px;height: 150px;margin: 25px;overflow:hidden;display:inline-block;}
#lightbox{
   position:absolute;
   top:10%;
   left:20%;
   width:60%;
   height:70%;
   z-index:2;
   display:none;
}
#overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:black;opacity:0.7;z-index:1;display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class = "row gallery">
    <div class = "col-md-12 gallery_row">
        <div class = "pic_div"><img src="http://placeimg.com/50/50/animals" class = "pic"></div>
        <div class = "pic_div"><img src="http://placeimg.com/50/50/animals" class = "pic"></div>
        <div class = "pic_div"><img src="http://placeimg.com/50/50/animals"  class = "pic"></div>
        <div class = "pic_div"><img src="http://placeimg.com/50/50/animals"   class = "pic"></div>
    </div>
</div>
<div id="lightbox"></div>
<div id="overlay"></div>

Answer 2

你可以从div 组件中取出 class 属性并放入 image 组件，就像这样：

<div class = "row gallery">
    <div class = "col-md-12 gallery_row">
        <div><img class = "pic_div" src="test.png" class = "pic"></div>
        <div><img class = "pic_div" src="test.png" class = "pic"></div>
        <div><img class = "pic_div" src="test.png"  class = "pic"></div>
        <div><img class = "pic_div" src="test.png"   class = "pic"></div>
    </div>
</div>

这应该可以完成工作！

Answer 3

这是基本概念。CSS使用通常称为box方法（容器中的容器）。默认情况下，框或容器的宽度和高度不能大于其父容器的宽度和高度（因为框不适合）。

为了规避这种情况，您可以将包含div 的位置更改为绝对位置，即它相对于浏览器窗口而不是相对于其父容器定位。

此外，与其使用 jQuery 插入内联样式，不如为大图像切换 a 类集，这可以使用 css3 过渡进行动画和修饰。

这里有一个例子...

var $pic_div = $('.pic_div');
$pic_div.on('click', function() {
  $(this).toggleClass("active");
});

.pic_div img {
  max-width: 150px;
  max-height: 150px;
  display: block;
  margin: auto;
}
.pic_div.active img {
  max-width: 100%;
  max-height: 100%;
}
.pic_div {
  width: 150px;
  height: 150px;
  margin: 25px;
  overflow: hidden;
  display: inline-block;
  background-color: white;
}
.pic_div.active {
  position: absolute;
  z-index: 999999;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row gallery">
  <div class="col-md-12 gallery_row">
    <div class="pic_div">
      <img src="http://www.activedemo.co.za/OA/Images_Product/BIN373502(12).jpg" class="pic">
    </div>
    <div class="pic_div">
      <img src="http://www.activedemo.co.za/OA/Images_Product/RAK05_amended(3).jpg" class="pic">
    </div>
    <div class="pic_div">
      <img src="http://www.activedemo.co.za/OA/Images_Product/OA066(2).jpg" class="pic">
    </div>
    <div class="pic_div">
      <img src="http://www.activedemo.co.za/OA/Images_Product/SF4310(7).jpg" class="pic">
    </div>
  </div>
</div>