jQuery

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

投稿日:2019年10月29日 更新日:

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

サンプルソース

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

実行サンプル

sample.html

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

解説

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

スポンサーリンク

スポンサーリンク

-jQuery
-

執筆者:



  1. セイタテルアキ より:

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

  2. セイタテルアキ より:

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

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

    • とら より:

      ご質問ありがとうございます。
      サーバーにアップしたときのみ動作しないのであれば、
      20行目のhttp:をhttps:に変更もしくは削除してみてください。

      記事中に実行サンプルを追記しました。
      これは動作確認済みなので、ソースの違いを調査してみて下さい。

  3. セイタテルアキ より:

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

セイタテルアキ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサーリンク