Movable TypeでLightbox JSを試してみる

Lightbox.jsは、サムネイルをクリックすると、元の大きさのイメージを同じウィンドウに表示してくれるJAVAスクリプトで、ポップアップでもなく別ウィンドウでもなくなかなかええ感なので
まぁ、今の流行りということで試してみる。

DSCF0002_s.JPG ← クリックしてみ!

まずはLightbox.js v2.0を入手
http://www.huddletogether.com/projects/lightbox2/ からLightbox.jsをダウンロードし展開

■ js/lightbox.js の編集
49行目 fileLoadingImage: 'images/loading.gif',
50行目 fileBottomNavCloseImage: 'images/closelabel.gif',
 ↓
49行目 fileLoadingImage: 'http://www.domainname.com/lightbox/loading.gif',
50行目 fileBottomNavCloseImage: 'http://www.domainname.com/lightbox/closelabel.gif',

バーチャルドメインを使っているのでどのドメインからも1つの Lightbox.js v2.0 を使いまわせるように絶対パスで記述してみます

■ lightbox の配置
/virtual/domainname.com/lightbox へ配置
 lightbox
 ├─css
 │ └─lightbox.css
 ├─images
 │ ├─bullet.gif
 │ ├─close.gif
 │ ├─closelabel.gif
 │ ├─donate-button.gif
 │ ├─download-icon.gif
 │ ├─image-1.jpg
 │ ├─loading.gif
 │ ├─nextlabel.gif
 │ ├─prevlabel.gif
 │ ├─thumb-1.jpg
 │ └─Thumbs.db
 ├─index.html
 └─js
  ├─builder.js
  ├─effects.js
  ├─lightbox.js
  ├─prototype.js
  └─scriptaculous.js

■ /etc/httpd/conf/vhost.conf にエイリアスの追加
[root@sv22 ~]# vi /etc/httpd/conf/vhost.conf
Alias /lightbox/ "/virtual/domon.jp/lightbox/"
を追加

■ Apache の再起動
[root@sv22 ~]# /etc/rc.d/init.d/httpd restart
httpd を停止中: [ OK ]
httpd を起動中: [ OK ]

■ Movable Type - スタイルシート の設定
<デザイン>→<テンプレート>→<スタイルシート(メイン)(styles.css)>に
@import url(http://www.domainname.com/lightbox/css/lightbox.css) screen;
を追加
<デザイン>→<テンプレート>→<メインページ(index.html)>に
<script src="http://www.domainname.com/lightbox/js/prototype.js" type="text/javascript">
<script src="http://www.domainname.com/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript">
<script src="http://www.domainname.com/lightbox/js/lightbox.js" type="text/javascript">
を追加

追加したら保存して再構築します。

以上で一通りLightbox JSの準備ができました。
Lightbox JSでサムネイル画像を表示させるには、以下のようにします。

のように aリンクの最後に rel="lightbox" を追加


おっ!でけた!

トラックバック(0)

このブログ記事を参照しているブログ一覧: Movable TypeでLightbox JSを試してみる

このブログ記事に対するトラックバックURL: http://radidri.com/cgi-bin/mt5/mt-tb.cgi/4096

コメントする

このブログ記事について

このページは、domonが2008年7月 5日 01:17に書いたブログ記事です。

ひとつ前のブログ記事は「OpenPNE 改造なしにコメント欄にメンバーの写真を表示するを試してみる」です。

次のブログ記事は「Movable TypeでLightbox JSに「LightBox2MT」プラグインを試してみる」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ADs by Google

Powered by Movable Type 5.04