블로그를 화려한 이미지 갤러리로 만들기 by 도아

2009-04-24 07:43 :: 컴퓨터
https://offree.net/entry/Highslide-JS

판올림

어제는 iPod Touch의 펌웨어를 2.0에서 'iOS 3.0 Beta 3'로 바꿨다 2.2에 불만이 있는 것은 아니지만 여러가지 기능개선이 있다는 3.0을 사용해 보고 싶었기 때문이다. 판올림에도 성공하고 해킹도 성공했다. 다만 설치할 수 있는 프로그램이 너무 없었다. Cydia Installer는 설치는 되지만 실행이 되지 않았다. WinterBoard를 설치하면 시스템이 아예 부팅이 되지 않았다. App Store의 프로그램은 별 문제없이 설치되는 것을 보고 Installous로 설치한 프로그램은 설치가 가능할 것으로 생각하고 방법을 찾다 보니 역시 하루가 훌쩍갔다.

들어가는 말

어제는 글을 올리지 못했다. 하루에 최소한 두개의 글은 올리는데 어제는 하나의 글도 올리지 못했다. 어제 글을 올리지 못한 이유는 상당히 간단하다. 글 보다 가지고 놀 것이 많아졌기 때문이다. 먼저 Total Commander 7.5 공개 베타가 나왔다. 내가 가장 좋아하는 파일 관리자이고 근 10년 넘게 계속 사용하고 있는 프로그램이다.

7.04에서 7.5로 판올림됐다. 판번호에서 알 수 있듯이 상당히 많은 개선이 있었다. 완벽한 유니코드 지원, 버튼 막대에서 하위 메뉴 지원, FTP 관리자에서 마스터 암호 지원 등 개선된 부분이 상당히 많았다[1]. 따라서 Total Commander의 개선된 기능을 살펴보고 History.txt 파일을 살펴 보는데 하루를 꼬박 보냈다.

여기에 텍스트큐브의 판올림도 있었다. 1.7.7에서 1.7.8로 판올림됐다. 1.7.7과 1.7.8의 차이는 크지 않지만 'Internet Explorer'의 '웹 슬라이스 기능 지원'[2]과 브라우저 호환성이 증가했기 때문에 갈아 탔다. 보통 판올림을 하면 를 하기 때문에 1.7.8도 총 13가지의 패치[3]를 했다. 아울러 키로그 페이지가 동작하지 않아 키로그 페이지의 오류에 대한 글을 올렸다.

어제는 의 펌웨어를 2.0에서 'iOS 3.0 Beta 3'로 바꿨다[4]. 2.2에 불만이 있는 것은 아니지만 여러가지 기능개선이 있다는 3.0을 사용해 보고 싶었기 때문이다. 판올림에도 성공하고 해킹도 성공했다. 다만 설치할 수 있는 프로그램이 너무 없었다. 는 설치는 되지만 실행이 되지 않았다. 를 설치하면 시스템이 아예 부팅이 되지 않았다. 의 프로그램은 별 문제없이 설치되는 것을 보고 로 설치한 프로그램은 설치가 가능할 것으로 생각하고 방법을 찾다 보니 역시 하루가 훌쩍갔다.

Highslide JS

여기에 놀이감이 하나 더 생겼다. 바로 오늘 소개하는 Highslide JS이다. 간단히 설명하면 이 프로그램은 현재 블로그에서 자주 사용하는 Lightbox처럼 블로그 페이지에 포함된 그림을 조금 더 깔끔하게 표시해 주는 자바스크립트이다. 예를 위한 그림 파일이 많이 포함되어 있지만 자바스크립트로는 특이하게 '압축 파일로 1.8M'에 달한다. 자바스크립트 파일의 크기가 크지만 아주 다양한 형태의 이미지 효과[5]를 지원한다. 다음은 이 블로그에 적용한 'Highslide JS'의 예이다.

동영상 삭제 알림

그것이 알고 싶다에 출연한 뒤 제 출연분을 유튜브에 올렸습니다. 그런데 이 동영상을 SBSi에서 저작권 위반으로 신고, 유튜브 계정이 잘렸습니다. 이 탓에 유튜브에 올린 동영상 강좌 대부분이 사라졌습니다. 복구 가능한 동영상은 페이스북을 통해 복원하고 있습니다. 이 부분에 대한 자세한 이야기는 드라마 백동수에 대한 글의 남은 이야기를 보기 바랍니다.

