レスポンシブ＆フラットに合ったLightbox系jQueryプラグイン「strip」

今までのLightbox系のプラグインとは結構違う表示のされ方で、昨今のwebサイトに合うようなプラグインです。

なかなかカッコいいうえに、レスポンシブ対応かつ、オプションもlightbox系プラグインと同等のものがあるので、使い勝手がいいと思います。

簡単なデモも作ってみたので、よければご覧ください。

DEMO

stripの使い方

まずは下記URLからダウンロードします。
Strip – A Less Intrusive Responsive Lightbox | Download

ダウンロードしたファイルの、
dist > js > strip.pkgd.js
dist > cssのフォルダまるごと
を使います。

stripのファイルを読み込む


<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です！


<a href="sample01.jpg" class="strip"><img src="sample01.jpg" alt="" /></a>

1	<a href="sample01.jpg" class="strip"><img src="sample01.jpg" alt="" /></a>

DEMOのソースは以下になります。


<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>

<ul>