menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/06/22
  • JQuery

レスポンシブでオシャレなLightbox系JQuery「strip.js」

strip
「strip.js」は今までのLightbox系のプラグインとは少し違い、フラットなデザインにも馴染み、レスポンシブでモバイル端末でも高い操作性があります。

使用方法

ダウンロード

・strip(github)

準備するファイル

・jquery.js
・strip.pkgd.js
・strip.css
・strip-skinsフォルダ

外部ファイルの読み込み

head内へ以下を追加します。

HTML

デフォルト設定


キャプション表示

「data-strip-caption=”キャプション内容”」を追加します


グループ表示

「data-strip-group=”任意”」を追加します


最大幅を指定

「 data-strip-group-options=”maxWidth:(任意の数値)”」を追加します


スライド開始位置 上下左右

「 data-strip-group-options=”side:’方向'”」を追加します


YouTube

OPTION

この他にもまだオプションがありますので公式サイトで確認してください。

とても簡単に設定でき使いやすくLightbox系では今一番のオススメになります。商用利用は有償になります。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11