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

Lightbox2の使い方 Lightbox v2.11.3 - 最新バージョン on 2020.7.11
LIGHTBOX by Lokesh Dhakar The original lightbox script

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

Lightbox2は、 サムネイル画像をクリックするとJavascript(Ajax)を利用して同じページのモーダルウィンドウに、拡大画像をオーバーレイ表示する定番の画像ビューアです。 Lightbox2は、JSフレームワークに、jQueryフレームワークを使用しています(旧版はPrototypeフレームワーク)。
本ページは、現在の最新バージョンはv2.11.3を使って、表示された画像のモーダルウィンドウに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. 2つの個別の画像
       

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

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

≫ ソーシャルボタン設置サンプルデモ(新しいウィンドウ)(下図はデモページのキャプチャー画像)

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

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



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


   |---[lightbox2113] 配下に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-v2113.html 本ページ(自分で用意)

          ※青字のファイルは、Lightbox2サイトからダウンロードしたdistフォルダ配下のファイルです。
           lightbox2113フォルダ配下には、ダウンロードファイルのdistフォルダ内のcss,images,js各フォルダ内の
           ファイルを配置した。(lightbox2113は任意の名前)
          ※ *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.12.4/jquery.min.js"></script>または
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/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.12.4/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.11.3のカスタマイズ(応用編)修正例

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.11.3)(参考:修正前)
body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}  
/*!
 * Lightbox v2.11.3
 * by Lokesh Dhakar
 *
 * More info:
 * http://lokeshdhakar.com/projects/lightbox2/
 *
 * Copyright Lokesh Dhakar
 * Released under the MIT license
 * https://github.com/lokesh/lightbox2/blob/master/LICENSE
 *
 * @preserve
 */

