미루스타일 챕터 0 - 인연 :: 테터툴즈에 lightbox를 적용해보자!

테터툴즈에 lightbox를 적용해보자!

| 공부합시다!/Datas 2006/01/25 12:53

Posted by 미루

간지님이 알려주신 lightbox를 테터툴즈에 붙여봅시다~ -0-;

아... 제 방법보다 더 좋은 방법이 있을 수 있겠지만;; 웹개발쪽에 오랫동안 손을 놓은지라.. 다른 좋은 방법이 있으신 분께서는.. 알려주시면 감사하겠습니다.

NIKON | E3200 | Normal program | Multi-Segment | 3/100sec | f3.7 | 0EV | 10.9mm | ISO-50 | No Flash | 2005:02:23 08:28:00

테스트이미지

먼저 lightbox_plus 원본출처를 걸어둡니다. -0-;

적용방법!

1. 여기 간지님의 글을 클릭하시어 간지님이 올려주신 파일들을 몽땅 따운로드 받아봅시다~;(가서 찾아보셔요 -0-)

2. 다운로드 받으신 파일들을 압축을 푼 뒤. lightbox.css, lightbox_plus.js 파일은 테터툴즈 폴더에..

이미지들은 images 폴더에 몽땅 넣어줍니다.

(그냥 몽땅 테터툴즈 폴더 안에 넣으신 분은 4번부터 진행하셔도 무방합니다.)

3. lightbox.css, lightbox_plus.js 파일을 수정하여 경로를 변경해 줍니다.

lightbox.css

#lightbox {
background-color: #eee;
padding: 10px;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
}
#overlay {
background-image: url(./images/overlay.png);
}
#lightboxCaption {
color: #333;
background-color: #eee;
font-size: 90%;
text-align: center;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
}
* html #overlay {
background-color: #000;
background-image: url(./images/blank.gif);
filter: Alpha(opacity=50);
}

lightbox_plus.js 중.

addEvent(window,"load",function() {
var lightbox = new LightBox({
   loadingimg:'./images/loading.gif',
   expandimg:'./images/expand.gif',
   shrinkimg:'./images/shrink.gif',
   closeimg:'./images/close.gif'
});
});

4. 사용하시는 스킨파일의 제일 위에 아래의 코드를 추가해줍니다. (예 tt/skin/myskin/skin.html)

5. 다음 inc_function.php파일에서 다음을 찾아 고칩니다. ( tt/inc_function.php )
주의! 수정 전에 항상 미리 빽업해 두시길 권합니다.

(약 818번째 줄)
function set_file($type, $cval1, $cval2, $spath, $rpath, $apath) {
   global $db, $dbid;
   switch($type) {
   case "1":
   list($width, $height) = @getimagesize($rpath.$apath.$cval1);
   $set_width = $width;
   $set_height = $height;
   $scroll = 0;
   if ($width > 800) { $set_width=820; $scroll = 1; }
   if ($height > 600) { $set_height=600; $set_width += 16; $scroll = 1; }
   if ($width > 480)
   { $GLOBALS["width_overflow"] < $width ? $GLOBALS["width_overflow"] = $width : null; }
   if (strpos(str_replace(""", "", $cval2), "width=$width") !== false
&& strpos(str_replace(""", "", $cval2), "height=$height") !== false)
return "<img src=\"$spath$apath$cval1\" $cval2 alt=\"\">";
   else return "<img src=$spath$apath$cval1 $cval2 style=cursor:pointer onclick=\"window.open(
'$spath"."image_pop.php?imagefile=$apath$cval1&width=$width&height=$height',
'','width=$set_width,height=$set_height,scrollbars=$scroll')\">";
   break;

(약 999번째 줄)
   } else switch (count($cval)) {
   case "4" :
   $type = analyze_file($rpath.$cval[1]);
   if ($cval[0] == "1L") $prefix = "<table align=left><tr><td style=padding-right:5>";
   else if ($cval[0] == "1C") {
   $prefix = "<center><table><tr><td>";
   $postfix = "</center>";
   }
   else if ($cval[0] == "1R") $prefix = "<table align=right><tr><td style=padding-left:5>";
   $buf = $prefix."<center>".set_file($type, $cval[1], $cval[2], $spath, $rpath, $apath)."</center></td></tr><tr><td class=cap1>$cval[3]</td></tr></table>".$postfix;
   break;

위와 같은 부분을 아래와 같이 만들어 줍니다.

   } else switch (count($cval)) {
   case "4" :
   $type = analyze_file($rpath.$cval[1]);
   if ($cval[0] == "1L") $prefix = "<table align=left><tr><td style=padding-right:5>";
   else if ($cval[0] == "1C") {
   $prefix = "<center><table><tr><td>";
   $postfix = "</center>";
   }
   else if ($cval[0] == "1R") $prefix = "<table align=right><tr><td style=padding-left:5>";
   $buf = $prefix."<center>".set_file($type, $cval[1], $cval[2], $spath, $rpath, $apath,$cval[3])."</center></td></tr><tr><td class=cap1>$cval[3]</td></tr></table>".$postfix;
   break;

'공부합시다! > Datas' 카테고리의 다른 글

AppRocket! 응용프로그램에 로켓을 달아보자~ (0)	2006/04/19
잠시만 기다려주세요.! 프리로딩 플러그인. (29)	2006/03/30
[플러그인] 테터툴즈 1.0x 용 트래픽량 출력하기. (15)	2006/03/20
테터툴즈에 lightbox를 적용해보자! (13)	2006/01/25
ASCII Code Table.. (0)	2006/01/09
Study For Windows Hooking (0)	2004/11/08