Question

我尝试添加一些代码，以便在选择缩略图时打开图库。现在我有这条线

<div class="row">

        <div class="col-lg-12">
            <h1 class="page-header">Thumbnail Gallery</h1>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#">
                <img class="img-responsive" src="images/idee-bianco.png" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#">
                <img class="img-responsive" src="images/idee-bianco.png" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#">
                <img class="img-responsive" src="images/idee-bianco.png" alt="">
            </a>
        </div>
  ........

    </div>

现在，无论何时选择缩略图，我都想打开一个画廊或旋转木马。它是一个投资组合，因此每个缩略图代表不同的东西，例如摄影，视频，插图等。

Bootstrap的CSS主要是默认的，js也是如此。感谢

Answer 1

试试这个

<div class="col-lg-12 gallery">
    <h1 class="page-header">Thumbnail Gallery</h1>
</div>

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="#">
        <img class="img-responsive" src="images/idee-bianco.png" alt="" onclick = "Show()">
    </a>
</div>

<style>
.gallery{
    display: none;   // gallery is not visible normally
 }
</style>
<script>
function Show(){
     document.getElementsByClass('gallery').style.display = 'block';
</script>

当用户单击图像时，您正在调用show函数来操作类库的显示属性。请记住，此功能会影响属于类＆＃39; gallery＆＃39;的所有元素。使用你想要在你的页面上只有一个这样的画廊的id。

选择缩略图时打开图库

1 个答案: