Lightbox 2 효과 속도 조절, 단축키 추가


이미지를 보기 좋게 표현해주는 Lightbox 2를 사용함에 있어서 effect의 속도를 조금 빠르게 하는 방법과 이미지 그룹기능에서 키보드 단축키를 추가하는 방법을 소개하겠습니다.

효과 속도 조절

lightbox.js(lightbox.js.php)파일을 텍스트 에디터나 메모장으로 열어서 윗부분쯤에 있는

에서 7 값을 10이하의 숫자로 바꿔주시면 됩니다. (제 경험으로는 9 가 적당하더군요)

파일을 저장하고 다시 업로드해서 덮어씌우면 끝입니다. 간단하죠? ;)

업로드 한 뒤 바로 적용되지 않는것은 브라우저에 캐쉬된 파일때문입니다. 이 경우 페이지를 새로고침하거나 브라우저의 캐쉬를 비우면 됩니다.

키보드 단축키 추가

lightbox 2에있는 이미지그룹 기능을 사용할때의 키보드 단축키인 "x", "n", "p" 키는 키보드 입력이 영어로 되어있을때만 작동합니다. 이것을 한/영과 상관없는 키들로 사용하는 방법을 소개합니다.

lightbox.js(lightbox.js.php)파일에서 (key == 'p') 또는 (key=='p') 로 검색해 보세요. 그 근처의 코드가 키 값을 설정하는 부분입니다.

Previous 키
  • 찾은 곳의 내용은 아래와 같을겁니다.

    이 부분을 아래와 같이 바꾸면 왼쪽 화살표로 이전 그림을 볼 수 있습니다.

Close 키
  • 찾은곳의 바로 윗부분을 보면 아래와 같은 내용이 있습니다.

    이 부분을 아래와 같이 바꾸게 되면 "End", "Esc"키로도 현재 화면을 닫을 수 있습니다.

Next 키
  • 찾은 곳의 바로 아래에 보면 아래와 같은 내용이 있습니다.
    else if(key == 'n')
    이곳을 아래와 같이 바꿔주면 오른쪽 화살표로 다음 그림을 볼 수 있습니다.

윈도우 환경에서만 작동 테스트했습니다. 매킨토시나 리눅스 등에서 작동할지는 모르겠네요 ^^;


3 responses to “Lightbox 2 효과 속도 조절, 단축키 추가”