블로그를 화려한 이미지 갤러리로 만들기
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를 했다. 아울러 키로그 페이지가 동작하지 않아 키로그 페이지의 오류에 대한 글을 올렸다.
어제는 iPod Touch의 펌웨어를 2.0에서 iPhone OS 3.0 Beta 3로 바꿨다주4. 2.2에 불만이 있는 것은 아니지만 여러가지 기능개선이 있다는 3.0을 사용해 보고 싶었기 때문이다. 판올림에도 성공하고 해킹도 성공했다. 다만 설치할 수 있는 프로그램이 너무 없었다. Cydia Installer는 설치는 되지만 실행이 되지 않았다. WinterBoard를 설치하면 시스템이 아예 부팅이 되지 않았다. App Store의 프로그램은 별 문제없이 설치되는 것을 보고 Installous로 설치한 프로그램은 설치가 가능할 것으로 생각하고 방법을 찾다 보니 역시 하루가 훌쩍갔다.
Highslide JS
여기에 놀이감이 하나 더 생겼다. 바로 오늘 소개하는 Highslide JS 이다. 간단히 설명하면 이 프로그램은 현재 블로그에서 자주 사용하는 Lighbox처럼 블로그 페이지에 포함된 그림을 조금 더 깔끔하게 표시해 주는 자바스크립트이다. 예를 위한 그림 파일이 많이 포함되어 있지만 자바스크립트로는 특이하게 압축 파일로 1.8M에 달한다. 자바스크립트 파일의 크기가 크지만 아주 다양한 형태의 이미지 효과주5를 지원한다. 다음은 이 블로그에 적용한 Highslide JS의 예이다.
설치하기
설치하는 방법은 간단하다. 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
ADD WZD | 구글 | 뉴스2.0 | 다음 | 델리셔스 | 마가린 | 북마커 | 야후 | 한RSS | 정보
Trackback
Trackback Address :: http://offree.net/trackback/2477
Comments
매일 구경만 하다가 인사드립니다. ^ ^;
너무 멋진 기능같습니다.
저도 한 번 해보고 싶네요.
예... 파일 크기가 조금 커서 트래픽 부담은 조금되지만 기능은 상당히 멋집니다.
토커의 새로운 버전이 나왔군요. 도아님이 하루 종일 변경사항을 점검할 정도면 정말 많은 부분이 변했나 보네요.. +_+
그리고 아래 소개해 주신 갤러리 기능도 정말 멋집니다. 좋은 정보 감사합니다.. ^_^
기능 추가도 많았고 추가된 기능을 일일이 확인하다 보니 조금 오래 걸리더군요.
너무 멋진 기능이네요~ 설치해볼까 생각중이네요!
오늘 광주는 비가 올것 같네요~ 즐거운 하루 보내세요! :)
빛창은 달아도 아마 괜찮을 것 같더군요...
피카사 이미지 뷰어랑 비슷하네요,,
설치형 블로그는 이런거도 할수 있군요ㅡ,,
부럽...
서비스 형도 가능합니다. 스킨만 편집하면 되니까요.
굉장히 재미있는 뷰어(?)네요.
어차피 트래픽도 안나오는데 시도를 해봐야겠습니다. 좋은정보 감사합니다.
재미도 있지만 지원하는 기능도 다양해서 여러가지 용도로 사용할 수 있더군요. 저는 키워드에도 적용해 두었습니다. AJAX를 이용해서 불러 오도록 했더니 아주 깔끔하더군요.
도아님의 해당 포스트가 4/24일 버즈블로그 메인 헤드라인으로 링크되었습니다.
감사합니다.
우와 멋지다! 라는 말 밖에 안나오네요 ㅎㅎ
나중에 이미지 갤러리 하나 추가 될때 쯤 적용해봐야겠습니다 ^^
예. 이미지 갤러리에 사용하면 정말 좋을 것 같더군요.
역시 트래픽 부담이 -0-;;
저는 그냥 제가 보고 싶은 사진들을 스킨에 나오게 바꿔버렸습니다.
다만;; 플리커를 사용하다보니 이게 무료는 제한이 있네요;; ㅎㅎ
피카사 버전이 나오기만 기다리고 있네요 ㅠ.ㅜ
트래픽이 부담되면 제 계정의 것을 사용해도 됩니다. 그리고 플리커는 유료 계정이 아니면 사용이 힘듭니다. 저도 그래서 유료 계정을 사용하고 있습니다.
야~ 아주 멋진 프로그램이네요!
속도만 따라준다면 아주 괜찮은 프로그램인것 같아요.
피카사하고 비슷한 인터페이스네요!
스크립트라 브라우저의 영향을 맏이 받습니다. 파폭, 크롬에서는 빠르지만 IE에서는 방법이 없는 것 같습니다.
티스토리에서는 위와 같은 자유로운 플러그인 사용을 바라지도 않고 그저 기본적인 썸네일 플러그인만이라도 활성화 해주었으면 좋겠습니다.
소개해주신 갤러리 스크립트는 속도만 빠르다면 정말 탐나는 기능이겠는데요.
이 기능은 티스토리에서도 사용할 수 있습니다. 스크립트 기반이라서요. 그리고 속도 문제는 IE에서는 방법이 없습니다. 크롬이나 파폭에서는 충분한 속도가 나옵니다.
신선한 기능들이 많이 포함되었네요... 소개해 주셔서 고맙습니다
예. 기능도 다양하고 효과 역시 확실하더군요. 다만 상업적으로 사용하려면 구매해야 합니다.
그런데 읽는 시간이 조금 오래 걸리네요. 사진이 용량이 커서인가요?
예. 사진이 워낙 많아서 입니다. 확인해 보니 60장이더군요.
괜찮아 보이는 기능이네요. 티스토리에도 적용이 가능해 보이고.
근데 공부를 좀 해야 겠습니다 >.<
티스토리도 적용 가능합니다.
멋지군요. 하지만 컴터 사양과 회선 속도에 따라 부담스러울 수도 있겠는데요.
컴퓨터 사양 보다는 브라우저에 영향을 더 받는 것 같습니다.
깔끔하니.. 보기 좋습니다.. 그런데.. 적용하기전에.. 공부란걸 좀 해놓고 손대야 겠더군요..
또 날려먹지 않도록 말이죠..^^
HTML이라 적용하는 것도 상당히 간단합니다.
좋은 플러그인 감사합니다.
단 굳이 예제에서 찾을 필요 없이 공식 홈페이지에서 제공하는 에디터에서 만들면 되겠군요.
http://highslide.com/editor/
그리고 스크립트 파일 자제 수정 보다는
hs.lang['nextText'] = '다음'
방식으로 한국어로 바꾸는게 좋지 않을까요?
이 글을 쓸데에는 지원하는 기능이 아니었습니다. 그리고 해보시면 아시겠지만 직접 수정하나 변수를 쓰나 노력에 큰 차이가 있는 것도 아닙니다.
그때는 지원을 안했군요. 홈페이지에서 'New! '라고 떠있으니.
하여간, 물론 파일 수정도 되긴 합니다만.
다만 저 같은 경우는 압축된 파일을 올려서 쓰려고 했기 때문에 파일 수정이 불가능해서 말이죠.