写真などを拡大表示させて、ユーザーに見せるときに、有効なのがポップアップモーダルですが、
プラグインを使用することで簡単に実装が可能です。
■必要ファイル
ZIPフを解凍した中にに入っている「modaal.min.js」と「modaal.min.css」だけです。
1 2 3 |
] <link rel="stylesheet" href="modaal.min.css"> <script src="modaal.min.js"></script> |
基本的な設定はhttp://humaan.com/modaal/にある通りで、
■HTML
1 2 3 4 |
<a href="#inline" class="inline">Show</a> <div id="inline"> ポップアップに表示させる内容 </div> |
■JS
1 |
$(".inline").modaal(); |
href=”#inline”にポップアップに表示させるID名を指定します。
ギャラリー表示では、スライダーのように次の画像を表示させたりなどが可能です、
■HTML
1 2 3 |
<a href="path/to/image-1.jpg" data-group="gallery" class="gallery">Show</a> <a href="path/to/image-2.jpg" data-group="gallery" class="gallery">Show</a> <a href="path/to/image-3.jpg" data-group="gallery" class="gallery">Show</a> |
■JS
1 2 3 |
$('.gallery').modaal({ type: 'image' }); |
コメント