单击以缩放图片


Click to zoom a picture

我正在使用来自引导程序的缩略图,当我单击该缩略图以显示原始大小的图片以及单击具有原始大小的图片时,我想这样做消失。我希望你能理解我想要解释的内容。这是我的缩略图代码的示例

<div class="row">
  <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
      </div>
      ...
    </div>

也许你可以试试CSS:onfocus。

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

目录:

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

请注意,为了使<a>可聚焦,此处必须tabindex="0"

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

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

对于您的解决方案来说,这可能是矫枉过正,但有很多替代方案。