クリックしたときにHTML画像をポップアップ

こんにちは、私は作成しているウェブサイト上の写真をいくつか持っています。ユーザーがイメージをクリックしてイメージのポップアップを表示できるようにしたいので、実際のイメージの元のサイズのように、私は以下のイメージのコードを追加しました。クリックしたときにHTML画像をポップアップ

<section id="main"> 
      <div class="inner"> 
      <section> 

<div class="box alt"> 
     <div class="row 50% uniform"> 

           <div class="4u"><span class="image fit"><img 
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3> 
</span></div> 

           <div class="4u"><span class="image fit"><img 
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3> 
</span></div> 
           <div class="4u"><span class="image fit"><img 
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3> 
</span></div> 

    </div> 
       </div> 
</section> 

      </div> 
     </section>

ホバー：

.image.fit >img:hover { 
      width: 1000px; 
      height: 1000px; 
      position: absolute; 
     }

出典

2017-07-11 Rikhil Shah

（https://stackoverflow.com/tour）[StackOverflowのへようこそ]このhttps://www.w3schools.com/howto/howto_css_modal_images.asp – Tareq

を見てみましょう。質問を改善するヒントについては、[質問]ページをご覧ください。大きな質問は、コミュニティからより迅速かつより良い回答を生み出す傾向があります。 – ochi

各画像には2つのバージョンが必要です（小さなサムネイルとフルサイズの画像）。しかし、私たちはコード作成サービスではありません。あなたはそれを打ち、あなたが持っている特定のプログラミング上の問題に戻る必要があります。 –

span要素を完全に削除し、そのクラスをイメージに配置する必要があります要素そのもの。

また、あなたのために何もしていない入れ子のsection要素があります。

最後に、HTMLの見出し要素（<h1> ... <h6>）は、テキストをスタイルする方法のために使用しないでください。書式設定はCSSの仕事です。見出しの代わりに、それぞれのイメージとそれに付随するテキストをfigureとfigcaption要素で囲むことがより適切です。

img { 
 
    width:200px; 
 
    border:1px solid black; /* This is only added for testing purposes*/ 
 
} 
 

 
.thumbnail:hover { 
 
    width: 500px; 
 
    height:auto; 
 
    position:relative; 
 
    /* push image to the right by 1/2 the screen width and 1/2 the image width */ 
 
    margin-left:calc(50% - 250px); 
 
}

<section id="main"> 
 
    <div class="inner"> 
 
    <div class="box alt"> 
 
     <div class="row 50% uniform"> 
 
     <div class="4u"> 
 
      <figure> 
 
      <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail"> 
 
      <figcaption>Marble</figcaption> 
 
      </figure> 
 
     </div> 
 

 
     <div class="4u"> 
 
      <figure> 
 
      <img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail"> 
 
      <figcaption>Marble</figcaption> 
 
      </figure> 
 
     </div> 
 
      
 
     <div class="4u"> 
 
      <figure> 
 
      <img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail"> 
 
      <figcaption>Marble</figcaption> 
 
      </figure> 
 
     </div> 
 
      
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

出典

2017-07-11 23:27:18

あなたが必要なものを満たしています、私は以下のコードを考えてJavascript or jquery

のいくつかを学ぶ必要があり、この機能を行うには

<html> 
<head> 
<meta charset="utf-8"/> 
<script> 
function show_img(obj) { 
    var img_src = obj.getAttribute("src"); 
    document.getElementById("full_screen").style.display = "block"; 
    document.getElementById("img_explore").innerHTML = "<img src="+img_src+">"; 
} 
</script> 
</head> 
<body> 
<style> 
#full_screen {position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);} 
#full_screen img {position:absolute; width:100%; height:100%;} 
#close {position:absolute; background:rgba(0,0,0,0.6); width:100%; text-align:right; color:#fff; z-index:10;} 
     </style> 
<div id="full_screen"> 
<div id="close" onclick="document.getElementById('full_screen').style.display = 'none';">Close</div> 
<div id="img_explore"></div> 
</div> 
<section id="main"> 
      <div class="inner"> 
      <section> 

<div class="box alt"> 
     <div class="row 50% uniform"> 

           <div class="4u"><span class="image fit"><img 
src="editor-photo-landing-image-v1.jpg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3> 
</span></div> 

           <div class="4u"><span class="image fit"><img 
src="food-restaurant-kitchen-meat-23086.jpg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3> 
</span></div> 
           <div class="4u"><span class="image fit"><img 
src="pexels-photo-167890.jpeg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3> 
</span></div> 

    </div> 
       </div> 
</section> 

      </div> 
     </section> 
</body> 
</html>

出典

2017-07-11 23:18:40

私はScott Marcus' answerを撮影して、元の要求だった、クリックするようになってきました。

主な違いは、aタグをページ上のエレメントにターゲティングし、CSSで:targetを使用することです。

img { 
 
    width:200px; 
 
    border:1px solid black; /* This is only added for testing purposes*/ 
 
} 
 

 
.thumbnail:target { 
 
    width: 500px; 
 
    height:auto; 
 
    position:relative; 
 
    /* push image to the right by 1/2 the screen width and 1/2 the image width */ 
 
    margin-left:calc(50% - 250px); 
 
}

<section id="main"> 
 
    <div class="inner"> 
 
    <div class="box alt"> 
 
     <div class="row 50% uniform"> 
 
     <div class="4u"> 
 
      <figure> 
 
      <a href="#image1"> 
 
      <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail" id="image1"> 
 
      </a> 
 
      <figcaption>Marble</figcaption> 
 
      </figure> 
 
     </div> 
 

 
     <div class="4u"> 
 
      <figure> 
 
      <a href="#image2"> 
 
      <img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail" id="image2"> 
 
      </a> 
 
      <figcaption>Marble</figcaption> 
 
      </figure> 
 
     </div> 
 
      
 
     <div class="4u"> 
 
      <figure> 
 
      <a href="#image3"> 
 
      <img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail" id="image3"> 
 
      </a> 
 
      <figcaption>Marble</figcaption> 
 
      </figure> 
 
     </div> 
 
      
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

出典

2017-07-12 01:13:45

クリックしたときにHTML画像をポップアップ

答えて

関連する問題