// Uses Node, AMD or browser globals to create a module.
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)
        root.lightbox = factory(root.jQuery);
    }
}(this, function ($) {

  function Lightbox(options) {
    this.album = [];
    this.currentImageIndex = void 0;
    this.init();

    // options
    this.options = $.extend({}, this.constructor.defaults);
    this.option(options);
  }

  // Descriptions of all options available on the demo site:
  // http://lokeshdhakar.com/projects/lightbox2/index.html#options
  Lightbox.defaults = {
    albumLabel: 'Image %1 of %2',
    alwaysShowNavOnTouchDevices: false,
    fadeDuration: 600,
    fitImagesInViewport: true,
    imageFadeDuration: 600,
    // maxWidth: 800,
    // maxHeight: 600,
    positionFromTop: 50,
    resizeDuration: 700,
    showImageNumberLabel: true,
    wrapAround: false,
    disableScrolling: false,
    /*
    Sanitize Title
    If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
    This will free you to add html tags, such as links, in the caption.

    If the caption data is user submitted or from some other untrusted source, then set this to true
    to prevent xss and other injection attacks.
     */
    sanitizeTitle: false
  };

  Lightbox.prototype.option = function(options) {
    $.extend(this.options, options);
  };

  Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
    return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
  };

  Lightbox.prototype.init = function() {
    var self = this;
    // Both enable and build methods require the body tag to be in the DOM.
    $(document).ready(function() {
      self.enable();
      self.build();
    });
  };

  // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
  // that contain 'lightbox'. When these are clicked, start lightbox.
  Lightbox.prototype.enable = function() {
    var self = this;
    $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
      self.start($(event.currentTarget));
      return false;
    });
  };

  // Build html for the lightbox and the overlay.
  // Attach event handlers to the new DOM elements. click click click
  Lightbox.prototype.build = function() {
    if ($('#lightbox').length > 0) {
        return;
    }

    var self = this;

    // The two root notes generated, #lightboxOverlay and #lightbox are given
    // tabindex attrs so they are focusable. We attach our keyboard event
    // listeners to these two elements, and not the document. Clicking anywhere
    // while Lightbox is opened will keep the focus on or inside one of these
    // two elements.
    //
    // We do this so we can prevent propogation of the Esc keypress when
    // Lightbox is open. This prevents it from intefering with other components
    // on the page below.
    //
    // Github issue: https://github.com/lokesh/lightbox2/issues/663
    $('<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" 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></div>').appendTo($('body'));

    // Cache jQuery objects
    this.$lightbox       = $('#lightbox');
    this.$overlay        = $('#lightboxOverlay');
    this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
    this.$container      = this.$lightbox.find('.lb-container');
    this.$image          = this.$lightbox.find('.lb-image');
    this.$nav            = this.$lightbox.find('.lb-nav');

    // Store css values for future lookup
    this.containerPadding = {
      top: parseInt(this.$container.css('padding-top'), 10),
      right: parseInt(this.$container.css('padding-right'), 10),
      bottom: parseInt(this.$container.css('padding-bottom'), 10),
      left: parseInt(this.$container.css('padding-left'), 10)
    };

    this.imageBorderWidth = {
      top: parseInt(this.$image.css('border-top-width'), 10),
      right: parseInt(this.$image.css('border-right-width'), 10),
      bottom: parseInt(this.$image.css('border-bottom-width'), 10),
      left: parseInt(this.$image.css('border-left-width'), 10)
    };

    // Attach event handlers to the newly minted DOM elements
    this.$overlay.hide().on('click', function() {
      self.end();
      return false;
    });

    this.$lightbox.hide().on('click', function(event) {
      if ($(event.target).attr('id') === 'lightbox') {
        self.end();
      }
    });

    this.$outerContainer.on('click', function(event) {
      if ($(event.target).attr('id') === 'lightbox') {
        self.end();
      }
      return false;
    });

    this.$lightbox.find('.lb-prev').on('click', function() {
      if (self.currentImageIndex === 0) {
        self.changeImage(self.album.length - 1);
      } else {
        self.changeImage(self.currentImageIndex - 1);
      }
      return false;
    });

    this.$lightbox.find('.lb-next').on('click', function() {
      if (self.currentImageIndex === self.album.length - 1) {
        self.changeImage(0);
      } else {
        self.changeImage(self.currentImageIndex + 1);
      }
      return false;
    });

    /*
      Show context menu for image on right-click

      There is a div containing the navigation that spans the entire image and lives above of it. If
      you right-click, you are right clicking this div and not the image. This prevents users from
      saving the image or using other context menu actions with the image.

      To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
      set pointer-events to none on the nav div. This is so that the upcoming right-click event on
      the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
      we set the pointer events back to auto for the nav div so it can capture hover and left-click
      events as usual.
     */
    this.$nav.on('mousedown', function(event) {
      if (event.which === 3) {
        self.$nav.css('pointer-events', 'none');

        self.$lightbox.one('contextmenu', function() {
          setTimeout(function() {
              this.$nav.css('pointer-events', 'auto');
          }.bind(self), 0);
        });
      }
    });


    this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
      self.end();
      return false;
    });
  };

  // Show overlay and lightbox. If the image is part of a set, add siblings to album array.
  Lightbox.prototype.start = function($link) {
    var self    = this;
    var $window = $(window);

    $window.on('resize', $.proxy(this.sizeOverlay, this));

    this.sizeOverlay();

    this.album = [];
    var imageNumber = 0;

    function addToAlbum($link) {
      self.album.push({
        alt: $link.attr('data-alt'),
        link: $link.attr('href'),
        title: $link.attr('data-title') || $link.attr('title')
      });
    }

    // Support both data-lightbox attribute and rel attribute implementations
    var dataLightboxValue = $link.attr('data-lightbox');
    var $links;

    if (dataLightboxValue) {
      $links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
      for (var i = 0; i < $links.length; i = ++i) {
        addToAlbum($($links[i]));
        if ($links[i] === $link[0]) {
          imageNumber = i;
        }
      }
    } else {
      if ($link.attr('rel') === 'lightbox') {
        // If image is not part of a set
        addToAlbum($link);
      } else {
        // If image is part of a set
        $links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
        for (var j = 0; j < $links.length; j = ++j) {
          addToAlbum($($links[j]));
          if ($links[j] === $link[0]) {
            imageNumber = j;
          }
        }
      }
    }

    // Position Lightbox
    var top  = $window.scrollTop() + this.options.positionFromTop;
    var left = $window.scrollLeft();
    this.$lightbox.css({
      top: top + 'px',
      left: left + 'px'
    }).fadeIn(this.options.fadeDuration);

    // Disable scrolling of the page while open
    if (this.options.disableScrolling) {
      $('body').addClass('lb-disable-scrolling');
    }

    this.changeImage(imageNumber);
  };

  // Hide most UI elements in preparation for the animated resizing of the lightbox.
  Lightbox.prototype.changeImage = function(imageNumber) {
    var self = this;
    var filename = this.album[imageNumber].link;
    var filetype = filename.split('.').slice(-1)[0];
    var $image = this.$lightbox.find('.lb-image');

    // Disable keyboard nav during transitions
    this.disableKeyboardNav();

    // Show loading state
    this.$overlay.fadeIn(this.options.fadeDuration);
    $('.lb-loader').fadeIn('slow');
    this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
    this.$outerContainer.addClass('animating');

    // When image to show is preloaded, we send the width and height to sizeContainer()
    var preloader = new Image();
    preloader.onload = function() {
      var $preloader;
      var imageHeight;
      var imageWidth;
      var maxImageHeight;
      var maxImageWidth;
      var windowHeight;
      var windowWidth;

      $image.attr({
        'alt': self.album[imageNumber].alt,
        'src': filename
      });

      $preloader = $(preloader);

      $image.width(preloader.width);
      $image.height(preloader.height);
      windowWidth = $(window).width();
      windowHeight = $(window).height();

      // Calculate the max image dimensions for the current viewport.
      // Take into account the border around the image and an additional 10px gutter on each side.
      maxImageWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
      maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70;

      /*
      Since many SVGs have small intrinsic dimensions, but they support scaling
      up without quality loss because of their vector format, max out their
      size.
      */
      if (filetype === 'svg') {
        $image.width(maxImageWidth);
        $image.height(maxImageHeight);
      }

      // Fit image inside the viewport.
      if (self.options.fitImagesInViewport) {

        // Check if image size is larger then maxWidth|maxHeight in settings
        if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
          maxImageWidth = self.options.maxWidth;
        }
        if (self.options.maxHeight && self.options.maxHeight < maxImageHeight) {
          maxImageHeight = self.options.maxHeight;
        }

      } else {
        maxImageWidth = self.options.maxWidth || preloader.width || maxImageWidth;
        maxImageHeight = self.options.maxHeight || preloader.height || maxImageHeight;
      }

      // Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
      // option than we need to size down while maintaining the aspect ratio.
      if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
        if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
          imageWidth  = maxImageWidth;
          imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
          $image.width(imageWidth);
          $image.height(imageHeight);
        } else {
          imageHeight = maxImageHeight;
          imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
          $image.width(imageWidth);
          $image.height(imageHeight);
        }
      }
      self.sizeContainer($image.width(), $image.height());
    };

    // Preload image before showing
    preloader.src = this.album[imageNumber].link;
    this.currentImageIndex = imageNumber;
  };

  // Stretch overlay to fit the viewport
  Lightbox.prototype.sizeOverlay = function() {
    var self = this;
    /*
    We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
    Why do this? If the `disableScrolling` option is set to true, a class is added to the body
    tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is
    hidden before we measure the document width, as the presence of the scrollbar will affect the
    number.
    */
    setTimeout(function() {
      self.$overlay
        .width($(document).width())
        .height($(document).height());

    }, 0);
  };

  // Animate the size of the lightbox to fit the image we are showing
  // This method also shows the the image.
  Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
    var self = this;

    var oldWidth  = this.$outerContainer.outerWidth();
    var oldHeight = this.$outerContainer.outerHeight();
    var newWidth  = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
    var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;

    function postResize() {
      self.$lightbox.find('.lb-dataContainer').width(newWidth);
      self.$lightbox.find('.lb-prevLink').height(newHeight);
      self.$lightbox.find('.lb-nextLink').height(newHeight);

      // Set focus on one of the two root nodes so keyboard events are captured.
      self.$overlay.focus();

      self.showImage();
    }

    if (oldWidth !== newWidth || oldHeight !== newHeight) {
      this.$outerContainer.animate({
        width: newWidth,
        height: newHeight
      }, this.options.resizeDuration, 'swing', function() {
        postResize();
      });
    } else {
      postResize();
    }
  };

  // Display the image and its details and begin preload neighboring images.
  Lightbox.prototype.showImage = function() {
    this.$lightbox.find('.lb-loader').stop(true).hide();
    this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);

    this.updateNav();
    this.updateDetails();
    this.preloadNeighboringImages();
    this.enableKeyboardNav();
  };

  // Display previous and next navigation if appropriate.
  Lightbox.prototype.updateNav = function() {
    // Check to see if the browser supports touch events. If so, we take the conservative approach
    // and assume that mouse hover events are not supported and always show prev/next navigation
    // arrows in image sets.
    var alwaysShowNav = false;
    try {
      document.createEvent('TouchEvent');
      alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
    } catch (e) {}

    this.$lightbox.find('.lb-nav').show();

    if (this.album.length > 1) {
      if (this.options.wrapAround) {
        if (alwaysShowNav) {
          this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
        }
        this.$lightbox.find('.lb-prev, .lb-next').show();
      } else {
        if (this.currentImageIndex > 0) {
          this.$lightbox.find('.lb-prev').show();
          if (alwaysShowNav) {
            this.$lightbox.find('.lb-prev').css('opacity', '1');
          }
        }
        if (this.currentImageIndex < this.album.length - 1) {
          this.$lightbox.find('.lb-next').show();
          if (alwaysShowNav) {
            this.$lightbox.find('.lb-next').css('opacity', '1');
          }
        }
      }
    }
  };

  // Display caption, image number, and closing button.
  Lightbox.prototype.updateDetails = function() {
    var self = this;

    // Enable anchor clicks in the injected caption html.
    // Thanks Nate Wright for the fix. @https://github.com/NateWr
    if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
      this.album[this.currentImageIndex].title !== '') {
      var $caption = this.$lightbox.find('.lb-caption');
      if (this.options.sanitizeTitle) {
        $caption.text(this.album[this.currentImageIndex].title);
      } else {
        $caption.html(this.album[this.currentImageIndex].title);
      }
      $caption.fadeIn('fast');
    }

    if (this.album.length > 1 && this.options.showImageNumberLabel) {
      var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
      this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
    } else {
      this.$lightbox.find('.lb-number').hide();
    }

    this.$outerContainer.removeClass('animating');

    this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
      return self.sizeOverlay();
    });
  };

  // Preload previous and next images in set.
  Lightbox.prototype.preloadNeighboringImages = function() {
    if (this.album.length > this.currentImageIndex + 1) {
      var preloadNext = new Image();
      preloadNext.src = this.album[this.currentImageIndex + 1].link;
    }
    if (this.currentImageIndex > 0) {
      var preloadPrev = new Image();
      preloadPrev.src = this.album[this.currentImageIndex - 1].link;
    }
  };

  Lightbox.prototype.enableKeyboardNav = function() {
    this.$lightbox.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
    this.$overlay.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
  };

  Lightbox.prototype.disableKeyboardNav = function() {
    this.$lightbox.off('.keyboard');
    this.$overlay.off('.keyboard');
  };

  Lightbox.prototype.keyboardAction = function(event) {
    var KEYCODE_ESC        = 27;
    var KEYCODE_LEFTARROW  = 37;
    var KEYCODE_RIGHTARROW = 39;

    var keycode = event.keyCode;
    if (keycode === KEYCODE_ESC) {
      // Prevent bubbling so as to not affect other components on the page.
      event.stopPropagation();
      this.end();
    } else if (keycode === KEYCODE_LEFTARROW) {
      if (this.currentImageIndex !== 0) {
        this.changeImage(this.currentImageIndex - 1);
      } else if (this.options.wrapAround && this.album.length > 1) {
        this.changeImage(this.album.length - 1);
      }
    } else if (keycode === KEYCODE_RIGHTARROW) {
      if (this.currentImageIndex !== this.album.length - 1) {
        this.changeImage(this.currentImageIndex + 1);
      } else if (this.options.wrapAround && this.album.length > 1) {
        this.changeImage(0);
      }
    }
  };

  // Closing time. :-(
  Lightbox.prototype.end = function() {
    this.disableKeyboardNav();
    $(window).off('resize', this.sizeOverlay);
    this.$lightbox.fadeOut(this.options.fadeDuration);
    this.$overlay.fadeOut(this.options.fadeDuration);

    if (this.options.disableScrolling) {
      $('body').removeClass('lb-disable-scrolling');
    }
  };

  return new Lightbox();
}));  
 
