[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip

Post on:2014年10月6日

スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。

フラットなデザインにも相性が非常によく、操作も快適でエレガントです！
しかも、IE7+にも対応。

サイトのキャプチャ

Strip
Strip -GitHub

Stripのデモ

デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。

各画像をクリック・タップすると、拡大画像がスライドして表示されます。
拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。

デモのアニメーション

デモ：幅1,200pxで表示

レスポンシブにも対応しており、表示サイズに合わせて動作します。

デモのアニメーション

デモ：幅780pxで表示

スライド表示させるのは画像だけでなく、YouTubeやVimeoなどの動画（自動再生の有無）もサポートされています。

Stripの使い方

Step 1: 外部ファイル

当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。

<head>
  ...
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="/js/strip/strip.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/strip/strip.css"/>
</head>

Step 2: HTML

画像を表示させるアンカーに「.strip」を加えます。
アンカーは画像でもテキストでもOKです。

<a href="image.jpg" class="strip">Show image</a>

キャプションを加えたい場合は、data属性を使用します。

<a href="image.jpg" class="strip" data-strip-caption="キャプションのテキスト">Caption</a>

スライドの方向（上下左右）や最大幅の設定もできます。

<a href="image.jpg" 
   class="strip" 
   data-strip-options="side: 'left', maxWidth: 500">Options</a>

複数の画像をグループ化させる時は「data-strip-group」を使用します。

<a href="image1.jpg" 
   class="strip" 
   data-strip-group="mygroup">Image 1</a>
<a href="image2.jpg" 
   class="strip" 
   data-strip-group="mygroup">Image 2</a>

sponsors

top of page

©2024 coliss