レスポンシブ対応のオシャレなlightbox Strip – A Less Intrusive Responsive Lightbox

Stripはレスポンシブ対応のオシャレなlightboxです。

デザインがスタイリッシュで、余計な装飾が無いので、いろいろなサイトに使えます。

↓写真をクリックすると、画面の横から写真を拡大表示したライトボックスが登場します。画面の縦幅いっぱいに表示されるのが、おしゃれです。

Strip A Less Intrusive Responsive Lightbox

↓動画をライトボックスで表示することもできます。

Strip A Less Intrusive Responsive Lightbox

スポンサーリンク

Stripの特徴

  • レスポンシブ対応のライトボック。モダンブラウザに対応。(IE 7+, Firefox 3+, Chrome 5+, Opera 9+, Safari 3+, iOS 5+ and Android 3+)
  • 様々なサイトに合わせやすい、スタイリッシュなデザイン。
  • 写真だけでなく、youtubeやvimeoの動画を表示できる。

Stripの使い方

基本的な使い方

<head>エリアで「jQuery」と「strip.pkgd.min.js」、「strip.css」を読み込みます。

aタグで拡大表示したい画像へのリンクを指定して、「class=”strip”」をつけます。

これだけで、実装完了です。

複数枚の画像を表示

複数枚の画像を同じlightboxでスライド表示させたいときは、 「data-strip-group=”mygroup”」をつけます。mygroupの部分には好きな名前を指定できます。この部分が同じものを一つのグループとして表示します。

lightboxの表示位置を変更

lightboxの表示位置は、右側以外に、上、下、左を指定できます。1つ目のリンクに「data-strip-group-options=”side:’left'”」を追加します。leftの部分をtopやbottomに書き換えます。

動画を表示

動画の表示は、youtubeやvimeoのリンクを指定するだけです。

ライセンス

非商用はクレジットとリンクを表示することで、無料で利用できます。

商用は有料です。「Developer License」と「Organization License」の2種類があります。「Developer License」は、個人の開発者向けで、プロジェクトごとに20ユーロです。Organization Licenseは組織向けで、70ユーロで、組織の開発者全員が利用できます。

スポンサーリンク
Strip - A Less Intrusive Responsive Lightbox – レスポンシブ対応のオシャレなlightbox

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2016.01.12
  • Views 527