LightboxにTwitterなどのソーシャルボタンを設置する／拡大画像にソーシャルボタン
［Lightbox+jquery.socialbutton］
Lightbox v2.7.1 カスタマイズ（応用編）ソーシャルボタン　サンプルデモ

  Lightbox v2.7.1本編ページへ戻る

ソーシャルボタンサンプルデモ（下のカスタマイズ修正が反映されています。ソーシャルボタン関連は９項。）

  1. １枚の画像


  2. 複数画像のグループ
    2012年12月　日比谷１ 2012年12月　日比谷２ 2012年12月　日比谷３ 2012年12月　日比谷４ 2012年12月　日比谷５
Lightbox2.7.1のカスタマイズ（応用編）修正例 （修正値は赤字）
v2.51 拡大表示例
※写真表示例のサンプル写真のサイズは640X480   ※#lightboxOverlayと#lightboxの画面は同じ大きさです。従い白色の囲い枠は実際にはありません。
1. Lightboxページの背景色を変更する（lightbox.css-.lightboxOverlay）（①）- pink：■ iron green
7 .lightboxOverlay {
8   position: absolute;
9   top: 0;
10  left: 0;
11  z-index: 9999;
12  background-color: pink; /*デフォルト　black*/
13  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
14  opacity: 0.8;
15  display: none;
16 }
2. Lightboxページの背景色の透明度を変更する（lightbox.css-.lightboxOverlay）（①）
7 .lightboxOverlay {
（途中省略）
12  background-color: navy; /*デフォルト black*/
13  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /*デフォルト 80*/
14  opacity: 0.5; /*デフォルト 0.8*/
（途中省略）
16 }

