おしゃれなデザインを作りたい。
浦島です。今回は、かっこよく画像を表示させる、lightbox系のjquery「strip」を紹介します。
lightboxとは、画像表示機能のことを言います。
まずは、公式サイトでサンプルをご覧ください。
公式サイトからダウンロードしてきたフォルダを解凍してください
今回必要なフォルダはdistの中にある「css」「js」この二つです。
適当な画像を２枚用意しましょう
jpgの画像を２枚用意しましょう。
|
1 2 3 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/strip.pkgd.min.js"></script> <link rel="stylesheet" type="text/css" href="css/strip.css" /> |
これをhead内に書き込みましょう
jQueryを適用させたいところにclass=”strip“をつけましょう
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/strip.pkgd.min.js"></script> <link rel="stylesheet" type="text/css" href="css/strip.css" /> <style> img { height: 400px; width: 400px; } </style> </head> <body> <a href="1.jpg" class="strip" data-strip-options="side:'top'"> <img src="1.jpg" alt=""></a> <a href="2.jpg" class="strip" data-strip-options="side:'bottom'"> <img src="2.jpg" alt=""></a> </body> </html> |
画像のサイズが大きすぎたのでcssで調節しました。
以上、レスポンシブlightbox jQuery「Strip 」の使い方の紹介でした。
今回のプラグインは書くコードが少なく非常に簡単にできます。
他にもyoutube の動画を埋め込むことが可能なので、オプションは公式サイトで確認してください。
Follow me!
