iam1969

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