今までのLightbox系のプラグインとは結構違う表示のされ方で、昨今のwebサイトに合うようなプラグインです。
なかなかカッコいいうえに、レスポンシブ対応かつ、オプションもlightbox系プラグインと同等のものがあるので、使い勝手がいいと思います。
簡単なデモも作ってみたので、よければご覧ください。
stripの使い方
まずは下記URLからダウンロードします。
Strip – A Less Intrusive Responsive Lightbox | Download
ダウンロードしたファイルの、
dist > js > strip.pkgd.js
dist > cssのフォルダまるごと
を使います。
stripのファイルを読み込む
|
1 2 3 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/strip.js"></script> <link type="text/css" href="css/strip.css" rel="stylesheet" media="all" /> |
strip-skinsはstrip.cssと同階層に入れおきましょう。
stripの設定
あとはもう適用させたい箇所に、
class=”strip”をつければOKです！
|
1 | <a href="sample01.jpg" class="strip"><img src="sample01.jpg" alt="" /></a> |
DEMOのソースは以下になります。
|
1 2 3 4 5 6 7 8 9 | <ul> <li><a href="sample01.jpg" class="strip" data-strip-group="mygroup"><img src="sample01.jpg" alt="" /></a></li> <li><a href="sample02.jpg" class="strip" data-strip-group="mygroup" data-strip-caption="どこかの海"><img src="sample02.jpg" alt="" /></a></li> <li><a href="sample03.jpg" class="strip" data-strip-group="mygroup"><img src="sample03.jpg" alt="" /></a></li> <li><a href="sample06.jpg" class="strip" data-strip-group="mygroup" data-strip-options="side: 'top'"><img src="sample06.jpg" alt="" /></a></li> <li><a href="sample04.jpg" class="strip" data-strip-group="mygroup" data-strip-options="side: 'left'"><img src="sample04.jpg" alt="" /></a></li> <li><a href="sample05.jpg" class="strip" data-strip-group="mygroup"><img src="sample05.jpg" alt="" /></a></li> <li><a href="sample07.jpg" class="strip" data-strip-group="mygroup"><img src="sample07.jpg" alt="" /></a></li> </ul> |
data-strip-group・・・スライドショーみたいな感じで設定ができます。
data-strip-caption・・・キャプションを付けられます。
data-strip-options・・・写真が出てくる箇所を決められます。(デフォルトは右)
他にもオプションはありますので、公式サイトご覧ください。
YoutubeやVimeoも設定することが出来ます。
今度これ実際に使用してみたいですね！