■ Lightbox v2.11.3 カスタマイズ後の画像(こちらのサンプルデモで確認できます)


 Lightbox2.11.3のソーシャルボタンカスタマイズ方法(応用編)

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

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

▼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ファイルの114行目の※※※の部分(appendToコードの最後の</div>タグの前)です。
    ボタンの雛形コード(DIVタグ)は、クラス名 lb-dataContainer のDIV要素の後に、jQuery afterメソッドで追加します。

    ▽ボタン領域の配置場所(lightbox.jsファイル 114行目)(実際は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メソッドでボタン領域の配置例。
    下のjQueryコードでlightbox.js内のクラス名 lb-dataContainer DIV要素の後に追加できます  (下HTMLコード 213行目参照)
    $(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コード 251行目から)
    $(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コード 292行目から)
    //* ソーシャルボタン個別設定 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コード 374行目から)
     $('.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コード 439行目)
    $('.o-facebooklike').socialbutton('facebook_like', { button: 'button_count' });

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

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

このSNSソーシャルボタン設置サンプルデモを見る>>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"> <!-- HTMLソースコード utf-8 必須 -->
<meta property="og:title" content="Lightboxv2.11.3のスライド画面にソーシャルボタンを設置する(デモ)"> <!-- 必須 -->
<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/lightbox2113/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="http://urbanqee.com/webutil/photo/lightbox2113/lightbox-sns-button-demo0.html">        <!-- 推奨 -->
<meta name="twitter:image" content="http://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg"> 
<meta name="twitter:title" content="Lightboxv2.11.3のスライド画面(モーダルウインド)上にソーシャルボタンを設置する(デモ)">     <!-- 推奨 -->
<meta name="twitter:description" content="15SNS/RSSサイト、フリーデザイン画像ボタンが15、公式ボタンが8種類"> <!-- 推奨 -->

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

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- lightbox v2.11.3 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; }

  /*             */
   div.free2-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用 */  
   } 
  .free2-button div{ 
    float: left; margin: 2px; display: block;
    vertical-align: middle; cursor: pointer  
   }
  .free2-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:gray
 }
