选择缩略图时打开图库

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函数，该函数操纵类库的display属性。 请记住，此功能将影响所有属于“图库”类的元素。 您的用户ID打算在您的页面上只有一个这样的图库。