画像を拡大表示させる時はこれを使っています。
モーダルウィンドウのプラグインは山ほどありますが、色々試してみた結果、これが一番使いやすかったです。
プラグインのダウンロード
下記サイトからcolorboxのプラグインをダウンロードし、
colorbox.cssとjquery.colorbox-min.js、imagesを任意の場所に置く。
(imagesには画像を拡大表示した時に必要な画像が入っています）
必要なファイルを読み込む
下記3つをHTMLに読み込みます。
- colorbox.css
- jQuery
- jquery.colorbox-min.js
<link rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>JavaScriptを記述
<script>
$(document).ready(function(){
$(".ex").colorbox({rel:'ex'});
});
</script>HTML
<a href="images/img01.jpg" class="ex" title="">
<img src="images/img01.jpg" width="300" alt="">
</a>画像がある場所によっては、colorbox.cssの画像指定のパスを書き換える必要があります。
他にもいろいろオプションが用意されているようです。
下記公式サイトを参考にカスタマイズしてみるのもいいかもしれません。
コメント