iam1969의 무식한 방법입니다.
lightbox 를 본인의 계정에 설치한 후, 아래의 스크립트를 "/head"전에 삽입합니다.(원하는 template에)
<
script type=
"text/javascript" src=
"http://xxx.net/lightbox/js/prototype.js"></
script>
<
script type=
"text/javascript" src=
"http://xxx.net/lightbox/js/scriptaculous.js?load=effects,builder"></
script>
<
script type=
"text/javascript" src=
"http://xxx.net/lightbox/js/lightbox.js"></
script>
또한 styles.css 파일에서 lightbox/css/lightbox.css를 추가합니다.
아래는 iam1969.net의 styles.css 인데, 마지막에 추가 했습니다.
@import url(/MT/xxx/xxx/blog.css);
@import url(/MT/xxx/xxxx/iam1969-red.css);
@import url(/lightbox/css/lightbox.css); <-여기
그럼 이미지를 올려보겠습니다.
예제: 한장의 이미지
rel="imagebox" 삽입하면 됩니다. 타이틀은 title="어쩌구" <a href="http://iam1969.net/picture_2008/iam1969view.jpg" title="iam1969" rel="lightbox">
<img height="65" width="100" src="http://iam1969.net/picture_2008/iam1969view-thumb-100x65.jpg"/>
</a>
예제: 여러장의 이미지 - 하나의 앨범으로 클릭하면 하나의 앨범에 있는 사진을 연속적으로 볼 수 있습니다.)
rel="imagebox[앨범이름-아무거나]" 삽입하면 됩니다. 타이틀은 title="어쩌구"
예제에서는 rel="imagebox[iam1969]" 앨범이름을 iam1969라고 적었습니다.
<a href="http://iam1969.net/picture_2008/iam1969view.jpg" title="iam1969" rel="lightbox[iam1969]"> <img height="65" width="100" src="http://iam1969.net/picture_2008/iam1969view-thumb-100x65.jpg">
</a>
<a href="http://iam1969.net/picture_2008/iam1969strength.jpg" title="iam1969" rel="lightbox[iam1969]"> <img height="65" width="100" src="http://iam1969.net/picture_2008/iam1969strength-thumb-100x65.jpg"/>
</a>
<a href="http://iam1969.net/picture_2008/iam1969skill.jpg" title="iam1969" rel="lightbox[iam1969]"> <img height="65" width="100" src="http://iam1969.net/picture_2008/iam1969skill-thumb-100x65.jpg"/>
</a>
movabletype에서 이미지 업로드 할때에 자동으로 thumbnail image를 만들어주는데 여의치 않으면 그냥 텍스트링크를 사용해도 됩니다.
<a href="http://iam1969.net/picture_2008/iam1969view.jpg" title="iam1969" rel="lightbox[iam1969]"> 파일 1 </a>
그럼 다음과 같이 되겠지요.
파일 1