LightboxにTwitterなどのソーシャルボタンを設置する/拡大画像にソーシャルボタン
[Lightbox+jquery.socialbutton]

Lightbox v2.7.1 カスタマイズ(応用編)ソーシャルボタン サンプルデモ

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

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

  1. 1枚の画像


  2. 複数画像のグループ
    2012年12月 日比谷1 2012年12月 日比谷2 2012年12月 日比谷3 2012年12月 日比谷4 2012年12月 日比谷5
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画像コンテナ枠の背景色(B)を変更する(別々の色に修正した)(lightbox.css- .lb-outerContainer)
 43 .lb-outerContainer {
 44  position: relative;
 45  background-color: yellow; /*画像コンテナ枠の色(B)デフォルト white*/
4. Lightbox画像コンテナ枠の幅を変更する(lightbox.css-.lb-container)(C)
63 .lb-container {
64  padding: 10px; /*デフォルト 4px*/
65 }
5. CLOSEボタン画像を変更する(lightbox.css-.lb-data .lb-close)(H)
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)(F,G)
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)(F,G)
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)(D)
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)(D)
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">
#social {
    display: inline;
    list-style: none;
}
#social div {
    float: left;
    display: block;
    vertical-align: middle;
    width:110px;
}
</style>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> jquery.min.jsはLightboxで展開済みのため省略-->
<script src="js/jquery.socialbutton-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.facebooks').socialbutton('facebook_share', { button: 'button_count' });
    $('.facebookl').socialbutton('facebook_like', { button: 'button_count' });
    $('.tweet').socialbutton('twitter', { button: 'horizontal' });
    $('.google_plusone').socialbutton('google_plusone');
    $('.hatena').socialbutton('hatena');
});
</script>
<!-- SNSボタン OWARI-->
</head>
<body>

9.2 lightbox.jsの61行目を次のように、表示したいソーシャルボタンの個数分のdivタグを挿入します(赤字部分。ここの例は5個のボタン設置。実際は1行。)

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 id='social'><div class='hatena'></div><div class='tweet'></div><div class='facebookl'></div><div class='facebooks'></div>
                   <div class='google_plusone'></div></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