ＳＱＬの窓
<< Firebase API + And… | TOP | JavaScript : 入力… >>

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 ライブラリ
| このブログの読者になる
| 更新情報をチェックする



















































Powered by Seesaa

 
























container 終わり































✅ フリーフォントで簡単ロゴ作成

✅ フリーフォントでボタン素材作成

✅ フリーフォントで吹き出し画像作成

✅ フリーフォントではんこ画像作成

✅ ほぼ自由に利用できるフリーフォント

✅ フリーフォントの書体見本とサンプル

✅ 画像を大きく見る為のウインドウを開くボタンの作成





































✅ CSS ドロップシャドウの参考デモ

✅ イラストAC

✅ ぱくたそ

✅ 写真素材 足成

✅ フリーフォント一覧

✅ utf8 文字ツール












右サイド 終わり



base 終わり