单击以放大图片

我使用的是引导程序的缩略图，我希望在单击该缩略图时显示原始大小的图片，然后单击某处时显示原始大小的图片消失。我希望你能理解我什么，我试图解释.. 这是我的缩略图代码的例子单击以放大图片

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

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

来源

2016-04-25 Dimas

我在谷歌搜索和我发现只有JavaScript的方法:)但我想知道是否有可能使它没有JavaScript – Dimas

JavaScript有什么问题？没有它，你最好的选择就是到全尺寸图像的URL，以使它在新窗口中打开。 – ceejayoz

@ceejayoz哈！没有JavaScript，你无法使其工作。 –

也许你可以试试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>可获得焦点。

来源

2016-04-25 12:51:25 gdlmx

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

你可以找到一种实现方式以及如何在这里使用它的例子：http://fancyapps.com/fancybox/

这可能是矫枉过正的解决方案，但也有它的许多替代品。

来源

2016-04-25 12:53:54 beerwin

单击以放大图片

回答

相关问题