v2.9.0 Lightboxで、表示された画像のモーダルウィンドウにSNSソーシャルボタンを設置する
~ Twitter, Facebook, Line, google, hatena, pocket, mixi など 15SNS~

Lightboxの使い方 Lightbox v2.9.0 - 最新バージョン
add social share buttons in photo Lightbox and other web pages

サンプル(デモ)使用方法LightboxのダウンロードLightbox v2.9.0のカスタマイズLightbox v2.9.0のソーシャルボタンカスタマイズ方法

Lightbox2は、 サムネイル画像をクリックするとJavascript(Ajax)を利用して同じページのモーダルウィンドウに、拡大画像をオーバーレイ表示する定番の画像ビューアです。 Lightbox2は、JSフレームワークに、jQueryフレームワークを使用しています(旧版はPrototypeフレームワーク)。
本ページは、現在の最新バージョンはv2.9.0を使って、表示された画像のモーダルウィンドウにSNSソーシャルボタンを設置してみました。

ソーシャルボタンの設置の方法はつぎのとおりです。
ここで扱うソーシャルボタンは、つぎの2つの設置方法があります。ボタンの設置は、いずれも公式SNSサイトに行くことなしに設置できます。

設置できるソーシャルボタンは、モーダルウィンドウ上では、フリーデザイン画像ボタンが15、公式ボタンが6種類(Twitter,Evernote不可)です。 また、通常ページ上では、フリーデザイン画像ボタンが15、公式ボタンが8種類です。

表 ソーシャルボタン設置対応表 (注)X:ここでは未対応 △:モーダルウィンドウ上に設置不可
SNSボタンの使用Twitter Facebook Line google hatena pocket mixi tumblr GREE pinterest
公式ボタンいいね!
カウンタ有
X共有
カウンタ有
共有
カウンタ有
XチェックXいいね!
カウンタ無
共有
オリジナルデザイン
画像ボタン
(カウンタ無)
share(共有)共有共有共有共有共有チェック共有共有共有
SNSボタンの使用 feedly inoreader RSS amebaEvernote
公式ボタンXXXX
オリジナルデザイン
画像ボタン
(カウンタ無)
RSSRSSRSS共有共有

Lightbox 2 WordPress Plugin 日本語版については、このサイトを参照。

◆サンプル(lightboxデモ)

  1. 1枚の画像


  2. 複数画像の1グループ
    1 風景 2 風景 3 風景 4 風景 5 風景

◆サンプル(ソーシャルボタンデモ)

≫ デモ(新しいウィンドウ)(下はデモページのキャプチャー画像)

▼lightboxモーダルウィンドウ上の設置例

▼親ページ(親ウィンドウ)上の設置例

 使用方法
ダウンロード
 
1. ダウンロードしたLightbox2(v2.9.0)ファイル名:lightbox2-master.zipを解凍し、下のように配置します。
   【Lightbox v2.9.0 設置例(本ページ)】 []:フォルダ


   |---[images] 表示画像用フォルダ(自分で用意) 
   |      |
   |      | 
   |
   |---[lightbox290] 配下にdistフォルダ内のcss,images,js各フォルダのファイルを配置する
          |
          |---[css]
          |     |---lightbox.css
          |   
          |---[images] lightbox.cssとlightbox.jsがこのフォルダ内のLightbox用画像を参照する 。
          |     |---close.png
          |     |---loading.gif
          |     |---next.png
          |     |---prev.png
          |     |
          |     |---その他画像ファイル 本ページで使用(自分で用意)
          |
          |---[js]
          |     |---lightbox.js  ←SNSボタン設置のため修正あり
          |     |---lightbox.min.js
          |     |---lightbox-plus-jquery.js  lightbox.js + jQueryファイル *1 
          |     |---lightbox-plus-jquery.min.js lightbox.js + jQueryファイル *1
          |     
          |---lightbox-v290.html 本ページ(自分で用意)

          ※青字のファイルは、Lightbox2サイトからダウンロードしたdistフォルダ配下のファイルです。
           lightbox290フォルダ配下には、ダウンロードファイルのdistフォルダ内のcss,images,js各フォルダ内の
           ファイルを配置した。(lightbox290は任意の名前)
          ※ *1 ダウンロードしたjQueryファイル(lightbox-plus-jquery.js、lightbox-plus-jquery.min.js)の代わりに、
           GoogleやMicrosoftのCDN(Content Delivery Network)のjQueryファイルを読み込んで使用することも可能です。
           例;Google Ajax API CDN
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
準備
 
1. jQueryファイルおよびLightbox2のCSSファイルをインクルードするタグを、HEADタグ内に書きます。
・jQuery記述方法1(Google Ajax API CDNからjQueryをロードできる環境にある場合)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
・jQuery記述方法2(Google Ajax API CDNからjQueryをロードできない環境にある場合)

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

※jQueryをGoogle Ajax API CDNからロードしない場合は、lightbox.jsの代わりにlightbox-plus-jquery.jsまたは
 lightbox-plus-jquery.min.jsを使用する(下表参照)。

v2.8.1におけるjQuery,lightbox.css,lightbox.jsファイルの記述の組み合わせ(○:使用する)
項 目HEADタグ内に記述/BODYタグ直前に記述
Googleのjquery.min.jslightbox.csslightbox.jsまたは
lightbox.min.js
lightbox-plus-jquery.jsまたは
lightbox-plus-jquery.min.js
jQuery記述方法1
jQuery記述方法2
備 考※ jQuery記述方法1:Google Ajax API CDNからjQueryをロードできる環境にある場合 ※ jQuery記述方法2:Google Ajax API CDNからjQueryをロードできない環境にある場合
 
2. Lightbox2のJSファイルをインクルードするタグを、/BODYタグの直前に書きます。
 Lightbox2のJSファイルは、従来のファイルlightbox.jsの他に、新たにjQueryが含まれたファイルが提供されています。
・jQuery記述方法1(Google Ajax API CDNからjQueryをロードできる環境にある場合)
<script type="text/javascript" src="js/lightbox.min.js"></script> <!-- または lightbox.jsを使用 -->

