어제는 글을 올리지 못했다. 하루에 최소한 두개의 글은 올리는데 어제는 하나의 글도 올리지 못했다. 어제 글을 올리지 못한 이유는 상당히 간단하다. 글 보다 가지고 놀 것이 많아졌기 때문이다. 먼저 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 홈페이지를 참조하기 바란다. 
2009/04/24 07:18 2009/04/24 07:18
글쓴이
author image
운영체제의 모든 것을 운영하고 있는 IT 블로거. IT 블로거라는 이름은 현재 시국때문에 시사 블로거로 바뀐 상태다. 그러나 나는 아직도 시사와 사회에 관심이 많은 IT 블로거일 뿐이다. 컴퓨터, 운영체제, 시사, 가족, 여행, 맛집, 리뷰등과 살면서 느끼는 소소한 일상이 블로그의 주제이다. 왼쪽의 아이콘은 둘째 딸 다예가 그린 내 모습이다.
오늘의 글
인기있는 글
조회수 많은 글 | 베오베
댓글 많은 글 | 베오베

Trackback

Trackback Address :: https://offree.net/trackback/2477

Facebook

Comments

  1. 도둑 2009/04/24 08:24

    매일 구경만 하다가 인사드립니다. ^ ^;

    너무 멋진 기능같습니다.
    저도 한 번 해보고 싶네요.

    perm. |  mod/del. reply.
    • 도아 2009/04/24 09:19

      예... 파일 크기가 조금 커서 트래픽 부담은 조금되지만 기능은 상당히 멋집니다.

  2. 웹초보 2009/04/24 08:37

    토커의 새로운 버전이 나왔군요. 도아님이 하루 종일 변경사항을 점검할 정도면 정말 많은 부분이 변했나 보네요.. +_+
    그리고 아래 소개해 주신 갤러리 기능도 정말 멋집니다. 좋은 정보 감사합니다.. ^_^

    perm. |  mod/del. reply.
    • 도아 2009/04/24 09:19

      기능 추가도 많았고 추가된 기능을 일일이 확인하다 보니 조금 오래 걸리더군요.

  3. 빛이드는창 2009/04/24 08:44

    너무 멋진 기능이네요~ 설치해볼까 생각중이네요!
    오늘 광주는 비가 올것 같네요~ 즐거운 하루 보내세요! :)

    perm. |  mod/del. reply.
    • 도아 2009/04/24 09:19

      빛창은 달아도 아마 괜찮을 것 같더군요...

  4. 짱양 2009/04/24 09:08

    피카사 이미지 뷰어랑 비슷하네요,,
    설치형 블로그는 이런거도 할수 있군요ㅡ,,
    부럽...

    perm. |  mod/del. reply.
    • 도아 2009/04/24 09:20

      서비스 형도 가능합니다. 스킨만 편집하면 되니까요.

  5. Zasfe 2009/04/24 09:35

    굉장히 재미있는 뷰어(?)네요.
    어차피 트래픽도 안나오는데 시도를 해봐야겠습니다. 좋은정보 감사합니다.

    perm. |  mod/del. reply.
    • 도아 2009/04/25 06:37

      재미도 있지만 지원하는 기능도 다양해서 여러가지 용도로 사용할 수 있더군요. 저는 키워드에도 적용해 두었습니다. AJAX를 이용해서 불러 오도록 했더니 아주 깔끔하더군요.

  6. buzz 2009/04/24 09:42

    도아님의 해당 포스트가 4/24일 버즈블로그 메인 헤드라인으로 링크되었습니다.

    perm. |  mod/del. reply.
  7. 구차니 2009/04/24 09:45

    우와 멋지다! 라는 말 밖에 안나오네요 ㅎㅎ
    나중에 이미지 갤러리 하나 추가 될때 쯤 적용해봐야겠습니다 ^^

    perm. |  mod/del. reply.
    • 도아 2009/04/25 06:38

      예. 이미지 갤러리에 사용하면 정말 좋을 것 같더군요.

  8. 최면 2009/04/24 10:08

    역시 트래픽 부담이 -0-;;
    저는 그냥 제가 보고 싶은 사진들을 스킨에 나오게 바꿔버렸습니다.
    다만;; 플리커를 사용하다보니 이게 무료는 제한이 있네요;; ㅎㅎ
    피카사 버전이 나오기만 기다리고 있네요 ㅠ.ㅜ

    perm. |  mod/del. reply.
    • 도아 2009/04/25 06:39

      트래픽이 부담되면 제 계정의 것을 사용해도 됩니다. 그리고 플리커는 유료 계정이 아니면 사용이 힘듭니다. 저도 그래서 유료 계정을 사용하고 있습니다.

  9. Kay~ 2009/04/24 11:30

    야~ 아주 멋진 프로그램이네요!
    속도만 따라준다면 아주 괜찮은 프로그램인것 같아요.
    피카사하고 비슷한 인터페이스네요!

    perm. |  mod/del. reply.
    • 도아 2009/04/25 06:39

      스크립트라 브라우저의 영향을 맏이 받습니다. 파폭, 크롬에서는 빠르지만 IE에서는 방법이 없는 것 같습니다.

  10. 누피 2009/04/24 13:16

    티스토리에서는 위와 같은 자유로운 플러그인 사용을 바라지도 않고 그저 기본적인 썸네일 플러그인만이라도 활성화 해주었으면 좋겠습니다.
    소개해주신 갤러리 스크립트는 속도만 빠르다면 정말 탐나는 기능이겠는데요.

    perm. |  mod/del. reply.
    • 도아 2009/04/25 06:40

      이 기능은 티스토리에서도 사용할 수 있습니다. 스크립트 기반이라서요. 그리고 속도 문제는 IE에서는 방법이 없습니다. 크롬이나 파폭에서는 충분한 속도가 나옵니다.

  11. 아크몬드 2009/04/24 13:31

    신선한 기능들이 많이 포함되었네요... 소개해 주셔서 고맙습니다

    perm. |  mod/del. reply.
    • 도아 2009/04/25 06:41

      예. 기능도 다양하고 효과 역시 확실하더군요. 다만 상업적으로 사용하려면 구매해야 합니다.

  12. 'ㅎㄸ' 공상플러스[429재보선] 2009/04/24 16:19

    그런데 읽는 시간이 조금 오래 걸리네요. 사진이 용량이 커서인가요?

    perm. |  mod/del. reply.
    • 도아 2009/04/25 06:41

      예. 사진이 워낙 많아서 입니다. 확인해 보니 60장이더군요.

  13. 돌이아빠 2009/04/24 16:48

    괜찮아 보이는 기능이네요. 티스토리에도 적용이 가능해 보이고.
    근데 공부를 좀 해야 겠습니다 >.<

    perm. |  mod/del. reply.
  14. 의리 2009/04/24 17:40

    멋지군요. 하지만 컴터 사양과 회선 속도에 따라 부담스러울 수도 있겠는데요.

    perm. |  mod/del. reply.
    • 도아 2009/04/25 06:42

      컴퓨터 사양 보다는 브라우저에 영향을 더 받는 것 같습니다.

  15. Prime's 2009/04/25 10:42

    깔끔하니.. 보기 좋습니다.. 그런데.. 적용하기전에.. 공부란걸 좀 해놓고 손대야 겠더군요..
    또 날려먹지 않도록 말이죠..^^

    perm. |  mod/del. reply.
    • 도아 2009/04/26 05:07

      HTML이라 적용하는 것도 상당히 간단합니다.

  16. 삼각형 2009/10/10 15:49

    좋은 플러그인 감사합니다.
    단 굳이 예제에서 찾을 필요 없이 공식 홈페이지에서 제공하는 에디터에서 만들면 되겠군요.
    http://highslide.com/editor/
    그리고 스크립트 파일 자제 수정 보다는
    hs.lang['nextText'] = '다음'
    방식으로 한국어로 바꾸는게 좋지 않을까요?

    perm. |  mod/del. reply.
    • 도아 2009/10/12 08:03

      이 글을 쓸데에는 지원하는 기능이 아니었습니다. 그리고 해보시면 아시겠지만 직접 수정하나 변수를 쓰나 노력에 큰 차이가 있는 것도 아닙니다.

    • 삼각형 2009/10/17 15:08

      그때는 지원을 안했군요. 홈페이지에서 'New! '라고 떠있으니.

      하여간, 물론 파일 수정도 되긴 합니다만.
      다만 저 같은 경우는 압축된 파일을 올려서 쓰려고 했기 때문에 파일 수정이 불가능해서 말이죠.

  17. 엔투 2010/05/21 01:26

    도아님 설명보고 구글 블로거에 적용해봤습니다.^^ 감사합니다. 스크립트 파일은 구글사이트에 업로드했는데 self-host 보다는 속도가 좀 더딘거 같아요. 트랙백을 보내고 싶었지만 구글블로거에서는 트랙백 기능이 없어서 댓글 남깁니다. 편안한 밤 되세요.

    perm. |  mod/del. reply.
    • 도아 2010/05/22 09:17

      예. 속도는 조금 느린 듯하더군요. 그런데 효과가 너무 확실해서 버리긴 힘들더군요.

  18. 지멘 2012/05/13 00:00

    아 슬프네요.. 참 좋은 스크립트인데 IE 때문에 못 쓰는군요 ㅠㅠ
    만드는 블로그 보실 분들이 IE밖에 모르시니...
    혹시 IE에서도 비슷하게 갤러리 구현 가능한 시스템 없을까요..

    perm. |  mod/del. reply.
  19. 크리슈날 2015/04/01 16:30

    onclick="return hs.expand(this)
    기능이 어떤 작용을 하는지는 알고 있었으나
    제대로된 코드로 정리좀 하고싶었는데 정말 많은 도움이 되었습니다.
    매우매우 감사합니다.

    perm. |  mod/del. reply.

댓글로 기쁨을 나눠요!

(옵션: 없으면 생략)

글을 올릴 때 [b], [i], [url], [img]와 같은 BBCode를 사용할 수 있습니다.