次のスクリプトを記述します。対応のブラウザで見てください。カスタマイズ後の画像(こちらのサンプルデモで確認できます)Lightbox2.9.0のソーシャルボタンカスタマイズ方法(応用編)ソーシャルボタンカスタマイズの説明の前に、Lightbox2.9.0にソーシャルボタンを追加したデモページのHTML全体のソースコードとボタンの設置場所のソースコードについて下に示します。ここをクリックするとそのデモを見ることができます。ソーシャルボタン設置例を、デモページのキャプチャー画像で下に示します。下段:公式ボタン)lightboxのソーシャルボタンカスタマイズ方法の手順の概略はつぎのです。ソーシャルボタンの設置に当たり、5つの項目事前に確認または取得します。(オリジナルデザイン画像ボタン、公式ボタン)ソーシャルボタンの設置に当たり、下の5つの項目について事前に確認または取得しておく必要があります(重要)。Pinretestです。それらの確認項目の取得方法は、下表を参照してください。好みのアイキャッチ画像(サムネイル)のURL公式ボタンを設置する場合、jquery.socialbuttonプラグインをダウンロードします。src="http://urbanqee.com/webutil/sns/js/jquery.socialbutton-1.9.1.js"></script>設置するボタン領域の配置します。(オリジナルデザイン画像ボタン、公式ボタン)設置するソーシャルボタンのHTMLの雛形コードを、設置したいボタンの数だけモーダルウィンドウ上(lightbox.jsファイル内)に配置します。divタグのclass名でソーシャルボタンの種類を識別します。></div>ボタンの配置場所は、下にとおりlightbox.jsファイルの96行目の※※※の部分(appendToコードの最後の</div>タグの前)です。afterメソッドで追加します。ソーシャルボタン共通設定のところに設定します。jQueryでフリーデザイン画像ボタンを設定します。(オリジナルデザイン画像ボタン)下のボタンの設定例は、TwitterとFacebookを示しています。});jQueryで、オリジナルデザイン画像ボタンのポップアプウィンドウ起動コードを設定します。(オリジナルデザイン画像ボタン)▽ボタンのポップアプウィンドウ起動コードを設定。クラス名free-buttonは、親DIVタグのクラス名です。});jQueryで公式ボタンを設定します。});jquery.socialbuttonプラグインの詳細は、jquery.socialbuttonプラグイン公式サイト参照。v2.9.0(初版)。