Question

我正在创建一个简单的图库并完成了一般结构，此时我只是想让Jquery工作，所以当点击Div时，内部的img被放大到完全以屏幕为中心（与大多数图片库一样）。

这是我使用bootstrap的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

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

<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 2

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

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

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

以下是一个例子......

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

jsFiddle Demo

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>

单击包含div时如何使用img popout（图库）？

3 个答案: