Question

我有这个Bootstrap Gallery：http://ba.nowcommu.myhostpoint.ch/galerie.html。当我点击“点击”按钮时，我需要的是打开全尺寸图像，可能是在模态中。

可以使用Modal，也可以使用carousel？

HTML：

<section id="galerie" class="galerie">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">

                <div class="col-lg-4">
<div class="hovereffect">
    <img class="img-responsive" src="/img/pics/1.jpg" alt="">
        <div class="overlay">
            <h2>Lorem ipsum</h2>
            <p> 
                <a href="#">Click</a>
            </p> 
        </div>
</div>
</div>

                <div class="col-lg-4">
<div class="hovereffect">
    <img class="img-responsive" src="/img/pics/2.jpg" alt="">
        <div class="overlay">
            <h2>Lorem ipsum</h2>
            <p> 
                <a href="#">Click</a>
            </p> 
        </div>
</div>
</div>

                <div class="col-lg-4">
<div class="hovereffect">
    <img class="img-responsive" src="/img/pics/3.jpg" alt="">
        <div class="overlay">
            <h2>Lorem ipsum</h2>
            <p> 
                <a href="#">Click</a>
            </p> 
        </div>
</div>
</div>
                 <div class="col-lg-4">
<div class="hovereffect">
    <img class="img-responsive" src="/img/pics/4.jpg" alt="">
        <div class="overlay">
            <h2>Lorem ipsum</h2>
            <p> 
                <a href="#">Click</a>
            </p> 
        </div>
</div>
</div>
                 <div class="col-lg-4">
<div class="hovereffect">
    <img class="img-responsive" src="/img/pics/5.jpg" alt="">
        <div class="overlay">
            <h2>Lorem ipsum</h2>
            <p> 
                <a href="#">Click</a>
            </p> 
        </div>
</div>
</div>
                 <div class="col-lg-4">
<div class="hovereffect">
    <img class="img-responsive" src="/img/pics/6.jpg" alt="">
        <div class="overlay">
            <h2>Lorem ipsum</h2>
            <p> 
                <a href="#">Click</a>
            </p> 
        </div>
</div>
</div>
</div>
        </div>
    </div>
</section>

Answer 1

我想你想要这样的事情，fiddle

我所做的是我在modal click事件上显示img，将其html附加到模态正文。

$(document).on('click','.img',function(){
    $('#modal .modal-body').html($('.img').clone()[0]);
  $('#modal').modal('show');
})

额外的CSS

body .carousel-inner>.item>a>img, body .carousel-inner>.item>img{
  width:100%;
  height:300px;
}

.img1{
  border:solid 1px red;
  width:100%;
  height:300px;
}

.img2{
  border:solid 1px green;
  width:100%;
  height:300px;
}

PS：我添加了图像边框，因为在JSfiddle中加载图像很痛苦，它只是用于识别被点击的图像。

Bootstrap：使用轮播以模态打开图像

1 个答案: