SQLの窓

2016年10月09日


Lightbox2 ライブラリの今時の使い方

2015年の7月の中旬以降のバージョンでは、lightbox.js は、ページの最後で読み込むようになっていました(WEBアーカイブ調べ)
Include the Javascript at the bottom of your page before the closing </body> tag:
( 画像より後に読み込むといいようです。また css を読み込んでから js です ) バージョン v2.04 のころは、prototype.js と scriptaculous.js が使われていたのですが、2.6(2014/03/20) では、jQuery が使用されていました( バージョンは 1.10.2 ) です。 今時では jQuery は Google がホスティングしてくれるのでそれを使うのが簡単です。あと、Lightbox2 のファイルが lightbox.min.js と lightbox.css(又はlightbox.min.css) と 画像ファイルがいくつか必要になります。 ここでは、関係するファイルを一箇所にまとめるために、lightbox.css(又はlightbox.min.css) 内の画像のパスを変更しています( 例えばここでは url(../img/close.png) を url(close.png) にしています )
body:after {
  content: url(close.png) url(loading.gif) url(prev.png) url(next.png);
  display: none;
}
それらを使用して Lightbox2 を使う場合以下のようになります
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/lightbox2/lightbox2/lightbox.min.css">
<a href="http://goo.gl/nC01x4" data-lightbox="daz3d"><img src="http://goo.gl/AgJ1QU"></a>
<a href="http://goo.gl/ibgyRW" data-lightbox="daz3d"><img src="http://goo.gl/ulC3Hs"></a>

<script type="text/javascript" src="https://lightbox.sakura.ne.jp/demo/lightbox2/lightbox2/lightbox.min.js"></script>


この画像は、Picasa に登録してあるのでやたらと URL が長いので Google の URL 短縮機能を使って画像の URL を短くしています。

また、Lightbox の現在の最新仕様として data-lightbox 要素が使用されていますが、古くからの rel を使った方法も動作します。( rel="lightbox[group_string]" )

data-lightbox="daz3d"daz3d は、画像のグループで、表示後に直接画像間の表示を切り替える事ができるようになります。

※ 他のライブラリやCSSの影響で、Lightbox の実行時の背景を暗くできない場合がある場合は、そのページに以下の CSS を設定するといいと思います。
<style type="text/css">
#lightboxOverlay {
	opacity: 0.8!important;
}
</style> 

その他のオプション

リンク( アンカー要素 ) に title 属性を指定すると、その内容が画像の左下に表示されます。
2.7.1 では、data-title="タイトル文字列" が使用できます。


タイトルの中には、HTML の表現も可能ですが、以下のような記述に変換する必要があります。( 実際には、一部分でいいのですが、全て変換しています )

※ リンクを試したのですが、クリックしても動作しませんでした。
2.7.1 ではリンクも動作しました。
但し、アプリで操作しているからなのか、target="_blank" が動作しなかったのと、IFRAME 内ではリンクが動作しませんでした。
<a href="http://goo.gl/UUjQaE" data-lightbox="daz3d" data-title="&#9660;&#12522;&#12531;&#12463;&#12391;&#12377;&#12290;&#12463;&#12522;&#12483;&#12463;&#12391;&#12365;&#12414;&#12377;&#60;&#98;&#114;&#62;&#60;&#97;&#32;&#104;&#114;&#101;&#102;&#61;&#34;&#104;&#116;&#116;&#112;&#115;&#58;&#47;&#47;&#116;&#119;&#105;&#116;&#116;&#101;&#114;&#46;&#99;&#111;&#109;&#47;&#115;&#119;&#111;&#114;&#99;&#34;&#62;&#60;&#105;&#109;&#103;&#32;&#115;&#114;&#99;&#61;&#34;&#104;&#116;&#116;&#112;&#115;&#58;&#47;&#47;&#108;&#104;&#53;&#46;&#103;&#111;&#111;&#103;&#108;&#101;&#117;&#115;&#101;&#114;&#99;&#111;&#110;&#116;&#101;&#110;&#116;&#46;&#99;&#111;&#109;&#47;&#45;&#107;&#67;&#89;&#84;&#83;&#109;&#84;&#114;&#74;&#88;&#115;&#47;&#85;&#82;&#118;&#77;&#81;&#121;&#57;&#67;&#108;&#113;&#73;&#47;&#65;&#65;&#65;&#65;&#65;&#65;&#65;&#65;&#82;&#117;&#119;&#47;&#53;&#66;&#84;&#75;&#84;&#107;&#50;&#99;&#95;&#115;&#119;&#47;&#115;&#49;&#48;&#48;&#47;&#95;&#105;&#109;&#103;&#46;&#112;&#110;&#103;&#34;&#62;&#60;&#47;&#97;&#62;"><img src="http://goo.gl/9n0KCM"></a>
変換用の簡単なプログラム

▼ 以下に表示されます

関連する記事

JavaScript : 入力文字列を htmlentity に変換する



【JavaScript ライブラリの最新記事】
posted by lightbox at 2016-10-09 03:14 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり