• TOP
  • WordPress
    • まとめ
    • JavaScript
    • 記事
    • 画像/動画
    • 管理
    • アクセス/SEO対策
    • カテゴリ
    • サイドバー/ヘッダー
    • アイキャッチ
    • パスワード
    • コメント
  • プラグイン
  • CSS
  • ユーザー限定
Plus WordPress ワードプレスの基本・応用テクニックを紹介
ホーム › JavaScript › レスポンシブなLightbox jQuery プラグイン Strip

レスポンシブなLightbox jQuery プラグイン Strip

jQueryプラグイン Strip

画像や動画が画面外の上下左右からおしゃれにスライドする、レスポンシブなLightboxです。

ligtbox_strip001

デモ

  • 画像1
  • 画像2
  • 動画1

設定

https://www.stripjs.com/ ここからファイルstrip-x.x.xをゲットします。設置場所やファイル名は各々好きなように。

まず↓を読み込ませます。

1
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

次にダウンロードしたファイル内のstrip.pkgd.min.jsとstrip.cssを読み込ませます。

1
<script type="text/javascript" src="strip-1.5.1/dist/js/strip.pkgd.min.js"></script>

1
<link rel="stylesheet" type="text/css" href="strip-1.5.1/dist/css/strip.css"/>

HTML(基本)

  • 画像1
    対象の画像や動画にクラスstripを付けます。
    1
    <a href="image.jpg" class="strip">画像1</a>
  • キャプションを付けたい場合、data-strip-captionを追加し情報を記述。
    画像1(キャプション付)
    1
    <a href="image.jpg" class="strip" data-strip-caption="画像1のキャプションです。ここに文字が入ります">画像1(キャプション付)</a>
  • 動画1
    YouTube動画のURLは通常のURLでも短縮でもどちらでもOKです。
    https://www.youtube.com/watch?v=***********
    https://youtu.be/***********
    1
    <a href="https://youtu.be/FxMOOyQI99g" class="strip">動画1</a>

複数の画像や動画をグループ化

グループ化すると画像の左右にページをめくる矢印が出るようになります。

画像1 (グループ1)

画像2 (グループ1)

画像3 (グループ1)

data-strip-groupを追加しグループ名を付けます。

1
2
3
<a href="image1.jpg" class="strip" data-strip-group="group1">画像1</a>
<a href="image2.jpg" class="strip" data-strip-group="group1">画像2</a>
<a href="image3.jpg" class="strip" data-strip-group="group1">画像3</a>

画像や動画の最大幅を指定

data-strip-group-optionsに最大幅を追加。

画像1を最大幅300pxとし、動画1とグループ化しました。

画像1 maxWidth: 300 (グループ2)

動画1 (グループ2)

1
2
<a href="image.jpg" class="strip" data-strip-group="group2" data-strip-group-options="maxWidth: 300">画像1</a>
<a href="https://youtu.be/FxMOOyQI99g" class="strip" data-strip-group="group2">動画1</a>

※動画をグループ化すると矢印は外に表示され、その分幅が大きくなります。

グループ化した画像や動画の矢印をループさせない

画像の左右に出る矢印をループさせたくない場合です。画像1の<、動画1の>がでなくなります。

画像1 (グループ3)

画像2 (グループ3)

動画1 (グループ3)

data-strip-group-optionsにloop: falseを追加。

1
2
3
<a href="image1.jpg" class="strip" data-strip-group="group3" data-strip-group-options="maxWidth: 500,loop: false">画像1</a>
<a href="image2.jpg" class="strip" data-strip-group="group3">画像2</a>
<a href="https://youtu.be/FxMOOyQI99g" class="strip" data-strip-group="group3">動画1</a>

スライドエフェクトなし、矢印の位置

スライドのアニメーションをさせたくない場合、data-strip-group-optionsにeffects: falseを追加。

矢印を画像の上ではなく、画像の横に配置したい場合、overlap: falseを追加。

画像1 (グループ4)

画像2 (グループ4)

画像3 (グループ4)

1
2
3
<a href="image1.jpg" class="strip" data-strip-group-options="maxWidth: 500,effects: false,overlap: false" data-strip-group="group4">画像1 (グループ4)</a>
<a href="image2.jpg" class="strip" data-strip-group="group4">画像2 (グループ4)</a>
<a href="image3.jpg" class="strip" data-strip-group="group4">画像3 (グループ4)</a>