</style>
<style>
/* 吹き出し ************************/
/*  ボタンの上に置く top */
.balloon_top {
	position: relative;
	background: #fcfcfc;
	border: 1px solid gray; /*#242a2e;*/
        font-size:11px;
        text-align:center;
        margin-bottom:5px; padding:3px;
        font-family: arial, "MS ゴシック",sans-serif;
        border-radius: 5px;        
}
.balloon_top:after, .balloon_top:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloon_top:after {
	border-color: rgba(252, 252, 252, 0);
	border-top-color: #fcfcfc;
	border-width: 5px;
	margin-left: -5px;
}
.balloon_top:before {
	border-color: rgba(36, 42, 46, 0);
	border-top-color: gray; /*#242a2e;*/
	border-width: 6px;
	margin-left: -6px;
}

/* ボタンの右に置く right */
.balloon_right {
	position: relative;
	background: #ffffff;
	border: 1px solid gray; /*#0a0c0d;*/
        font-size:11px;
        text-align:center;
        margin-left:5px; padding:3px; margin-top:30px;
        font-family: arial, "MS ゴシック",sans-serif;
        border-radius: 5px;
}
.balloon_right:after, .balloon_right:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloon_right:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #ffffff;
	border-width: 3px; /*5px;*/
	margin-top: -3px; /*5px;*/
}
.balloon_right:before {
	border-color: rgba(10, 12, 13, 0);
	border-right-color: gray; /*#0a0c0d;*/
	border-width: 4px; /*6px;*/
	margin-top: -4px;  /*6px;*/
}
/*     */

