画像を拡大する

Question

私はブートストラップからサムネイルを使用しています。そのサムネイルをクリックすると元のサイズの画像が表示されます。元のサイズの画像をクリックすると消えます。 は、私はこれはたぶん、あなたはCSS:onfocusを試すことができ、私のサムネイルコード

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

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

Answer 1

の一例である ..あなたは、私が説明しようとしているものを私を理解することができます願っています。

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

あなたがここで望むものは、モーダルプラグインです。ブートストラップには1つありますが、このような用途には適していません。

あなたは一つの実施とここでそれを使用する方法の例を見つけることができます：http://fancyapps.com/fancybox/

これはあなたの解決のためにやり過ぎかもしれないが、それには多くの選択肢があります。