Posted in " 컴퓨터 " , 2009/10/23 10:25

Highslide?


이번에 소개해드리고자 하는 Highslide는 자바스크립트 기반의 강력한 썸네일 뷰어입니다.

자바스크립트 치고는 드물게 예제파일이 첨부되어 있다는 점을 감안하더라도 압축 용량이 상당히 큰 만큼 강력한 기능이 포함되어 있는데요, 이 스크립트의 주요 기능은 다음의 이미지를 클릭해 보시면 쉽게 알 수 있습니다.



△이미지를 클릭해 보세요~


언뜻 보면 텍스트큐브의 플러그인 등으로 많이 사용되고 있는 litebox주1와 유사해 보입니다.

그러나 이 highslide는 이미지 뿐만이 아니라 플래시, 심지어는 html 링크까지도 위의 이미지처럼 처리가 가능합니다.

Html 페이지 열기
Http://www.daum.net/(Ajax를 이용해 보기)

링크를 클릭하시면 페이지로 이동하거나 새 창이 뜨는 것이 아니라, 위의 이미지처럼 현재 페이지에서 위 링크가 팝업으로 열립니다.


설치하기

이 스크립트는 이곳(Ajax를 이용해 보기)에서 다운받으실 수 있습니다.

다운 받으신 파일의 압축을 풀면 highslide라는 폴더가 있는데요, 가급적이면 이를 그대로 자신의 계정에 업로드합니다.

물론 티스토리나 텍스트큐브닷컴 등의 가입형 블로그에도 적용시킬 수 있긴 합니다만, 각각의 스크립트 파일들을 열어서 이미지 파일의 경로를 모두 변경해 주어야 하는 번거로움이 있기 때문입니다.주2

파일의 업로드를 마치셨다면, 스킨의 <head></head> 사이에 다음의 스크립트를 자신의 경로에 맞게 수정주3하여 찔러 넣도록 합니다.

<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>



마치며

이 스크립트는 웹서핑 중 도아(Ajax를 이용해 보기)님께서 소개하신 글(Ajax를 이용해 보기)을 따라 적용해본 후 포스팅한 것입니다.

좀 더 세부적인 정보나 예시를 원하신다면 공식 홈페이지(Ajax를 이용해 보기) 혹은 도아(Ajax를 이용해 보기)님의 블로그를 방문해 보시기 바랍니다.
  1. 텍스트 큐브용 플러그인은 http://www.textcube.org/plugin/658에서 찾아볼 수 있습니다.
  2. 현재 저는 텍스트큐브 닷컴 블로그의 포스트에 파일들을 첨부하여 사용하고 있는데요... 코드의 수정 등이 다소 번거롭습니다.
  3. 1, 2, 4 번째 라인과 8번째 라인만 수정하시면 됩니다.
TAG Highslide, 자바스크립트
Trackback, Comment.

Trackback

Trackback Address :: http://shar.kr/trackback/319

ResponseRSS Feed

Comments

What's on your mind?

댓글 입력 폼

prev
next
1 ... 133134135136137138139140141 ... 229