</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" />
<!-- Twitter button widgets 
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
-->
</head>
<body>
<h2 style="text-align:left">Lightbox v2.11.3のスライド画面にソーシャルボタンを設置する方法(デモ)</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>
<p><b>・デザインボタン(プラグイン未使用)</b></p>
          <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>
<p><b>・公式ボタン(jQuery.socialbuttonプラグイン使用)</b></p>
          <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>
<h3>▼ デザインボタンのバリエーション(プラグイン未使用 - Facebookカウント付き)</h3>
          <DIV class="free2-button">
             <div class="f2-twitter-share"></div>
             <div class="f2-facebook-share"></div>
             <div class="f2-hatena-bookmark"></div>
             <div class="f2-pocket-post"></div>
             <div class="f2-tumblr-post"></div>
          </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> 
           +  '<div><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + encodeURIComponent(this.href) + '" title="Twitter">Tweet</a></div>'
           +  '<div class="fb-like" data-href="' + document.URL + '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false">FACEBOOK</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><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + encodeURIComponent(document.URL) + '" title="Twitter">Tweet</a></div>'
           +  '<div class="fb-share-button" data-href="' + document.URL + '" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&src=sdkpreparse">シェア</a></div>'
           +  '<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);
 $('.free2-button div').html(tag);
