今日のTIPS:各リンクの上でマウスホイールをクリックすると、別ウィンドウでページが開きます

【jQuery】画像拡大モーダルウィンドウのプラグイン「しのモーダル」を作成しました。

2020-09-14

ライブラリでライブラリを作る女の子

有難いことに、jQueryを使ったモーダルウィンドウの作成方法を解説した記事が、多くの人に読んでもらえているようです。

そのため、需要がありそうだったので、シンプルなモーダルのjQueryプラグイン「しのモーダル」を作成しました。

よろしければweb制作にご活用ください!

説明

・Webサイト内の画像をクリックすると、クリックした画像が拡大表示される。
・×ボタンを押すと戻る

という、とてもシンプルなものです。

クリック前
クリック後

使い方

①ファイルをダウンロード

下記アンカーからファイルをダウンロードしてください。

shinomodal.jsのダウンロード

②読み込みコード記述

jQueryの読み込みコードの後で、ダウンロードした「shinomodal.js」を読み込ませるように記述してください。

下記例ですが、ディレクトリ指定にご注意ください。

<script src="shinomodal.js"></script>

③class設定

拡大したい画像を指定している「img」タグに、「shinomodal_baseimg」という名前のクラスを設定してください。

<img src="cat.png" alt="" class="shinomodal_baseimg">

以上です、とてもシンプルです。

これで、「shinomodal_baseimg」のクラスを設定した画像をクリックすると、拡大表示されるはずです。

注意点

「img」にマージンを設定していると表示がずれてしまう可能性がありますので、場合によって調整してください。

縦に長い画像は、画面上下をはみ出してしまう場合がありますのでご注意ください。

このプラグインを利用するHPに対して、権利表記などの記載は特に不要なので、自由にお使いください。

このプラグインを使用したことで生じたトラブルについて、私は一切責任を負いませんので、自己責任でご利用ください。

▼【30日返金保証あり】買い切り型の学習動画サービス「Udemy」でスキルアップ!