Bootstrap 灯箱和多张图片

Question

我正在使用 bootstrap 灯箱，并试图让它适用于页面上的多个图像。因此，当您单击缩略图时，您会看到更大的图像。

有人知道这怎么可能吗？

谢谢

Answer 1

我可以给你一个简单的例子，你必须尝试

/* CSS only gallery (using radio inputs)
 * See http://css-tricks.com/forums/topic/click-thumbnail-and-make-it-larger-image-image-gallery-wo-javascript/
 * Support needed for IE7 & older - see http://css-tricks.com/child-and-sibling-selectors/
 */
.wrapper {
    width: 700px;
    position: relative;
}
.wrapper .thumbnails {
    width: 150px;
    float: right;
}
.wrapper a {
    margin: 2px;
}
.wrapper img {
    border: 1px solid #000;
}
.wrapper label > img {
    opacity: 0.6;
}
.wrapper label > img:hover {
    opacity: 1;
}
.wrapper input {
    display: none;
}
.wrapper input:checked + .full-image {
    display: block;
}
.wrapper input:checked ~ img {
    opacity: 1;
}
.wrapper .full-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
.wrapper .description {
    width:95%;
    padding:5px;
    background-color:#DDDDDD;
}

<h2>Click on a thumbnail image</h2>
<div class="wrapper">

    <div class="full-image"></div>

    <div class="thumbnails">

        <label>
            <input type="radio" name="full-image" checked>
            <div class="full-image">
                <img src="http://lorempixel.com/530/400/nature/1" alt="Pic1" />
                <div class="description">Description 1.</div>
            </div>
            <img src="http://lorempixel.com/65/65/nature/1"/>
        </label>

        <label>
            <input type="radio" name="full-image">
            <div class="full-image">
                <img src="http://lorempixel.com/530/400/nature/2" alt="Pic2" />
                <div class="description">Description 2.</div>
            </div>
            <img src="http://lorempixel.com/65/65/nature/2"/>
        </label>

        <label>
            <input type="radio" name="full-image">
            <div class="full-image">
                <img src="http://lorempixel.com/530/400/nature/3" alt="Pic3" />
                <div class="description">Description 3.</div>
            </div>
            <img src="http://lorempixel.com/65/65/nature/3"/>
        </label>

        <label>
            <input type="radio" name="full-image">
            <div class="full-image">
                <img src="http://lorempixel.com/530/400/nature/4" alt="Pic4" />
                <div class="description">Description 4.</div>
            </div>
            <img src="http://lorempixel.com/65/65/nature/4"/>
        </label>

        <label>
            <input type="radio" name="full-image">
            <div class="full-image">
                <img src="http://lorempixel.com/530/400/nature/5" alt="Pic5" />
                <div class="description">Description 5.</div>
            </div>
            <img src="http://lorempixel.com/65/65/nature/5"/>
        </label>

        <label>
            <input type="radio" name="full-image">
            <div class="full-image">
                <img src="http://lorempixel.com/530/400/nature/6" alt="Pic6" />
                <div class="description">Description 6.</div>
            </div>
            <img src="http://lorempixel.com/65/65/nature/6"/>
        </label>

        <label>
            <input type="radio" name="full-image">
            <div class="full-image">
                <img src="http://lorempixel.com/530/400/nature/7" alt="Pic7" />
                <div class="description">Description 7.</div>
            </div>
            <img src="http://lorempixel.com/65/65/nature/7"/>
        </label>

        <label>
            <input type="radio" name="full-image">
            <div class="full-image">
                <img src="http://lorempixel.com/530/400/nature/8" alt="Pic8" />
                <div class="description">Description 8.</div>
            </div>
            <img src="http://lorempixel.com/65/65/nature/8"/>
        </label>

        <label>
            <input type="radio" name="full-image">
            <div class="full-image">
                <img src="http://lorempixel.com/530/400/nature/9" alt="Pic9" />
                <div class="description">Description 9.</div>
            </div>
            <img src="http://lorempixel.com/65/65/nature/9"/>
        </label>

        <label>
            <input type="radio" name="full-image">
            <div class="full-image">
                <img src="http://lorempixel.com/530/400/nature/10" alt="Pic10" />
                <div class="description">Description 10.</div>
            </div>
            <img src="http://lorempixel.com/65/65/nature/10"/>
        </label>
    </div>

</div>

Answer 2

要对多个图像使用 lightbox，您必须在 href 中设置不同的 id's，并将 data-toggle 属性设置为 lightbox。例如，如果您有四张图片，那么首先在 html 中创建这些超链接：

<a data-toggle="lightbox" href="#image1"><img src="image1.png"></a>
<a data-toggle="lightbox" href="#image2"><img src="image2.png"></a>
<a data-toggle="lightbox" href="#image3"><img src="image3.png"></a>
<a data-toggle="lightbox" href="#image4"><img src="image4.png"></a>

Bootstrap 灯箱和多张图片

Bootstrap lightbox and multiple images

jquery

twitter-bootstrap-3

bootstrap-lightbox