我正在使用自举灯箱并试图使其适用于页面上的多个图像。因此,当您单击缩略图时,您将获得更大的图像。
任何人都知道这有可能吗?
由于
答案 0 :(得分:1)
要对多个图片使用lightbox
,您必须在id's
中设置不同的href
,并将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>
答案 1 :(得分:0)
我可以给你简单的例子,你必须尝试
/* 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>