/ programing

Movable TypeでLightbox2を使ってみる

prototypeベースのLightbox2を入れてみることにした。

http://www.lokeshdhakar.com/projects/lightbox2/から2.04をダウンロードして解凍。

css/js/imagesは以下のように配置

  • css/lightbox.css -> /css/lightbox.css
  • images/* -> /images/lightbox/*
  • js/*.js -> /js/lightbox/*.js

パスの変更に伴い、lightbox.jsの49,50行目あたりを以下のように変更

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

おなじくlightbox.cssの16,17行目あたりを以下のように変更

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

あとはヘッダーのテンプレートに

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

を追加して終わり。