レスポンシブ対応のオシャレな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」を読み込みます。

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

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

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

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

複数枚の画像を表示

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

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

lightboxの表示位置を変更

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

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

動画を表示

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

<a href="http://www.youtube.com/watch?v=c0KYU2j0TM4" class="strip">Youtube</a>

ライセンス

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

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

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 884