單擊以放大圖片

我使用的是引導程序的縮略圖，我希望在單擊該縮略圖時顯示原始大小的圖片，然後單擊某處時顯示原始大小的圖片消失。我希望你能理解我什麼，我試圖解釋.. 這是我的縮略圖代碼的例子單擊以放大圖片

<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

單擊以放大圖片

回答

相關問題