'lightbox'에 해당되는 글 3건

  1. 2006/10/02 HighSlide 2.02 테터에 적용하다~ (5)
  2. 2006/03/20 3가지 플러그인~ (2)
  3. 2006/01/25 테터툴즈에 lightbox를 적용해보자! (13)

HighSlide 2.02 테터에 적용하다~

Posted by 미루 미루 이야기~ : 2006/10/02 16:36

오늘도 미니위니의 간지님 글을 낼름 가져왔습니다.

언젠가 lightbox를 널리 알려주신 간지님!. 이번에 또 다른 멋진걸 널리 알려주시더군요.. +ㅅ+

그래서! 발빠르게 적용해 보았습니다. ~~;;

Canon | Canon EOS Kiss Digital N | Aperture priority | Multi-Segment | 1/80sec | f0 | 0EV | 0mm | ISO-1600 | No Flash | 2006:10:02 16:14:47

클릭해 주세요~


라이트 박스와 비슷한 느낌입니다만은.. 각각 장단점이 있더군요 ;

장점.
  1. 스르륵 커지고 스르륵 줄어드는 애니메이션 효과가 예쁘다!
  2. 이리저리 움직이고 여러 이미지를 띄우고 등등을 할 수 있다. +ㅅ+;
  3. lightbox 와 달리 로딩 중에 눌러도 페이지가 변경되지 않는다.
  4. 스킨을 맘대로 변경하기 쉽다!

단점.

  1. 조금 무거운 것 같다.
  2. 플러그인으로 만들어봤지만.. 적용하는데 해야하는 작업이 너무 많다 -_-;;
  3. 라이트박스처럼 배경이 어두워진다면 더욱 좋을것 같은데 아쉽다. (이미지에 집중하기 어렵다..)
  4. 캡션을 설정하고 보여줌에 있어 테터 플러그인으로 처리하기 어렵다. -_- (highslide문제는아니지만.)

정도 되겠다;;

어쨌든 힘들게 바꿨으니.. 한번 계속 써봐야겠다; -0-;;

아~ 다운받으려면.. http://vikjavev.no/highslide/ 요기루~

사족1.
플러그인 배포는.. 라이센스 문제좀 확인해 보고.. 나중에 배포해야겠음;;

사족2.
전에 쓰다가 잠시 꺼두었던 이미지의 EXIF정보를 보여주는 플러그인을 조금 수정하여(라이센스 확인 안해봤는데;;) 이미지의 캡션으로 뜨도록 해놓았는데.. 이거 꽤 괜찮아 보인다 +ㅅ+;; 굿~

'미루 이야기~' 카테고리의 다른 글

공소시효에 대한 짧은 생각  (1) 2007/02/09
왜자꾸 찾아오는 겁니까..  (2) 2007/01/22
HighSlide 2.02 테터에 적용하다~  (5) 2006/10/02
재밌는 퍼즐놀이~  (3) 2006/09/29
피곤한 일상...  (0) 2006/09/27
Happy BirthDay To Me  (8) 2006/09/22
태그 : highslide, lightbox, plugin, tattertools
TRACKBACK 0   COMMENT 5

3가지 플러그인~

Posted by 미루 미루 이야기~ : 2006/03/20 10:58
오웅~ 3가지 플러그인을 설치해봤다..

업무시간이지만;; 그냥 업무 전에 뭔가 살짝 딴짓을 하고 싶어서 시작했는데..

테터 1.0 좋구나~ :D

먼저 첫번째 플러그인!
- lightBox plus

이건 뭐 이전에도 이미 한번 클래식에 설치를 해봤었던 것인데..
[ http://qnpfr.com/entry/테터툴즈에-lightbox를-적용해보자 ]

치리님이 잘 정리해 주셨다.
[ http://www.tattertools.com/bbs/view.php?id=plugin&no=15 ]

사진을 멋지게 보여주는 쿨~ 한 플러그인! -0-;

두번째 플러그인~
- 사진 메타(Exif) 정보 표시 2.0

이것도 사진을 많이 올리는 사람한텐 꽤 편하고 멋진 플러그인이 될 것 같다.

이제부터라도 사진을 좀 더 많이 찍고 싶은 그런 플러그인?~

J. Parker 님께서 만들어 주셨다~ 좋아~
[ http://www.tattertools.com/bbs/view.php?id=plugin&page=2&no=14 ]

조금 아쉬운것은.... 원하는 사진에만 넣거나 하는 기능이 없다는것!..

이것때문에 레이아웃이 조금 깨지긴 한다~ :'(

세번째 플러그인~
- LaTeX renderer 0.2.1

바로 수식입력한 것을 그림으로 보여주는 멋진 플러그인이다~

예를들어 sqrt(2) 라고 입력하면..

[tex]sqrt(2)[/tex] 요렇게 멋진 수식으로 보여준다!.. 멋지지않은가?..

그런데; 쓸일이 있을런가 몰라~

'미루 이야기~' 카테고리의 다른 글

도메인 하나 살까나..  (0) 2006/04/02
올블로그에 가입해브렀다!!  (2) 2006/03/20
3가지 플러그인~  (2) 2006/03/20
업그레이드!! 두둥..  (1) 2006/03/18
살아났다!  (0) 2006/03/08
문제 해결 법.  (4) 2006/02/23
태그 : exif, LaTeX, lightbox, 테터툴즈, 플러그인
TRACKBACK 0   COMMENT 2

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

Posted by 미루 공부합시다!/Datas : 2006/01/25 12:53
간지님이 알려주신 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)

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="lightbox.css">
<script type="text/javascript" src="lightbox_plus.js"></script>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="index.xml">



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("&quot;", "", $cval2), "width=$width") !== false
                    && strpos(str_replace("&quot;", "", $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;

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

  function set_file($type, $cval1, $cval2, $spath, $rpath, $apath,$cval3="") {
       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("&quot;", "", $cval2), "width=$width") !== false && strpos(str_replace("&quot;", "", $cval2), "height=$height") !== false) return "<img src=\"$spath$apath$cval1\" $cval2 alt=\"\">";
            else return "<a href=$spath$apath$cval1 $cval2 rel=\"lightbox\"><img src=$spath$apath$cval1 $cval2 style=cursor:pointer title=\"$cval3\"></a>";
               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
태그 : lightbox
TRACKBACK 6   COMMENT 13
 «이전 1  다음»