설치하기

설치하는 방법은 간단하다. highslide-4.1.4.zip을 내려받아 압축을 푼 뒤 폴더 구조 그대로 서버에 올린다. 그리고 스킨에 스크립트 코드를 추가하면 된다. 이 블로그에 적용된 'Gallery Horizontal Strip'을 기준으로 설명하겠다. 일단 블로그 스킨의 <HEAD> 태그와 </HEAD> 사이에 다음과 같은 스크립트를 삽입한다. 가급적 </HEAD> 태그 바로 위에 스크립트 코드를 삽입하는 것이 좋다. 한가지 주의할 것은 사용하는 효과에 따라 스크립트가 바뀐다. 따라서 다른 효과를 사용할 사람은 examples 폴더의 예제 파일에서 적당한 코드를 찾아야 한다.

<script type="text/javascript" src="/highslide/highslide-full.js"></script>
<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> 사이에 스크립트를 삽입했으면 본문에 그림을 삽입할 때 <A> 태그에다음 코드처럼 'class='highslide' onclick="return hs.expand(this)"' 속성을 추가하면 된다.

<a class='highslide' href='../images/thumbstrip01.jpg' onclick="return hs.expand(this)">
        <img src='../images/thumbstrip01.thumb.png' alt='Mountain valley'/></a>

다음은 Windows 7의 국가별 월페이퍼 모음에서 사용한 각국의 벽지를 갤러리로 만든 것이다. 자세한 효과는 클릭한 뒤 확인해 보기 바란다.

호주

카나다

영국

한국

미국

남아프리카

영어를 한글로 바꾸려면 'highslide-full.js'의 '// Language strings' 부분을 다음처럼 바꾸면 된다.

var hs = {
// Language strings
lang : {
    cssDirection: 'ltr',
    loadingText : '읽는 중입니다...',
    loadingTitle : '취소하려면 클릭하세요',
    focusTitle : '크게 보려면 클릭하세요',
    fullExpandTitle : '실제 크기로 확대합니다 (f)',
    creditsText : '<i>Highslide JS</i>',
    creditsTitle : 'Highslide JS 홈페이지로 가기',
    previousText : '이전',
    nextText : '다음', 
    moveText : '이동',
    closeText : '닫기', 
    closeTitle : '닫기 (esc)', 
    resizeTitle : '크기 조절',
    playText : '재생',
    playTitle : '슬라이드쇼 (사이띄개)',
    pauseText : '중지',
    pauseTitle : '슬라이드쇼 중지 (사이띄개)',
    previousTitle : '이전 (왼쪽 화살표)',
    nextTitle : '다음 (오른쪽 화살표)',
    moveTitle : '이동',
    fullExpandText : '1:1',
    number: '%2개의 이미지 중 %1번째',
    restoreTitle : '이미지를 닫으려면 클릭, 이동하려면 클릭하고 끌기. 이전, 다음 그림은 화살표.'
},

Highslide JS의 지원 형식

  • Highslide JS 핵심

  • 갤러리

  • HTML

관련 글타래

  1. 개선에 대한 더 자세한 부분은 TC 7.5의 새로운 기능 1. 추가된 기능을 참조하기 바란다. ↩
  2. 'Internet Explorer 8'을 사용해서 댓글 목록을 가져가면 슬라이스 단추가 나타난다. 댓글 슬라이스를 즐겨찾기로 등록하면 댓글이 달리는 것을 감시할 수 있다. ↩
  3. 패치 내역은 다른 판올림과 마찬가지로 따로 글을 올릴 생각이다. ↩
  4. 판올림하는 방법과 해킹하는 방법은 오늘 중 올릴 생각이다. ↩
  5. 자세한 효과는 Highslide JS 홈페이지를 참조하기 바란다. ↩
TAG App Store, Cydia Installer, Gallery Horizontal Strip, Highslide JS, Installous, Internet Explorer, iOS, iPhone OS, iPod Touch, Total Commander, Windows 7, WinterBoard, 웹 슬라이스, 텍스트큐브