//バリエーション
 var img1 = {
        "twitter": "../../sns/images/socialicons-type1/Twitter.jpg", 
        "facebook": "../../sns/images/socialicons-type1/Facebook.jpg", 
        "hatena": "../../sns/images/socialicons-type1/Hatebu.jpg",
        "pocket": "../../sns/images/socialicons-type1/Pocket.jpg",
        "tumblr": "../../sns/images/socialicons-type1/Tumblr.jpg",
          }

 var img2 = {
        "twitter": "../../sns/images/socialicons-type3/Twitter.png", 
        "facebook": "../../sns/images/socialicons-type3/Facebook.png",
        "hatena": "../../sns/images/socialicons-type3/Hatebu.png",
        "pocket": "../../sns/images/socialicons-type3/Pocket.png",
        "tumblr": "../../sns/images/socialicons-type3/Tumblr.png",
          }

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

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

 $('.f2-twitter-share a').attr({ "href": "http://twitter.com/share?url="+ shareUrl + "&text=" + shareTitle , "class": "twitter-share-button1" });
 $('.f2-twitter-share img').attr({ 'src': img2["twitter"], 'title': 'このページの情報を Twitter で共有する', 'width': '64', 'height': '64',
     'onmouseover': 'this.src="' + img1["twitter"] + '"', 'onmouseout': 'this.src="' + img2["twitter"] + '"'  });

 //$('.f-twitter-share').attr('id', 'b1'); class="twitter-share-button"
 //$('#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' });

 $('.f2-facebook-share a').attr("href", "http://www.facebook.com/sharer.php?u="+ shareUrl +"&t=" + shareTitle);
 $('.f2-facebook-share img').attr({ 'src': img2["facebook"], 'title': 'このページの情報を Facebook で共有する', 'width': '64', 'height': '64',
     'onmouseover': 'this.src="' + img1["facebook"] + '"', 'onmouseout': 'this.src="' + img2["facebook"] + '"'  });
 buttoncountSet("http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php","facebook","top","64","64",".f2-facebook-share");

 //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' });

 $('.f2-hatena-bookmark a').attr("href", "http://b.hatena.ne.jp/add?mode=confirm&url=" + shareUrl + "&title=" + shareTitle);
 $('.f2-hatena-bookmark img').attr({ 'src': img2["hatena"], 'title': 'このページの情報を はてなブックマーク に追加する', 'width': '64', 'height': '64',
    'onmouseover': 'this.src="' + img1["hatena"] + '"', 'onmouseout': 'this.src="' + img2["hatena"] + '"'  });

 //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' });

 $('.f2-pocket-post a').attr("href","http://getpocket.com/edit?url=" + shareUrl + "&title=" + shareTitle);
 $('.f2-pocket-post img').attr({ 'src': img2["pocket"], 'title': 'このページの情報を pocket で共有する', 'width': '64', 'height': '64',
    'onmouseover': 'this.src="' + img1["pocket"] + '"', 'onmouseout': 'this.src="' + img2["pocket"] + '"'  });


 //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' });

 $('.f2-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");
 $('.f2-tumblr-post img').attr({ 'src': img2["tumblr"], 'title': 'このページの情報を Tumblr に登録する', 'width': '64', 'height': '64',
    'onmouseover': 'this.src="' + img1["tumblr"] + '"', 'onmouseout': 'this.src="' + img2["tumblr"] + '"'  });

//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' });
 
 /* $('.sns-line a').attr("href", "http://line.me/R/msg/text/?" + shareUrl + "&title=" + shareTitle);*/

 $('.free-button a').click(function(){
    window.open(this.href, "social_window","width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes");
    return false;
  });
 $('.free2-button a').click(function(){
    window.open(this.href, "social_window","width=600,height=500,resizable=yes,scrollbars=yes,toolbar=yes");
    return false;
  });
});