※ソース修正が必要な場合は、ソースコードが読み易いlightbox.jsを使用する。
lightbox.min.jsは、改行なしで定義されているためソースコードが読み難いため、ソースの修正には向かない。
・jQuery記述方法2(Google Ajax API CDNからjQueryをロードできない環境にある場合)
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script> <!-- または lightbox-plus-jquery.jsを使用 -->

※ソース修正が必要な場合は、jQuery記述方法1(jQueryをGoogle Ajax API CDNからjQueryをロードする)にします。
 
3. lightbox.cssで、参照するprev.gifnext.gifloading.gifおよびclose.gifのファイルのパスが正しいロケーションかをチェックします。 ロケーションは、lightbox.cssから見た相対または絶対パスを設定します。

  3  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);

 81   background: url(../images/loading.gif) no-repeat;

112  background: url(../images/prev.png) left 48% no-repeat;

130  background: url(../images/next.png) right 48% no-repeat;

198  background: url(../images/close.png) top right no-repeat;
 
設定
 
1. 表示したい画像のリンクタグ(Aタグ)に、data-lightbox="xxxxx"を追加します。XXXXXは、画像ごとに、ユニークなIDを使用します。(1枚の画像)

<a href="../images/w640/P4280326.jpg" data-lightbox="photo-1" data-title="my caption">
              <img src="../images/w640/P4280326.jpg" width="150" height="112" alt="" border=0></a>
  • data-lightbox="photo-1":画像ごとに、ユニークなIDを使用します。
  • href=:表示画像のURLを設定します。
  • data-title=:拡大オーバーレイ画像のパネルに表示されるタイトル(キャプション)を設定します。"data-title"の代わりに"title"も使用できます。
    その違いは、titleの場合、サムネール画像にマウスオーバーすると、キャプションが表示されますが、data-titleの場合は表示されません。
  • src=:表示画像のサムネール画像のURLを設定します。
  • width= / height=:サムネールの大きさを好みにより設定します。サムネール画像を別に用意したときは不要。。
 
2. もし、複数の画像を1グループ(セット)として表示したい場合は、それぞれの画像のリンクタグ(Aタグ)に、 data-lightbox="lightbox[グループID]"を追加し、  lightboxを使用します。(複数画像のグループ)

<a href="../images/w640/P2200022x1024.jpg" data-lightbox="lightbox[group1]">
                         <img src="../images/w640/P2200022x1024.jpg" width="150" height="112" alt="1" border=0></a>
<a href="../images/w640/P5100370.jpg" data-lightbox="lightbox[group1]" title="width:640">
                         <img src="../images/w640/P5100370.jpg" width="150" height="112" alt="2" border=0></a>
<a href="../images/w640/PA200245.jpg" data-lightbox="lightbox[group1]" title="width:640">
                         <img src="../images/w640/PA200245.jpg" width="150" height="112" alt="3" border=0></a>
<a href="../images/w640/PB050313.jpg" data-lightbox="lightbox[group1]" title="width:640">
                         <img src="../images/w640/PB050313.jpg" width="150" height="112" alt="4" border=0></a>
<a href="../images/w640/PB140339.jpg" data-lightbox="lightbox[group1]" title="width:640">
                         <img src="../images/w640/PB140339.jpg" width="150" height="112" alt="5" border=0></a>
  • data-lightbox="lightbox[group1]":グループIDは、グループ内で同じIDを設定します。
  • href=:表示画像のURLを設定します。
  • data-title=:拡大オーバーレイ画像のパネルに表示されるタイトル(キャプション)を設定します。
    "data-title"の代わりに"title"も使用できます。
  • src=:表示画像のサムネール画像のURLを設定します。
  • width= / height=:サムネールの大きさを好みにより設定します。
 
