レスポンシブウェブデザイン時代のLightbox!jQueryプラグイン「Strip」

PC、スマホにワンソースで対応するレスポンシブウェブデザインが流行るとともに画像拡大の定番だったLightboxを見かけなくなりました。
理由の一つとして操作性がモバイル端末でよくなかったことでしたが、jQueryプラグインのStripがそれを解消してくれるかもしれません。 これは画面の一部のみを覆い、操作性を向上させることで離脱を下げられることができます。
レスポンシブウェブデザイン時代のLightbox!jQueryプラグイン「Strip」サンプル

使用方法
Stripからファイル一式をダウンロード。
商用利用は有償となります。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="strip.js"></script>
<link rel="stylesheet" type="text/css" href="strip.css"/>
<style>
html {
min-height: 100%;
}
</style>

あとは下記のように記述してけば対応可能です。
<a href="画像ファイル" class="strip"
data-strip-caption="キャプション">テキストリンク</a>

以下のようにすることで、グループ対応、スライド開始位置調整、Youtube対応が可能です。

グループ

<a href="画像ファイル" class="strip" data-strip-group="mygroup" data-strip-caption="キャプション">テキストリンク</a>
<a href="画像ファイル" class="strip" data-strip-group="mygroup" data-strip-caption="キャプション">テキストリンク</a>

スライド開始位置調整

<a href="画像ファイル" class="strip" data-strip-group="mygroup" data-strip-group-options="side: 'bottom'" data-strip-caption="キャプション">テキストリンク</a>
<a href="画像ファイル" class="strip" data-strip-group="mygroup" data-strip-caption="キャプション">テキストリンク</a>

YouTube

<a href="http://www.youtube.com/watch?v=5XD2kNopsUs"
class="strip"
data-strip-options="
width: 853,
height: 480,
youtube: { autoplay: 0 }
">Youtube</a>

レスポンシブウェブデザイン時代のLightbox!jQueryプラグイン「Strip」サンプル

sponsors

「レスポンシブウェブデザイン時代のLightbox!jQueryプラグイン「Strip」」をシェアする

記事作成:
記事URL:

TOP > > > レスポンシブウェブデザイン時代のLightbox!jQueryプラグイン「Strip」