//関数
function buttoncountSet(url2,site,pos,bw,bh,target){
        var shareurl = url2;         // ボタン設置ページのURL    buttoncountSet(url2,"facebook",count,w,h,target);  
        var site = site;             // SNS サイト名 例:facebook
        var pos = pos;               // countの設置位置 top, right
        var bwidth = bw;             // ボタン画像の横幅
        var bheight = bh;            // ボタン画像の高さ
        var phpurl = "http://urbanqee.com/webutil/sns/js/socialbutton-count.php";  // ソーシャルボタンカウント取得PHP URL (要修正)     
        //var encodeurl = encodeURIComponent(shareurl);  // エンコードはPHP側で行う

    if(pos == "top" || pos == "right"){

        $.ajax({
            url: phpurl,  // ソーシャルボタンカウント取得PHP
            dataType: "json",
            data: { url: shareurl, site: site, pass: "H290707" },

            success: function(data) {
                var res = data;
                if(pos == "top"){
                   var oyadiv = $('<div style="width: ' + bwidth + 'px; display:table-cell;"></div>'); //親要素追加
                   $(target).wrap(oyadiv); 
                   $(target).css( {'float': 'none'} );  // float 初期化 
                   var countTag = '<div class="balloon_top" style="width: ' + "90%" + '">' + res + '</div>';
                   $(target).before(countTag);
                  }
                else if(pos == "right"){
                   var oyadiv = $('<div style="width: ' + '100%' + 'px; display:table-cell;"></div>'); //親要素追加
                   $(target).wrap(oyadiv); 
                   var countTag = '<div style="float: left; height:' + bheight + 'px"><span class="balloon_right">' + res + '</span></div><div style="clear:both"></div>';
                   $(target).after(countTag);
                   //$(".baloon-right").css( {'height': bheight ,'float': 'left' } );
                   $(target).css( {'float': 'left'} );  
                  }
                else{ return false; }
             },
	   error: function(obj) {
                console.log(obj);
		alert("通信に失敗しました…。");

           }
         });
    }

}