※ 13 filter-opacity場合　0（完全に透明） ～ 100（完全に不透明）の範囲で指定する（初期値は100）
※ 14 opacityの場合　0.0（完全に透明）～1.0（完全に不透明）の範囲で指定する（初期値は1）
3. Lightbox画像コンテナ枠の背景色（③）を変更する（別々の色に修正した）（lightbox.css- .lb-outerContainer）
 43 .lb-outerContainer {
 44 　position: relative;
 45 　background-color: yellow; /*画像コンテナ枠の色（③）デフォルト white*/
4. Lightbox画像コンテナ枠の幅を変更する（lightbox.css-.lb-container）（④）
63 .lb-container {
64 　padding: 10px; /*デフォルト 4px*/
65 }
5. CLOSEボタン画像を変更する（lightbox.css-.lb-data .lb-close）（⑨）
195 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）（⑦,⑧）
109 .lb-nav a.lb-prev {
（途中省略）
113  background: url(../images/prev.png) left 95% no-repeat; /*デフォルト 48*/
（途中省略）
127 .lb-nav a.lb-next {
（途中省略）
131  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）（⑦,⑧）
109 .lb-nav a.lb-prev {
110  width: 34%;
111  left: -50px; position: absolute; /*マイナス値を指定する。デフォルト 0*/
112  float: left;
113  background: url(../images/prev.png) left 90% no-repeat;
114  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/
115  opacity: 1; /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/
127 .lb-nav a.lb-next {
128  width: 64%;
129  right: -50px; /*マイナス値を指定する。デフォルト 0*/
130  float: right;
131  background: url(../images/next.png) right 90% no-repeat;
132  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/
133  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.js）（⑤）
26 LightboxOptions.prototype.albumLabel = function(curImageNum, albumSize) {
27  return "★公園の風景2014 - " + curImageNum + " / " + albumSize; /* Imageを★公園の風景2014 - に変更*/
28 }; /* of を / に変更（何枚中何枚目の表示例 7of15→7/15）*/
8. Lightboxデータコンテナ上の画像キャプションと画像枚数の文字色を変更する（デフォルトは未定義）（lightbox.css-.lb-data .lb-caption / .lb-data .lb-number）（⑤）
176 .lb-data .lb-caption {
177 　font-size: 13px;
178 　font-weight: bold;
179 　line-height: 1em;
　　color: white; /*画像キャプション　1行追加　白色*/
180 }
181 182 .lb-data .lb-number {
183 　display: block;
184 　clear: left;
185 　padding-bottom: 1em;
186 　font-size: 11px;
187 　color: yellow; /*何枚中何枚目表示（画像枚数）　#999999*/
188 }
9. Lightboxにソーシャルボタンを設置する（HTML及びlightbox.js）
 ソーシャルボタンプラグイン(jquery.socialbutton)の詳細については、こちらを参照してください
9.1 jquery.socialbutton（jquery.socialbutton-1.9.1.min.js）をダウンロード、解凍し、HTMLに次のコードを、<head>タグ内に書きます（青字部分） ダウンロードサイト 

<!-- SNSボタン ////////////////////////-->
<style type="text/css">
div.social{
    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用 */  
   } 
.social div{ 
    float: left; margin: 2px; display: block;
    vertical-align: middle; cursor: pointer; width:80px; /*border:1px solid #dcdcdc  */
   }
.social:after { content: ""; clear: both; display: block; 
   }
</style>
<script>
$(function() {
//ソーシャルボタンのdivタグの配置 10 ボタン
 var buttonTag = "<DIV class='social'>"
              +  "<div class='tweet'></div>"
              +  "<div class='facebooks'></div>"
              +  "<div class='facebookl'></div>"
              +  "<div class='google_plusone'></div>"
              +  "<div class='hatena'></div>"
              +  "<div class='gree_sf'></div>"
              +  "<div class='mixi_check'></div>"
              +  "<div class='mixi_like'></div>"
              +  "<div class='pinterest'></div>"
              +  "<div class='evernote'></div>"
              +  "</DIV>";
 $('.lb-dataContainer').after(buttonTag); //クラス名 lb-dataContainer DIVタグ要素（青字）の後に追加
});
</script>

</head>
<body>

<!-- SNS 1 jquery.socialbutton 使用 -->
<script src="js/jquery.socialbutton-1.9.1.js"></script>
<script>
$(function() {
//公式ボタン設定 
    //$('.tweet').socialbutton('twitter', { button: 'horizontal' });
    $('.tweet').html('');
    $('.tweet a').attr({ "href": "http://twitter.com/share?url="+ shareUrl + "&text=" + shareTitle });
    $('.tweet img').attr({ 'src': 'http://urbanqee.com/webutil/photo/lightbox290/images/Twitter.png', 
      'title': 'このページの情報を Twitter で共有する', 'width': '25', 'height': '25' });
    $('.facebooks').socialbutton('facebook_share', { button: 'button_count' });
    $('.facebookl').socialbutton('facebook_like', { button: 'button_count' });
    $('.google_plusone').socialbutton('google_plusone');
    $('.hatena').socialbutton('hatena');
    $('.gree_sf').socialbutton('gree_sf');
    $('.mixi_check').socialbutton('mixi_check', { key: 'mixi999' });
    //$('.mixi_like').socialbutton('mixi_like', {  key: 'mixi999' });
    $('.pinterest').socialbutton('pinterest', { media: 'http://www.example.com/path/to/your-image.gif' });
    $('.evernote').socialbutton('evernote');
 });
</script>

9.2 ボタンのDIVタグを、lightbox.jsの61行目のクラス名 lb-dataContainer DIVタグ要素（青色の</div>）の後に追加します。（実際は１行） 

61 $("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'>
              <div class='lb-container'><img class='lb-image' src='' /><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>
              </div>").appendTo($('body'));



 
■ lightbox.css と lightbox.js のデフォルトのソースコード（Lightbox v2.7.1）（参考：修正前）
 
■　Lightbox v2.7.1 カスタマイズ後の画像（上のサンプルデモで確認できます）

（注）なぜか「facebookシェア」（facebook_share）が表示できません。

TOP

  最終更新日：2015.4.10