リッチな画像表示ができるLightbox2の導入方法:Javascript

Wed, 09 Mar 2011 11:40:32 +0900

ページ内で画像を拡大表示できるやつ

最近いろいろなサイトでみかける画像をページの前面で表示するやつ。

コレ↓（クリックしてみてください）

導入方法と手順

Lightbox2というJavascript、導入が難しいのかなと思ったら以外に簡単。

http://www.lokeshdhakar.com/projects/lightbox2/ http://www.lokeshdhakar.com/projects/lightbox2/

まずダウンロードして解凍
解凍後ファイルを任意のディレクトリにアップロード

（例：/js/lightbox/に解凍したjs,css,imageフォルダをアップロード）

使用するページのヘッダーに以下のコード記述

<script type="text/javascript" src="/js/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/js/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/js/lightbox/css/lightbox.css" type="text/css" media="screen" />

lightbox.js内のアイコン画像のパスを変更

fileLoadingImage:        '/include/js/lightbox/images/loading.gif',
fileBottomNavCloseImage: '/include/js/lightbox/images/closelabel.gif',

light.css内のアイコン画像パスを変更

#prevLink:hover, #prevLink:visited:hover { background: url(/js/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/js/lightbox/images/nextlabel.gif) right 15% no-repeat; }

表示対象画像にリンクするタグ内にrel=“lightbox"追記

<a href="test.jpg" rel="lightbox"><img src="thumbnail.jpg" /></a>

たったこれだけでリッチなサイトに変身です。

写真にグループ名を付けて、同じフォルダ内にある画像を次々めくったり、タイトルをつけたりすることもできます。

<a href="test.jpg" rel="lightbox" title="タイトル名">写真を見る</a>

<a href="image1.jpg" rel="lightbox[グループ名]">写真1</a>
<a href="image2.jpg" rel="lightbox[グループ名]">写真2</a>
<a href="image3.jpg" rel="lightbox[グループ名]">写真3</a>

MovableType用のプラグインがある

MovableTypeを使用している方はプラグイン「LightBox2MT」を使用すると、画像挿入時はタグ内にrel=“lightbox"を自動的に入れてくれます。

ただし、画像をアップロードする際に「画像をポップアップで開く」を選択しているとLightbox2が使えません。

プラグインの配布は製作者の以下ブログ内からダウンロードできるので、ダウンロードしたら解凍し、/mt/plugins/内にアップロードするだけで使えます。

http://blog.webcreativepark.net/2008/05/19-235050.html http://blog.webcreativepark.net/2008/05/19-235050.html

同じような他のJSの参考

https://cornel.bopp-art.com/lightcase/ https://cornel.bopp-art.com/lightcase/

Lightbox on qwerty.work

【JS】Lightboxみたいにテキストをモーダルウィンドウに表示するプラグインメモ。

Ligthbox風にテキストを表示したい

参考サイト

ダウンロードページ

リッチな画像表示ができるLightbox2の導入方法:Javascript

ページ内で画像を拡大表示できるやつ

導入方法と手順

MovableType用のプラグインがある

同じような他のJSの参考

Lightbox on qwerty.work

【JS】Lightboxみたいにテキストをモーダルウィンドウに表示するプラグインメモ。

Ligthbox風にテキストを表示したい

参考サイト

Magnific Popup

ダウンロードページ

リッチな画像表示ができるLightbox2の導入方法:Javascript

ページ内で画像を拡大表示できるやつ

導入方法と手順

MovableType用のプラグインがある

同じような他のJSの参考