Question

我正在使用引导程序中的缩略图，我想在我点击该缩略图时显示原始大小的图片，当我点击某个原始大小的图片消失时。我希望你能理解我正在努力解释的内容。这是我的缩略图代码

的示例

<div class="row">
  <div class="col-xs-6 col-md-3">

        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
      </div>
      ...
    </div>

Answer 1

也许你可以试试CSS:onfocus。

a.thumbnail:focus > img.small {
        visibility: hidden;
}
a.thumbnail:focus > img.large{
        visibility: visible;
}

HTML：

    <a href="#" class="thumbnail" tabindex="0">
      <img class="small" src="..." alt="..."></img>
      <img class="large" src="..." alt="..."></img>
    </a>

请注意，此处需要tabindex="0"才能使<a>成为焦点。

Answer 2

你想要的是一个模态插件。 Bootstrap有一个，但它不适合这种用途。

您可以在此处找到一个实现以及如何使用它的示例：http://fancyapps.com/fancybox/

这可能对你的解决方案来说太过分了，但是有很多替代方案。

单击可缩放图片

2 个答案: