Blog

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

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

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

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

 

DEMO

stripの使い方

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

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

 

stripのファイルを読み込む

strip-skinsはstrip.cssと同階層に入れおきましょう。

 

stripの設定

あとはもう適用させたい箇所に、
class=”strip”をつければOKです!

 

 

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

 

 

data-strip-group・・・スライドショーみたいな感じで設定ができます。
data-strip-caption・・・キャプションを付けられます。
data-strip-options・・・写真が出てくる箇所を決められます。(デフォルトは右)

 

他にもオプションはありますので、公式サイトご覧ください。

YoutubeやVimeoも設定することが出来ます。

 

今度これ実際に使用してみたいですね!

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