プラグインなしでポップアップで画像拡大

Question

プラグインを使わずにjqueryを用いて画像を拡大させるにはどうすればいいでしょうか。

画像は複数あり、クリックするとその画像が中央でポップアップし、拡大時は背景が暗く、画面のどこかをクリックすると元に戻るようにしたいです。
自分で調べてはみたのですがクラスやidの付け方がよくわからないので思い通りに動きませんでした。
どうかご教授ください。

<?php
for ( $i=1;$i<16;$i++ ) {
    $name="images/object_".$i.".jpg";
  echo"<img src='$name' class='gazou' id='preview-$i' width='20%'>";
}
?>

$(function() {
    $(".gazou").click(function(){
        var name=$(this).attr("#preview-$i");
        $("name").css("width","50%");
        $("name").css("height","50%");
    });
}); 

Comments

[kszk311]

うまくいかないもので結構ですので、やってみたコードなどを記載ください。

[m.ts10806]

>クラスやidの付け方がよくわからない

プラグイン使わないのであれば自分で勝手につけて勝手に使えばいいのでは

Answer 1

<img class='gazou' src="https://placehold.jp/24/99cc99/339933/350x150.png?text=1" alt="">
<img class='gazou' src="https://placehold.jp/24/99cc99/339933/350x150.png?text=2" alt="">
<img class='gazou' src="https://placehold.jp/24/99cc99/339933/350x150.png?text=3" alt="">
<img class='gazou' src="https://placehold.jp/24/99cc99/339933/350x150.png?text=4" alt="">
<img class='gazou' src="https://placehold.jp/24/99cc99/339933/350x150.png?text=5" alt="">

.gazou {
  width: 30%;
}

$(function() {
    $(".gazou").click(function(){
        $(this).css("width","50%");
    });
}); 
```**動くサンプル：**[https://jsfiddle.net/vunrktjb/](https://jsfiddle.net/vunrktjb/)

---

**追記：**

```CSS
.gazou {
  width: 30%;
}
.gazou.gazou_large {
  width: 50%;
}

$(function() {
    $(".gazou").click(function(){
        $(this).toggleClass("gazou_large");
    });
}); 
```**動くサンプル：**[https://jsfiddle.net/xhb1oc07/](https://jsfiddle.net/xhb1oc07/)

Comments

[R908]

画像サイズをもどすにはどうすればいいですか

[kei344]

$(this).css("width","30%"); と切り替えるようにすればよいです。

[kei344]

https://jsfiddle.net/xhb1oc07/

[kei344]

質問文が書き換わったので、過去の回答になりました。
下記履歴の1番最初の質問に対する回答です。
https://teratail.com/questions/history-questions/172466

Answer 2

「Modal」のことですね。
「Modal」で検索すればいろんな例がでてくるかと思います。
一例として、以下をあげておきます。

<div class="imgs">
  <img class="modal" src="https://placeimg.com/200/200/nature">
  <img class="modal" src="https://placeimg.com/200/200/people">
  <img class="modal" src="https://placeimg.com/200/200/animals">
  <img class="modal" src="https://placeimg.com/200/200/arch">
</div>
<div id="expandModal">
</div>

.expand{
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  display: inline-block;
  padding: 1em;
}

#expandModal{
  display:none;
  position:fixed;
  padding-top: 50px;
  top:0;
  left:0;
  z-index:1;
  width: 100%;
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.9); 
}

#expandModal img{
  margin: auto;
  display: block;
  width: 50%;
  max-width: 700px;
}

$('.modal').each(function(){
  $(this).on('click',function(){
    let src = $(this).attr('src');
    let modalImage = `<img src=${src} >`;
　$('#expandModal').append(modalImage);
　$('#expandModal').show();
  });
});
$('#expandModal').on('click',function(){
  $(this).hide();
  $('#expandModal img').remove();
});

実際の動作: https://codepen.io/unotalk/pen/jdwqzx