</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');
  });
//
//twttr.widgets.load(); http://qiita.com/kzhrk/items/5bc39df48dc1ab8ea850
if (typeof twttr === 'undefined') {
  var twitterjs = document.createElement("script");
  twitterjs.async = true;
  twitterjs.src = '//platform.twitter.com/widgets.js';
  document.getElementsByTagName('body')[0].appendChild(twitterjs);
}
else {
  twttr.widgets.load();
}

//Facebook
if(typeof FB === 'undefined'){
  $('body').append('<div id="fb-root"></div>');
  var fbjs = document.createElement('script');
  fbjs.id = 'facebook-jssdk';
  fbjs.src = '//connect.facebook.net/ja_JP/all.js#xfbml=1&appId={Facebook App ID}';
  document.getElementsByTagName('body')[0].appendChild(fbjs);
}else{
  FB.XFBML.parse();
}
</script>
<!-- 吹き出し -->
<script>
   $(function() {
      $('.fukidashi').powerTip({ placement: 'nw-alt' });
   });
</script>

<script>
// Twitter
// Log any kind of Web Intent event to Google Analytics
// Category: "twitter_web_intents"
// Action: Intent Event Type
// Label: Identifier for action taken: tweet_id, screen_name/user_id, click region

// First, load the widgets.js file asynchronously
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));

// Define our custom event handlers
function clickEventToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = intentEvent.region;
  pageTracker._trackEvent('twitter_web_intents', intentEvent.type, label);
}

function tweetIntentToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = "tweet";
  pageTracker._trackEvent(
    'twitter_web_intents',
    intentEvent.type,
    label
  );
}

function likeIntentToAnalytics (intentEvent) {
  tweetIntentToAnalytics(intentEvent);
}

function retweetIntentToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = intentEvent.data.source_tweet_id;
  pageTracker._trackEvent(
    'twitter_web_intents',
    intentEvent.type,
    label
  );
}

function followIntentToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = intentEvent.data.user_id + " (" + intentEvent.data.screen_name + ")";
  pageTracker._trackEvent(
    'twitter_web_intents',
    intentEvent.type,
    label
  );
}

// Wait for the asynchronous resources to load
twttr.ready(function (twttr) {
  // Now bind our custom intent events
  twttr.events.bind('click', clickEventToAnalytics);
  twttr.events.bind('tweet', tweetIntentToAnalytics);
  twttr.events.bind('retweet', retweetIntentToAnalytics);
  twttr.events.bind('like', likeIntentToAnalytics);
  twttr.events.bind('follow', followIntentToAnalytics);
});

</script>

<script>
$(function(){


	/* facebook */
	(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=236187796455704";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));

	/* g-plus
	window.___gcfg = {lang: 'ja'};
	(function() {
		var po = document.createElement('script');
		po.type = 'text/javascript';
		po.async = true;
		po.src = 'https://apis.google.com/js/plusone.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(po, s);
	})(); */

	/* hatena
	(function() {
		var po = document.createElement('script');
		po.type = 'text/javascript';
		po.async = true;
		po.charset = 'utf-8';
		po.src = 'http://b.st-hatena.com/js/bookmark_button.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(po, s);
	})(); */

});


</script>
<center>
<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>
|<a href="http://urbanqee.com/webutil/photo/lightbox2113/lightbox-v2-11-3.html" title="TOPページへ戻る">TOP</a>
</p>
<hr>

<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>
114   $('<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> <!-- ボタン設置場所は114行目 ここ クラス名lb-dataContainer DIV要素の後 -->
        </div>').appendTo($('body'));
        

サンプル使用方法Lightboxのダウンロード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プラグイン


  最終更新日:2021.1.28(初版)