YouTube動画の幅と高さを細かく指定、自動再生の可否

  • data-strip-group-optionsに、(例) width: 320, height: 180を追加。
    動画1 (width: 320, height: 180)
    1
    <a href="https://www.youtube.com/watch?v=FxMOOyQI99g" class="strip" data-strip-options="width: 320, height: 180, youtube: { autoplay: 0 }">動画1</a>
  • これはmaxWidth: 320と同じになります。
    動画2 (maxWidth: 320)
    1
    <a href="https://www.youtube.com/watch?v=FxMOOyQI99g" class="strip" data-strip-options="maxWidth: 320, youtube: { autoplay: 0 }">動画2</a>
  • (例) width: 320, height: 100を追加。
    動画3 (width: 320, height: 100)
    1
    <a href="https://www.youtube.com/watch?v=FxMOOyQI99g" class="strip" data-strip-options="width: 320, height: 100">動画3</a>
  • 自動再生しない場合、youtube: { autoplay: 0 }を追加。

スライドしてくる方向を指定

指定しない場合は右からスライドします。

画像 (指定なし)

画像 (left)

画像 (top)

画像 (bottom)

data-strip-group-optionsにside: ‘方向’を追加。なし(←)、left(→)、top(↓)、bottom(↑)

1
2
3
4
<a href="image1.jpg" class="strip">画像 (指定なし)</a>
<a href="image2.jpg" class="strip" data-strip-options="side: 'left'">画像 (left)</a>
<a href="image3.jpg" class="strip" data-strip-options="side: 'top'">画像 (top)</a>
<a href="image4.jpg" class="strip" data-strip-options="side: 'bottom'">画像 (bottom)</a>

背景を透過

ウインドウの背景を透過、キャプションの背景色を白に変更し透過、キャプション内の文字色を黒に変更。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
/*ウインドウの背景を透過*/
.strp-container, .strp-window{
background-color: rgba(0,0,0,0.6);}
 
/*キャプションの背景色を白に変更し透過、文字色を黒に変更*/
.strp-info {
color: #000;
background-color: rgba(255,255,255,0.6);
}
/*ページ番号の文字色を黒に変更*/
.strp-position {
color: #000;
}

タグ: Lightbox, jQuery, 動画, 画像
カテゴリー: JavaScript

コメントを残す コメントをキャンセル

関連記事
画像や動画をポップアップし再生
スライドショー WP Slider Plugin
管理画面の投稿一覧へアイキャッチを表示
WordPressのプラグイン集
Webページ全体をフェードイン、フェードアウト
プラグインを有効化、または使用時の403エラーの対処
人気記事
高機能でオシャレな実用的メニュー(HTMLテンプレート)
Webページ全体をフェードイン、フェードアウト
投稿、固定ページ内にウィジェットを挿入
記事の続きを読むを消す
最新記事を自動でスライドショー
コメントに画像を挿入できるようにする
指定したカテゴリIDのカテゴリ名のみ取得
フリーの高機能HTMLテンプレート
記事ごとに個別のCSSやJavaScriptを追加
特定のカテゴリに個別のCSSを適応させる
カテゴリ別に違うカテゴリ(テンプレート)を表示
タイトルや本文からタグを自動生成
画像や動画をポップアップし再生
非表示、置換テクニック
Contact Form7の送信完了画面をカスタマイズ
phpMyAdminのユーザー名とパスワードの確認方法
カテゴリー別に違うサイドバーを出す
CSS3のみで画面外からメニューをスライド表示
CSSやJavaScriptのハンドル名(id)を確認
管理画面の投稿一覧で投稿IDを表示する
アイキャッチ(サムネイル)を呼び出す
スライドショー Meteor Slides
カテゴリに別々のアイコンを表示
レスポンシブなLightbox jQuery プラグイン Strip
背景をスライドショーにする
ページごとに違うヘッダーを読み込む
記事をランダムに表示させる
コメントのメールアドレス入力覧を消す
CSS3 角を丸くする
スライドショー Skitter Slideshow
パスワードを間違えると一定時間ログインできないようにする
購読者にパスワードを変更させない
ショートコードを追加するプラグイン
管理画面の投稿一覧へアイキャッチを表示
個別にJavaScriptを振り分ける
Contact Form7に画像認証機能を追加
リンクの表示順を並べ替える
サイト全体のサムネイルサイズを変更
CSS3 ボックスシャドウ
JavaScriptで画面外からメニューをスライド表示
    メルマガ購読
  • メールマガジンではWordPressのおもしろい使い方を紹介しています。またユーザー限定ページとも連動しているので、そちらも自由に観覧できるようになります。
  • 登録フォーム
PlusWordPress
  • お問い合わせ
  • このサイトについて
Link
  • 人気ブログランキング
  • 使えるWordPressテーマ
背景変更
  • デフォルト
  • ホワイト
  • ブラック
  • グレー
  • Facebook
  • RSS Feed
  • Google Plus
© 2023 Plus WordPress