3. ページの例(まとめ
・jQuery記述方法1(Google Ajax API CDNからjQueryをロードできる環境にある場合)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

<!--jQueryおよびCSSファイル -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>
<body>

<!--1つの画像の例-->
<a href="../images/w640/P4280326.jpg" data-lightbox="image-1" data-title="my caption">
              <img src="../images/w640/P4280326.jpg" width="150" height="112" alt="" border=0></a>

<!--JSファイル -->
<script type="text/javascript" src="js/lightbox.min.js"></script> <!-- または lightbox.jsを使用 -->
<!--Lightbox2オプションのカスタマイズ(必要時) -->
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>

</body>
</html>
(注1)ドキュメントタイプは、例のように書きます。日本語を扱う場合は、charsetをUTF-8とし、ソースコードもUTF-8とします。
(注2)ブログでも使用できますが、JSファイルやCSSファイルをアップロードできない場合は使用できません。
(注3)使用する画像の大きさは、PCの画面からはみ出ない大きさにします。
(注4)v2.8.1におけるjQuery,lightbox.css,lightbox.jsファイルの記述の組み合わせ(○:使用する)
項 目HEADタグ内に記述/BODYタグ直前に記述
Googleのjquery.min.jslightbox.csslightbox.jsまたは
lightbox.min.js
lightbox-plus-jquery.jsまたは
lightbox-plus-jquery.min.js
jQuery記述方法1
jQuery記述方法2
備 考※ Lightbox2オプションは、.jsファイルの後に記述する
※ jQuery記述方法1:Google Ajax API CDNからjQueryをロードできる環境にある場合
※ jQuery記述方法2:Google Ajax API CDNからjQueryをロードできない環境にある場合
・jQuery記述方法2(Google Ajax API CDNからjQueryをロードできない環境にある場合)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

<!--CSSファイルのみ -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>
<body>

<!--1つの画像の例-->
<a href="../images/w640/P4280326.jpg" data-lightbox="image-1" data-title="my caption">
              <img src="../images/w640/P4280326.jpg" width="150" height="112" alt="" border=0></a>

<!--JSファイルは、jquery付を使用する -->
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script> <!-- または lightbox-plus-jquery.jsを使用 -->
<!--Lightbox2オプションのカスタマイズ(必要時) -->
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>

</body>
</html>
(注1)ドキュメントタイプは、例のように書きます。日本語を扱う場合は、charsetをUTF-8とし、ソースコードもUTF-8とします。
(注2)ブログでも使用できますが、JSファイルやCSSファイルをアップロードできない場合は使用できません。
(注3)使用する画像の大きさは、PCの画面からはみ出ない大きさにします。

 Lightboxのダウンロード
 Lightbox2.9.0のカスタマイズ(応用編)修正例

Lightboxページの背景の色(デフォルト:白)を変えるなど、Lightboxのカスタマイズ方法を述べます。
下の画像は、Lightbox表示画面(モーダルウィンドウ)の構造を示したものです。(1)~(9)の名称はモーダルウィンドウを構成するDIVブロックのCLASS名です。

v2.51 拡大表示例
※写真表示例のサンプル写真のサイズは640X480   ※#lightboxOverlayと#lightboxの画面は同じ大きさです。従い白色の囲い枠は実際にはありません。
1. Lightboxページの背景色を変更する(lightbox.css-.lightboxOverlay)(①)- navy:
11 .lightboxOverlay {
12   position: absolute;
13   top: 0;
14  left: 0;
15  z-index: 9999;
16  background-color: navy; /*デフォルト black*/
17  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
18  opacity: 0.8;
19  display: none;
20 }
2. Lightboxページの背景色の透明度を変更する(lightbox.css-.lightboxOverlay)(①)
11 .lightboxOverlay {
(途中省略)
16  background-color: navy; /*デフォルト black*/
17  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /*デフォルト 80*/
18  opacity: 0.5; /*デフォルト 0.8*/
(途中省略)
20 }


※ 17 filter-opacity場合 0(完全に透明) ~ 100(完全に不透明)の範囲で指定する(初期値は100)
※ 18 opacityの場合 0.0(完全に透明)~1.0(完全に不透明)の範囲で指定する(初期値は1)
3. Lightbox画像コンテナ枠の背景色(③)を変更する(別々の色に修正した)(lightbox.css- .lb-outerContainer)
 47 .lb-outerContainer {
(途中省略)
 57  background-color: yellow; /*画像コンテナ枠の色(③)デフォルト white*/
 58 }
4. Lightbox画像コンテナ枠の幅を変更する(lightbox.css-.lb-container)(④)
コード不明?
5. CLOSEボタン画像を変更する(lightbox.css-.lb-data .lb-close)(⑨)
198 background: url(../images/close-red.png) top right no-repeat; /*デフォルト ../img/close.png*/
6.1 Lightboxコンテナ上のNEXT/PREVボタンの位置を下の方に変更する(lightbox.css-.lb-nav a.lb-prev / .lb-nav a.lb-next)(⑦,⑧)
108 .lb-nav a.lb-prev {
(途中省略)
112  background: url(../images/prev.png) left 95% no-repeat; /*デフォルト 48*/
(途中省略)
126 .lb-nav a.lb-next {
(途中省略)
130  background: url(../images/next.png) right 95% no-repeat; /*デフォルト 48*/

※値は、0から100。位置はほぼ中央が48%、それより小さい値の場合は上の方に、大きい値の場合は下の方に配置されます。

6.2 Lightboxコンテナ上のNEXT/PREVボタンを画像の外に表示する(lightbox.css-.lb-nav a.lb-prev / .lb-next:hover/.lb-prev/.lb-next)(⑦,⑧)
108 .lb-nav a.lb-prev {
109  width: 34%;
110  left: -50px; position: absolute; /*マイナス値を指定し、position: absolute;を追加する。デフォルト 0*/
111  float: left;
112  background: url(../images/prev.png) left 90% no-repeat;
113  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/
114  opacity: 1; /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/
(途中省略)
126 .lb-nav a.lb-next {
127  width: 64%;
128  right: -50px; /*マイナス値を指定する。デフォルト 0*/
129  float: right;
130  background: url(../images/next.png) right 90% no-repeat;
131  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/
132  opacity:1; /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/

※left rightの値はマイナス値で単位pxを付けます。例: -50px 。
※通常、NEXT/PREVボタンは、マウスオーバーした場合に表示されますが、NEXT/PREVボタンを画像の外に出した場合は、常に表示するのもよいでしょう。
※ 114 および 132 filter-opacity場合 0(完全に透明) ~ 100(完全に不透明)の範囲で指定する(初期値は100)
※ 115 および 133 opacityの場合 0.0(完全に透明)~1.0(完全に不透明)の範囲で指定する(初期値は1)

7. Lightboxデータコンテナ上の画像キャプションと画像枚数の文字色を変更する(デフォルトは未定義)(lightbox.css-.lb-data .lb-caption / .lb-data .lb-number)(⑤)
175 .lb-data .lb-caption {
176  font-size: 13px;
177  font-weight: bold;
178  line-height: 1em; color: white; /* data-titleの色 178行目に続けて追加 白色*/
179 }
(途中省略)
185 .lb-data .lb-number {
186  display: block;
187  clear: left;
188  padding-bottom: 1em;
189  font-size: 11px;
190  color: yellow; /*何枚中何枚目表示(画像枚数) #999999*/
191 }
8. Lightbox2 オプションの変更修正(lightbox.js)
オプションデフォルト値説明
alwaysShowNavOnTouchDevicesfalseタッチパネルPCで、trueの場合、 ナビゲーション矢印アイコンを常に表示する(※2)。
fadeDuration 500ms拡大画像を表示するフェードイン、フェードアウトに要する時間(ミリ秒)
fitImagesInViewport true trueの場合、画像が大きい場合縮小して表示
maxWidth なし 画像の最大幅
maxHeight なし 画像の最大高さ
positionFromTop 50 トップからの画像までのピクセル数
resizeDuration 700ms 画像サイズが違う時の画像表示にかかる時間(ミリ秒)
showImageNumberLabel true trueの場合、画像番号と画像総数を表示する(例 image 1 of 6)
wrapAround false trueの場合、左と右のナビゲーション矢印を最初と最後の画像に来た時でも表示します。
最後(最初)の画像に来たとき最初(最後)の画像に移れる
albumLabel'Image %1 of %2'複数の写真をグループにして表示する場合、画面の左下に表示される何枚目表示。
例(デフォルト):Image 2 of 5 。設定例;値は、シングルクォーテーション'を付けて書きます(例:'photo %1 / %2')。
※1 オプションはLightbox2のJSファイルを記述した後に、
次のスクリプトを記述します。

<script>
    lightbox.option({
      'resizeDuration': 700,
      'wrapAround': true,
      'albumLabel': 'Photo %1 / %2',
    })
</script>
※2 オプション'alwaysShowNavOnTouchDevices'が true の場合の表示例
(タッチパネルPCの場合)


 
■ lightbox.css と lightbox.js のデフォルトのソースコード(Lightbox v2.9.0)(参考:修正前)
 
■ Lightbox v2.9.0 カスタマイズ後の画像(こちらのサンプルデモで確認できます)
 Lightbox2.9.0のソーシャルボタンカスタマイズ方法(応用編)

ソーシャルボタンカスタマイズの説明の前に、Lightbox2.9.0にソーシャルボタンを追加したデモページのHTML全体のソースコードとボタンの設置場所のソースコードについて下に示します。 ここをクリックするとそのデモを見ることができます。

ソーシャルボタンのカスタマイズの詳細は、 Lightbox2.9.0でソーシャルボタンを設置する方法(工事中) で説明します。
ソーシャルボタン設置例を、デモページのキャプチャー画像で下に示します。

▼lightboxモーダルウィンドウ上の設置例(上段:オリジナルデザイン画像ボタン 下段:公式ボタン)

▼このページ(親ウィンドウ)上の設置例(上段:オリジナルデザイン画像ボタン 下段:公式ボタン)

lightboxのソーシャルボタンカスタマイズ方法の手順の概略はつぎのです。

  1. ソーシャルボタンの設置に当たり、5つの項目事前に確認または取得します。(オリジナルデザイン画像ボタン、公式ボタン)
    ソーシャルボタンの設置に当たり、下の5つの項目について事前に確認または取得しておく必要があります(重要)。
    事前確認のSNSサイトは、mixi, RSS, LINE および Pinretestです。
    確認項目は、mixiのmixiチェックキー、RSSのRSSフィードURL、LINEのclient_id/stateパラメータの値およびPinretestのアイキャッチ画像(サムネイル)で、 それらの確認項目の取得方法は、下表を参照してください。

    表2 ソーシャルボタン事前確認項目リスト(フリーデザイン画像ボタンの場合)
    NoSNSパラメータ名現在の設定値(仮の値)ボタンの種類取得方法など
    1mixikmixi999公式ボタン
    非公式ボタン
    ≫mixiサイトでユーザ登録してmixiチェックキーを取得
    2RSSRSSフィードのURLhttp://rssblog.ameba.jp/ske48official/rss20.xml非公式ボタン≫RSSフィードのURLの取得方法
    3LINEclient_id1341209950非公式ボタン≫LINEのclient_id,stateパラメータの取得方法
    4state1409338029非公式ボタン
    5Pinterestmediahttp://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg公式ボタン
    非公式ボタン
    好みのアイキャッチ画像(サムネイル)のURL
  2. 公式ボタンを設置する場合、jquery.socialbuttonプラグインをダウンロードします。(公式ボタン)

    jquery.socialbuttonプラグイン公式サイト

    ▽jquery.socialbuttonプラグインのインクルードHTMLコード
    <script src="http://urbanqee.com/webutil/sns/js/jquery.socialbutton-1.9.1.js"></script>
  3. 設置するボタン領域の配置します。(オリジナルデザイン画像ボタン、公式ボタン)
    設置するソーシャルボタンのHTMLの雛形コードを、設置したいボタンの数だけモーダルウィンドウ上(lightbox.jsファイル内)に配置します。 divタグのclass名でソーシャルボタンの種類を識別します。

    ソーシャルボタンボタンの雛形コード:<div class="xxxxx" ></div>

    ボタンの配置場所は、下にとおりlightbox.jsファイルの96行目の※※※の部分(appendToコードの最後の</div>タグの前)です。
    ボタンの雛形コード(DIVタグ)は、クラス名 lb-dataContainer のDIV要素の後に、jQuery afterメソッドで追加します。

    ▽ボタン領域の配置場所(lightbox.jsファイル 96行目)(実際は1行)
    96 $('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox">...
        <div class="lb-dataContainer"><div class="lb-data">...</div></div>※※※</div>').appendTo($('body'));
    

    ▽jQuery afterメソッドでボタン領域の配置例(クラス名 lb-dataContainer DIV要素の後に追加)
      (下HTMLコード 110行目から)
    $(function() {
     var buttonTag = '<DIV class="free-button">'
                  +  '<div class="f-twitter-share"></div>'
                  +  '<div class="f-facebook-share"></div>'
                     ・・・
                  +  '<div class="f-evernote-clip"></a></div>'
                  +  '</DIV>'
                  +  '<DIV class="official-button">'
                  +  '<div class="o-twittershare"></div>'
                     ・・・             
                  +  '<div class="o-evernote"></div>' 
                  +  '</DIV>'
                  +  '</DIV>';
     $('.lb-dataContainer').after(buttonTag);
    });
    
  4. 5つの項目事前に確認または取得した項目の設定(前項 1.)(オリジナルデザイン画像ボタン)
    事前に、確認または取得した5つ項目について、jQuery ソーシャルボタン共通設定のところに設定します。(赤字マーク箇所)

    ▽オリジナルデザイン画像ボタンの共通設定(下HTMLコード 146行目から)
    $(function(){
    // ソーシャルボタン共通設定 jQuery //
      //
     var shareTitle = encodeURIComponent($('title').html());         //このページのタイトル
     var shareTitle2 = encodeURIComponent(shareTitle);               //再URLエンコード~LINE、Tumblr、Pinterest
     var shareUrl = encodeURIComponent(document.URL);                //このページのURL
     var shareUrl2 = encodeURIComponent(shareUrl);                   //再URLエンコード~LINE、Tumblr、Pinterest
     var shareAmeba = encodeURIComponent($("a.ameba2").html());      //Ameba 共有テキスト(HTMLタグ可)
    
     // 以下の7項目は値を入力してください
     var mixi_k = 'mixi999';                                          // 1. mixiキーを入力してください! 例;k=0033257f963abb6e88b20b7671fb2fbfa5d31125
     var rss_Url = 'http://rssblog.ameba.jp/ske48official/rss20.xml'; // 2. RSSフィードのURLを入力してください!
     var line_clientid = '1341209950';                                // 3. LINE lient_idを入力してください! 例:client_id=1341209950
     var line_state = '1409338029';                                   // 4. LINE stateを入力してください!    例:    state=1127447607
     var pinterest_media = 'http://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg'; 
                                                                      // 5. ↑ pinterest mediaのURL(サムネール画像など)を入力してください!2重エンコード
     
     pinterest_media = encodeURIComponent(encodeURIComponent(pinterest_media); // 2重エンコード
     var rssUrl = encodeURIComponent( rss_Url );                      //RSSフィードURLエンコード feedly,inoreader
    
     var tag = '<a><img class=fukidashi></a>';
     $('.free-button div').html(tag);  
      
  5. jQueryでフリーデザイン画像ボタンを設定します。(オリジナルデザイン画像ボタン)
    下のボタンの設定例は、TwitterとFacebookを示しています。
    入力項目は、(1),(2)ボタン設置DIVタグのCLASS名2箇所、(3)ボタン画像のURL、 (4)ボタンのタイトル、(5)ボタン画像のwidth および (6)ボタン画像のheight です(赤マーク箇所)。

    ▽jQueryでフリーデザイン画像ボタン設定例(下HTMLコード 173行目から)
    //* ソーシャルボタン個別設定 jQuery *//
    
     //twitter shere - (1)
     $('.f-twitter-share a').attr({ "href": "http://twitter.com/share?url="+ shareUrl + "&text=" + shareTitle });
     $('.f-twitter-share img').attr({ 'src': 'images/Twitter.png', 
          'title': 'このページの情報を Twitter で共有する', 'width': '25', 'height': '25' });
    
     //facebook shere - (2)
     $('.f-facebook-share a').attr("href", "http://www.facebook.com/sharer.php?u="+ shareUrl +"&t=" + shareTitle);
     $('.f-facebook-share img').attr({ 'src': 'images/Facebook.png', 
         'title': 'このページの情報を Facebook で共有する', 'width': '25', 'height': '25' });
      

  6. jQueryで、オリジナルデザイン画像ボタンのポップアプウィンドウ起動コードを設定します。(オリジナルデザイン画像ボタン)

    ▽ボタンのポップアプウィンドウ起動コードを設定。クラス名free-buttonは、親DIVタグのクラス名です。(下HTMLコード 224行目から)
     $('.free-button a').click(function(){
        window.open(this.href, "social_window","width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes");
        return false;
      });
    
  7. jQueryで公式ボタンを設定します。(公式ボタン)

    ▽jquery.socialbuttonプラグインのボタン設定 jQueryコード(一般形式)
    $('.ボタンDIVタグのクラス名').socialbutton('プラグインのメソッド名'[, { パラメータ }] );

    ▽Facebookボタン設定jQueryコード例(下HTMLコード 237行目)
    $('.o-facebooklike').socialbutton('facebook_like', { button: 'button_count' });

    jquery.socialbuttonプラグインの詳細は、jquery.socialbuttonプラグイン公式サイト参照。

HTMLコード(デモページ)- (ソースコードのコピーは、コード画面上をダブルクリックしてください)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"> <!-- HTMLソースコード utf-8 必須 -->
<meta property="og:title" content="Lightboxv2.9.0のスライド画面にSNSボタンを設置する(デモ)"> <!-- 必須 -->
<meta property="og:image" content="http://urbanqee.com/webutil/photo/images/lightbox271-dl-image.jpg"> <!-- 推奨 -->
<meta property="og:url" content="http://urbanqee.com/webutil/photo/lightbox290/lightbox-sns-button-demo0.html"> <!-- 推奨 -->
<meta property="og:type" content="article">  <!-- 推奨 article:記事 -->
<!--Twitter OGP -->
<meta name="twitter:card" content="summary_large_image">   <!-- 必須 summary(通常),summary_large_image,photo,gallery,vappなど  -->
<meta name="twitter:site" content="urbanqee">        <!-- 推奨 -->
<meta name="twitter:image" content="http://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg"> 
<meta name="twitter:title" content="Lightboxv2.9.0のスライド画面(モーダルウインド)上にSNSボタンを設置する(デモ)">     <!-- 推奨 -->
<meta name="twitter:description" content="15SNS/RSSサイト、フリーデザイン画像ボタンが15、公式ボタンが8種類"> <!-- 推奨 -->

<title>Lightboxv2.9.0のスライド画面(モーダルウインド)上にSNSボタンを設置する(デモ)</title>

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- lightbox v2.9.0 CSS -->
<link rel="stylesheet" href="css/lightbox.min.css">

<!--  SNSボタン用 CSS ボーダルウインド用----------------->
<style>
   div.free-button, div.official-button{
    width:900px; margin: 0 auto; border:1px solid #dcdcdc;
    border-radius: 5px;          /* CSS3草案 */  
    -webkit-border-radius: 5px;  /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;     /* Firefox用 */  
   } 
  .free-button div{ 
    float: left; margin: 2px; display: block;
    vertical-align: middle; cursor: pointer  
   }
  .official-button div{ 
    float: left; margin: 2px; display: block;
    vertical-align: middle; widtn:80px   
   }
  .free-button:after, .official-button:after { content: ""; clear: both; display: block; }
</style>

<style>
body{
 width:900px; margin: 0 auto;
 font: 14px 'Lucida Grande', Verdana, sans-serif;
   }
a{
  /*text-decoration:none; color:blue*/
 }
</style>
 <!-- 吹き出し  Include jQuery and PowerTip -->
 <script type="text/javascript" src="fukidashi/jquery.powertip.js"></script>
 <link rel="stylesheet" type="text/css" href="fukidashi/css/jquery.powertip.css" />
<!-- ボタンDIVタグの設定-->

</script>
</head>
<body>
<h2 style="text-align:left">Lightbox v2.9.0のスライド画面にソーシャルボタンを設置する方法(デモ)</h2>
<h3>▼ Lightbox2 モーダルウィンドウ上に設置したソーシャルボタン → 画像をクリックしてください! </h3>
<p>
       <a href="http://urbanqee.com/webutil/photo/fotorama/images/m/pixabay12-675x450.jpg" data-lightbox="lightbox[group1]" data-title="孔雀"><img  ID="img11" src="http://urbanqee.com/webutil/photo/fotorama/images/m/pixabay12-675x450.jpg" width="150" height="112" style="border:3px solid gold" alt="1 風景" border=0 onmouseover="document.all.img11.style.border='3px solid #ffffff'" onmouseout="document.all.img11.style.border='3px solid gold'"></a>
       <a href="http://urbanqee.com/webutil/photo/fotorama/images/m/pixabay18-675x450.jpg" data-lightbox="lightbox[group1]" data-title="蝶々"><img   ID="img12" src="http://urbanqee.com/webutil/photo/fotorama/images/m/pixabay18-675x450.jpg" width="150" height="112" alt="2 風景"  style="border:3px solid gold" border=0 onmouseover="document.all.img12.style.border='3px solid #ffffff'" onmouseout="document.all.img12.style.border='3px solid gold'"></a>
</p>
<h3>▼ このページに設置したソーシャルボタン</h3>
          <DIV class="free-button">
             <div class="f-twitter-share"></div>
             <div class="f-facebook-share"></div>
             <div class="f-line-it"></div>
             <div class="f-google-plus1"></div>
             <div class="f-hatena-bookmark"></div>
             <div class="f-pocket-post"></div>
             <div class="f-mixi-check"></div>
             <div class="f-tumblr-post"></div>
             <div class="f-gree-share"></div>
             <div class="f-pinterest-share"></div>
             <div class="f-feedly-rss"></div>
             <div class="f-inoreader-rss"></div>
             <div class="f-rss-rss"></div>
             <div class="f-ameba-share"></a></div>
             <div class="f-evernote-clip"></a></div><!-- 15サイト15ボタン -->
          </DIV>
          <DIV class="official-button">
             <div class="o-twittershare"></div>
             <div class="o-facebookshare"></div> <!-- NG -->
             <div class="o-facebooklike"></div>
             <div class="o-googleplusone"></div>
             <div class="o-hatena"></div>
             <div class="o-mixicheck"></div>
             <div class="o-mixilike"></div> <!-- NG -->
             <div class="o-greesf"></div>
             <div class="o-pinterest"></div>
             <div class="o-evernote"></div> 
          </DIV><!-- 10サイト 10ボタン モーダルウィンドウ上で、更に Twitter, evernote NG 計 4ボタン-->
           </DIV>
<!-- Lightbox2 オプション設定(任意)<script src="js/lightbox-sns.js"></script>  ------------------------------->
<script src="js/lightbox.js"></script>
 <!-- lightbox オプション設定 -->
<script>
    lightbox.option({
      'alwaysShowNavOnTouchDevices': true,
      'resizeDuration': 700,
      'wrapAround': true,
      'albumLabel': 'Photo %1 / %2',
      'positionFromTop': 30
    })
</script>
 <!-- ボタン設置DIVタグ一括設定 → lightbox.jsファイル96行目のクラス名lb-dataContainerのDIV要素の後に追加</DIV> -->
<script>
$(function() {
 var buttonTag = '<DIV class="free-button">'
           +  '<div class="f-twitter-share"></div>'
           +  '<div class="f-facebook-share"></div>'
           +  '<div class="f-line-it"></div>'
           +  '<div class="f-google-plus1"></div>'
           +  '<div class="f-hatena-bookmark"></div>'
           +  '<div class="f-pocket-post"></div>'
           +  '<div class="f-mixi-check"></div>'
           +  '<div class="f-tumblr-post"></div>'
           +  '<div class="f-gree-share"></div>'
           +  '<div class="f-pinterest-share"></div>'
           +  '<div class="f-feedly-rss"></div>'
           +  '<div class="f-inoreader-rss"></div>'
           +  '<div class="f-rss-rss"></div>'
           +  '<div class="f-ameba-share"></a></div>'
           +  '<div class="f-evernote-clip"></a></div>'
           +  '</DIV>'
           +  '<DIV class="official-button">'
           +  '<div class="o-twittershare"></div>'
           +  '<div class="o-facebookshare"></div>'
           +  '<div class="o-facebooklike"></div>'
           +  '<div class="o-googleplusone"></div>'
           +  ' <div class="o-hatena"></div>'
           +  '<div class="o-mixicheck"></div>'
           +  '<div class="o-mixilike"></div>'
           +  '<div class="o-greesf"></div>'
           +  '<div class="o-pinterest"></div>'
           +  '<div class="o-evernote"></div>' 
           +  '</DIV>'
           +  '</DIV>';
  $('.lb-dataContainer').after(buttonTag);
 });
</script>
<!-- 好きなボタン画像でソーシャルボタン設定  オリジナルデザイン画像ボタン --------------------->
<script>
$(function(){
//* ソーシャルボタン共通設定 jQuery *//
  //
 var shareTitle = encodeURIComponent($('title').html());         //このページのタイトル
 var shareTitle2 = encodeURIComponent(shareTitle);               //再URLエンコード~LINE、Tumblr、Pinterest
 var shareUrl = encodeURIComponent(document.URL);                //このページのURL
 var shareUrl2 = encodeURIComponent(shareUrl);                   //再URLエンコード~LINE、Tumblr、Pinterest
 var shareAmeba = encodeURIComponent($("a.ameba2").html());      //Ameba 共有テキスト(HTMLタグ可)

 // 以下の7項目は値を入力してください
 var mixi_k = 'mixi999';                                          // 1.mixiキーを入力してください! 例;k=0033257f963abb6e88b20b7671fb2fbfa5d31125
 var rss_Url = 'http://rssblog.ameba.jp/ske48official/rss20.xml'; // 2. RSSフィードのURLを入力してください!
 var line_clientid = '1341209950';                                // 3. LINE lient_idを入力してください! 例:client_id=1341209950
 var line_state = '1409338029';                                   // 4. LINE stateを入力してください!    例:    state=1127447607
 var pinterest_media = encodeURIComponent(encodeURIComponent('http://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg')); 
                                                                  // 5. ↑ pinterest mediaのURL(サムネール画像など)を入力してください!2重エンコード
 var pocket_ct = '';                                              // 6. pocket ct を入力してください!  例: ct=506a7efccccb01b79cd7308100c66bf0056febce
 var pocket_ctn = '';                                             // 7. pocket ctn を入力してください! 例:ctn=8b2032c79e2f4b35e7b48146813e08bfa4d9b3d6

 var rssUrl = encodeURIComponent( rss_Url );                      //RSSフィードURLエンコード feedly,inoreader

 var tag = '<a><img class=fukidashi></a>';
 $('.free-button div').html(tag);

//* ソーシャルボタン個別設定 jQuery *//

 //twitter shere - (1)
 $('.f-twitter-share a').attr({ "href": "http://twitter.com/share?url="+ shareUrl + "&text=" + shareTitle });
 $('.f-twitter-share img').attr({ 'src': 'images/Twitter.png', 'title': 'このページの情報を Twitter で共有する', 'width': '25', 'height': '25' });

 //$('.f-twitter-share').attr('id', 'b1');
 //$('#b1').html(tag);
 //$('#b1 a').attr("href", "http://twitter.com/share?url="+ shareUrl + "&text=" + shareTitle);
 //$('#b1 img').attr({ 'src': 'images/Twitter.png', 'title': 'このページの情報を Twitter で共有するx', 'width': '25', 'height': '25' });

 //facebook shere - (2)
 $('.f-facebook-share a').attr("href", "http://www.facebook.com/sharer.php?u="+ shareUrl +"&t=" + shareTitle);
 $('.f-facebook-share img').attr({ 'src': 'images/Facebook.png', 'title': 'このページの情報を Facebook で共有する', 'width': '25', 'height': '25' });
 //LINE it! LINEに送る - (3) (注1)client_id=1341209950&state=1409338029のチェック
 $('.f-line-it a').attr("href", "https://access.line.me/dialog/oauth/weblogin?response_type=code&client_id=1341209950&state=1409338029&redirect_uri=https%3A%2F%2Ftimeline.line.me%2Fauth%3FreturnUrl%3Dhttps%253A%252F%252Ftimeline.line.me%252Fsocial-plugin%252Fshare%253Furl%253D" + shareUrl2);
 $('.f-line-it img').attr({ 'src': 'images/line-share-d.png', 'title': 'このページの情報を LINE で共有する', 'width': '25', 'height': '25' });
 //google+1 - (4)
 $('.f-google-plus1 a').attr("href", "https://plus.google.com/share?url=" + shareUrl);
 $('.f-google-plus1 img').attr({ 'src': 'images/google_plus.png', 'title': 'このページの情報を Google+ で共有する', 'width': '25', 'height': '25' });
 //hatena はてなブックマーク - (5)
 $('.f-hatena-bookmark a').attr("href", "http://b.hatena.ne.jp/add?mode=confirm&url=" + shareUrl + "&title=" + shareTitle);
 $('.f-hatena-bookmark img').attr({ 'src': 'images/hatena-bookmark.png', 'title': 'このページの情報を はてなブックマーク に追加する', 'width': '25', 'height': '25' });
 //pocket ポケット - (6)
 $('.f-pocket-post a').attr("href","http://getpocket.com/edit?url=" + shareUrl + "&title=" + shareTitle);
 $('.f-pocket-post img').attr({ 'src': 'images/getpocket.png', 'title': 'このページの情報を pocket で共有する', 'width': '25', 'height': '25' });
 //mixiチェック - (7) (注2)k=mixiチェックキー (キーは事前登録)
 $('.f-mixi-check a').attr("href","https://mixi.jp/share.pl?mode=login&u=" + shareUrl + "&k=" + "mixi_k");
 $('.f-mixi-check img').attr({ 'src': 'images/mixi-check.gif', 'title': 'このページの情報を mixi で共有する', 'width': '25', 'height': '25' });
 //tumblr-post (8)
 $('.f-tumblr-post a').attr("href","https://www.tumblr.com/login?redirect_to=https%3A%2F%2Fwww.tumblr.com%2Fwidgets%2Fshare%2Ftool%3Fposttype%3Dlink%26title%3D" + shareTitle2 + "%26content%3D" + shareUrl2 + "%26canonicalUrl%3D" + shareUrl2 + "%26shareSource%3Dtumblr_share_button%26_format%3Dhtml");
 $('.f-tumblr-post img').attr({ 'src': 'images/tumblr-logo-whiteonblue-512.png', 'title': 'このページの情報を Tumblr に登録する', 'width': '25', 'height': '25' });
 //GREE-share (9)
 $('.f-gree-share a').attr("href","https://pid.gree.net/login/entry?ignore_sso=1&backto=http%3A%2F%2Fgree.jp%2F%3Fmode%3Dshare%26act%3Dwrite%26url%3D" + shareUrl + "%26button_type%3D3%26button_size%3D20&campaign_code=");
 $('.f-gree-share img').attr({ 'src': 'images/gree-btn_logo_32.png', 'title': 'このページの情報を GREE で共有する', 'width': '25', 'height': '25' });
 //feedly RSS(10)
 $('.f-feedly-rss a').attr("href","http://cloud.feedly.com/#subscription%2Ffeed%2F" + rssUrl);
 $('.f-feedly-rss img').attr({ 'src': 'images/feedly-follow-square-volume_2x.png', 'title': 'Feedly - RSSフィードを使用して、このページの情報を共有する', 'width': '25', 'height': '25' });
 //inoreader RSS(11)
 $('.f-inoreader-rss a').attr("href","http://www.inoreader.com/feed/" + rssUrl);
 $('.f-inoreader-rss img').attr({ 'src': 'images/inoreader.png', 'title': 'Inoreader - RSSフィードを使用して、このページの情報を共有する', 'width': '25', 'height': '25' });
 //RSS (12)
 $('.f-rss-rss a').attr("href", rss_Url);
 $('.f-rss-rss img').attr({ 'src': 'images/rss-Feed-icon_svg.png', 'title': 'RSS - RSSフィードを使用して、このページの情報を共有する', 'width': '25', 'height': '25' });
 //Ameba (13)
 $('.f-ameba-share a').attr("href","http://blog.ameba.jp/ucs/entry/srventryinsertinput.do?entry_text=" + shareTitle + "<br>" + shareUrl + "&editor_flg=1");
 $('.f-ameba-share img').attr({ 'src': 'images/ameba-icon_app.png', 'title': 'このページの情報を Amebaブログ で共有する', 'width': '25', 'height': '25' });
 //pinterest (14)
 $('.f-pinterest-share a').attr("href", "https://jp.pinterest.com/join/?next=/pin/create/button/%3Furl%3D"+ shareUrl2 + "%26description%3D" + shareTitle2 + "%26media%3D" + pinterest_media );
 $('.f-pinterest-share img').attr({ 'src': 'images/pinterest3.png', 'title': 'このページの情報を Pinterest で共有する', 'width': '25', 'height': '25' });
 //Evernote clip(15)
 $('.f-evernote-clip a').attr("href", 'https://www.evernote.com/clip.action?url=' + shareUrl + '&title=' + shareTitle);
 $('.f-evernote-clip img').attr({ 'src': 'images/evernote.png', 'title': 'このページの情報を evernote で共有する', 'width': '25', 'height': '25' });
 
 $('.free-button a').click(function(){
    window.open(this.href, "social_window","width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes");
    return false;
  });
});
</script>
<!-- jquery.socialbuttonプラグインライブラリー 10ボタン対応のうち2ボタンNG -->
<script src="http://urbanqee.com/webutil/sns/js/jquery.socialbutton-1.9.1.js"></script>
<!-- 公式ボタン画像でソーシャルボタン設定 ------------------------->
<script>
$(function() {
    $('.o-twittershare').socialbutton('twitter', { button: 'horizontal' });
    //$('.o-facebookshare').socialbutton('facebook_share');  NG
    $('.o-facebooklike').socialbutton('facebook_like', { button: 'button_count' });
    $('.o-googleplusone').socialbutton('google_plusone');
    $('.o-hatena').socialbutton('hatena');
    $('.o-mixicheck').socialbutton('mixi_check', { key: 'mixi999' });
    //$('.mixi_like').socialbutton('mixi_like', {  key: 'mixi999' }); NG
    $('.o-greesf').socialbutton('gree_sf');
    $('.o-pinterest').socialbutton('pinterest', { media: 'http://www.example.com/path/to/your-image.gif', button: 'horizontal' });
    $('.o-evernote').socialbutton('evernote');
  });
</script>
<!-- 吹き出し -->
<script>
   $(function() {
      $('.fukidashi').powerTip({ placement: 'nw-alt' });
   });
</script>
<p>
<a href="https://pixabay.com/ja/" target="_blank">photo by (c)pixabay.com</a>/<a href="http://itra.jp/jquery_socialbutton_plugin/" target="_blank">(c)Lightbox2</a>/<a href="http://lokeshdhakar.com/projects/lightbox2/" target="_blank">(c)jquery.socialbuttonプラグイン</a>
</p>
<hr>
<center>
<a href="http://urbanqee.com/"><img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOMEへ"></a> urbanqee  <small>最終更新日</small>:2017.5.25(初版)
</center>

</body>
</html>
96   $('<div id="lightboxOverlay" class="lightboxOverlay"></div>
       <div id="lightbox" class="lightbox">
        <div class="lb-outerContainer">
        <div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
          <div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div>
          <div class="lb-loader"><a class="lb-cancel"></a></div>
        </div> 
        </div>
        <div class="lb-dataContainer">
        <div class="lb-data">
          <div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div>
          <div class="lb-closeContainer"><a class="lb-close"></a></div>
        </div>
        </div> <!-- ボタン設置場所は96行目 ここ クラス名lb-dataContainer DIV要素の後 -->
        </div>').appendTo($('body'));
        

サンプル使用方法LightboxのダウンロードLightboxのカスタマイズ(応用編)


Lightbox系メディアビューア(まとめ サイト内リンク)

NoビューアーJSフレームワークモーダル
window*2
画像動画*1動画共有サイト
動画
Webページスライドシュー備考
1LightboxPrototypeからjQueryに変更(v2.51)モーダル人気
2PiroboxjQueryモーダル推奨
3Videoboxmootoolsモーダル
4Mediaboxmootoolsモーダル
5ShadowboxPrototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、
Yahoo! User Interface Library、
Ext (requires ext-core.js)、 非JSフレームを選択可
モーダル推奨
6ColorboxjQueryモーダル
7FotoramajQuery非モーダルスライダー
8FancyboxjQueryモーダル人気
動画とは、SWF、FLV、MOV、WMV(*1)  モーダルwindow:画像などメディアの表示は新しい別ウインドー(*2)

動画関連サイト内リンク

Lightbox v2.05Lightbox v2.51 2012.4.20版Lightbox v2.7.1 2014.3.30版

photo by (c)pixabay.com(c)Lightbox2(c)jquery.socialbuttonプラグイン


  最終更新日:2016.5.25 v2.9.0(初版)