[jQuery] サムネイル画像をクリックすると拡大表示する

投稿日：2019年10月29日更新日：2021年2月12日

jQueryを使ったサムネイル画像をクリックすると拡大表示するサンプルです。

サンプルソース

例）画像をクリックすると拡大表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style type="text/css">
#img1Big{
  display:none;
}

#back{
  display:none;
  background:rgba(0, 0, 0, 0.5);
  position:absolute;
  left:0px;
  top:0px;
}

</style>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  //画像クリック
  $('#img1').click(function(e){
    $('#back').css({
      'width':$(window).width(),
      'height':$(document).height()
    }).show();

    $('#img1Big').css({
      'position':'absolute',
      'left':Math.floor(($(window).width() - $('#img1Big').width()) / 2) + 'px',
      'top':$(window).scrollTop() + 50 + 'px'
    }).fadeIn();
  });

  //拡大表示クリック
  $('#img1Big, #back').click(function(){
    $('#img1Big').fadeOut('slow', function(){
      $('#back').hide();
    });
  });

});
</script>
</head>
<body>
  <img id="img1" src="neko.png" width="100"><br>
  <div id="back"></div>
  <div id="img1Big"><img src="neko.png"></div>
</body>
</html>

<!DOCTYPE html>

<head>

#img1Big{

display:none;

}

#back{

display:none;

background:rgba(0, 0, 0, 0.5);

position:absolute;

left:0px;

top:0px;

}

</style>

$(function(){

//画像クリック

$('#img1').click(function(e){

$('#back').css({

'width':$(window).width(),

'height':$(document).height()

}).show();

$('#img1Big').css({

'position':'absolute',

'left':Math.floor(($(window).width() - $('#img1Big').width()) / 2) + 'px',

'top':$(window).scrollTop() + 50 + 'px'

}).fadeIn();

});

//拡大表示クリック

$('#img1Big, #back').click(function(){

$('#img1Big').fadeOut('slow', function(){

$('#back').hide();

});

</script>

</head>

<body>

</body>

</html>

実行サンプル

sample.html

別ウィンドウで開きます。

解説

拡大表示中から元に戻るには、拡大表示中の画面のどこかをクリックすればOKです。
サーバーにアップした時のみ動作しない場合は、20行目の「http:」を「https:」に変更するか削除してください。
例）//code.jquery.com/jquery-3.2.1.min.js

執筆者：とら

セイタテルアキより:

2021年2月9日 12:12 PM

サンプルソースをコピーしサンプル画像をこちらの画像に変えてブラウザーで表示しましたが画像が映りません。画像はJPGです。

返信
セイタテルアキより:

2021年2月9日 5:17 PM

すみません。前回の質問では表示するサムネイル画像を２つ表示したかったのですが、出来ませんでした。
　　
width="10%>

この組み合わせをもう１組記述しました
　このような表示をし拡大したかったもですが、どうすればよいのでしょうか。
　お忙しいなかよろしくお願いいたします。

返信
- とらより:
  
  2021年2月12日 10:58 AM
  
  ご質問ありがとうございます。
  サーバーにアップしたときのみ動作しないのであれば、
  20行目のhttp:をhttps:に変更もしくは削除してみてください。
  
  記事中に実行サンプルを追記しました。
  これは動作確認済みなので、ソースの違いを調査してみて下さい。
  
  返信
セイタテルアキより:

2021年2月12日 8:11 PM

48,49,50のｓｒｃのみを変えてこの３行をそのままコピーして実行しましたがサムネイルは２つ表示しましたが、2つ目がクリックできません。httpsにしても同じでした。削除すると全くできません。2つ目以降は何かする必要があるのでしょうか。サンプル画像は1つの場合しかありませんが。
　それと拡大画像がwiondow枠からはみ出て全体が一度に映りません。これは別の問題ですか。
はじめてのホームページ作りでプラグインは複雑で、設定がむつかしく単純に拡大したいだけなので探していました。

返信

comment コメントをキャンセル