티스토리로 이주한 현재, 제 블로그에는 이 스크립트가 적용되어 있지 않습니다.
이용에 불편을 드려 정말 죄송합니다.
이번에 소개해드리고자 하는 Highslide는 자바스크립트 기반의 강력한 썸네일 뷰어입니다.
자바스크립트 치고는 드물게 예제파일이 첨부되어 있다는 점을 감안하더라도 압축 용량이 상당히 큰 만큼 강력한 기능이 포함되어 있는데요, 이 스크립트의 주요 기능은 다음의 이미지를 클릭해 보시면 쉽게 알 수 있습니다.
△이미지를 클릭해 보세요~
언뜻 보면 텍스트큐브의 플러그인 등으로 많이 사용되고 있는 litebox(텍스트 큐브용 플러그인은 http://www.textcube.org/plugin/658에서 찾아볼 수 있습니다.)와 유사해 보입니다.
그러나 이 highslide는 이미지 뿐만이 아니라 플래시, 심지어는 html 링크까지도 위의 이미지처럼 처리가 가능합니다.
Html 페이지 열기
Http://www.daum.net/
링크를 클릭하시면 페이지로 이동하거나 새 창이 뜨는 것이 아니라, 위의 이미지처럼 현재 페이지에서 위 링크가 팝업으로 열립니다.
설치하기
이 스크립트는 이곳에서 다운받으실 수 있습니다.
다운 받으신 파일의 압축을 풀면 highslide라는 폴더가 있는데요, 가급적이면 이를 그대로 자신의 계정에 업로드합니다.
물론 티스토리나 텍스트큐브닷컴 등의 가입형 블로그에도 적용시킬 수 있긴 합니다만, 각각의 스크립트 파일들을 열어서 이미지 파일의 경로를 모두 변경해 주어야 하는 번거로움이 있기 때문입니다.
파일의 업로드를 마치셨다면, 스킨의 <head></head> 사이에 다음의 스크립트를 자신의 경로에 맞게 수정하여 찔러 넣도록 합니다.
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/highslide/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript">
hs.graphicsDir = '/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105 // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
</script>
여기서 한가지 참고하셔야 할 것은, 이 스크립트는 각각의 효과에 따라 <head></head> 사이에 넣어야 할 코드가 약간씩 달라진다는 것입니다.
만약 효과가 마음에 들지 않으신다면 압축 파일의 예제 파일들을 직접 보시고 그에 맞게 변경해주시면 됩니다.
적용하기
적용 방법은 html태그를 조금이라도 사용해 보신 분이시라면 매우 쉬울겁니다.
첨부한 이미지등을 <a> 태그로 감싼 후, 다음과 같이 <a> 태그에 class='highslide' onclick="return hs.expand(this)"를 붙여주시면 됩니다.
<a href="이미지 경로" class='highslide' onclick="return hs.expand(this)"><img src="이미지 경로"></a>
좀 더 세부적인 정보나 예시를 원하신다면 공식 홈페이지 혹은 도아님의 블로그를 방문해 보시기 바랍니다.
이용에 불편을 드려 정말 죄송합니다.
Highslide?
이번에 소개해드리고자 하는 Highslide는 자바스크립트 기반의 강력한 썸네일 뷰어입니다.
자바스크립트 치고는 드물게 예제파일이 첨부되어 있다는 점을 감안하더라도 압축 용량이 상당히 큰 만큼 강력한 기능이 포함되어 있는데요, 이 스크립트의 주요 기능은 다음의 이미지를 클릭해 보시면 쉽게 알 수 있습니다.
△이미지를 클릭해 보세요~
언뜻 보면 텍스트큐브의 플러그인 등으로 많이 사용되고 있는 litebox(텍스트 큐브용 플러그인은 http://www.textcube.org/plugin/658에서 찾아볼 수 있습니다.)와 유사해 보입니다.
그러나 이 highslide는 이미지 뿐만이 아니라 플래시, 심지어는 html 링크까지도 위의 이미지처럼 처리가 가능합니다.
Html 페이지 열기
Http://www.daum.net/
링크를 클릭하시면 페이지로 이동하거나 새 창이 뜨는 것이 아니라, 위의 이미지처럼 현재 페이지에서 위 링크가 팝업으로 열립니다.
설치하기
이 스크립트는 이곳에서 다운받으실 수 있습니다.다운 받으신 파일의 압축을 풀면 highslide라는 폴더가 있는데요, 가급적이면 이를 그대로 자신의 계정에 업로드합니다.
물론 티스토리나 텍스트큐브닷컴 등의 가입형 블로그에도 적용시킬 수 있긴 합니다만, 각각의 스크립트 파일들을 열어서 이미지 파일의 경로를 모두 변경해 주어야 하는 번거로움이 있기 때문입니다.
파일의 업로드를 마치셨다면, 스킨의 <head></head> 사이에 다음의 스크립트를 자신의 경로에 맞게 수정하여 찔러 넣도록 합니다.
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/highslide/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript">
hs.graphicsDir = '/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105 // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
</script>
여기서 한가지 참고하셔야 할 것은, 이 스크립트는 각각의 효과에 따라 <head></head> 사이에 넣어야 할 코드가 약간씩 달라진다는 것입니다.
만약 효과가 마음에 들지 않으신다면 압축 파일의 예제 파일들을 직접 보시고 그에 맞게 변경해주시면 됩니다.
적용하기
적용 방법은 html태그를 조금이라도 사용해 보신 분이시라면 매우 쉬울겁니다.첨부한 이미지등을 <a> 태그로 감싼 후, 다음과 같이 <a> 태그에 class='highslide' onclick="return hs.expand(this)"를 붙여주시면 됩니다.
<a href="이미지 경로" class='highslide' onclick="return hs.expand(this)"><img src="이미지 경로"></a>
마치며
이 스크립트는 웹서핑 중 도아님께서 소개하신 글을 따라 적용해본 후 포스팅한 것입니다.좀 더 세부적인 정보나 예시를 원하신다면 공식 홈페이지 혹은 도아님의 블로그를 방문해 보시기 바랍니다.
'컴퓨터' 카테고리의 다른 글
| Vista의 ReadyBoost를 XP에서도! eBoostr 3.0 (2) | 2009.11.06 |
|---|---|
| 텍스트큐브 플러그인의 출력 위치 변경하기 (2) | 2009.10.25 |
| Highslide를 위한 img 태그 변환기 (0) | 2009.10.24 |
| 텍스트큐브용 SyntaxHighlighter 플러그인 (2) | 2009.10.23 |
| Torrent - 국외의 최신 자료를 구하기 좋은 p2p (2) | 2009.10.23 |
| [플러그인] 이미지 갤러리 플러그인 (외부 이미지) (0) | 2009.10.22 |
| 원 저작자 분의 요청으로 삭제하였습니다. (9) | 2009.10.19 |
| [플러그인] 트래픽 보기 플러그인 (2) | 2009.10.17 |
| [플러그인] 카테고리의 다른 글 출력 플러그인 (0) | 2009.10.15 |
| [팁] 텍스트큐브 / 티스토리 계열 특정 카테고리 목록 펼치기 (2) | 2009.10.13 |
IE9 이상으로 브라우저를 업그레이드하거나, 크롬, 파이어폭스 등 최신 브라우저를 이용해주세요.