요즘 블로그에 기본적으로 장착되는 기능이죠.
작게 축소된 이미지를 클릭하면 큰 사이즈의 원본이미지가 나오는...
예전에는 이를 팝업창으로 구현을 했지만 요즘에는 자바스크립트나 플래시를 이용해서 구현을 많이합니다.
갤러리 소스라고도 하는데요, 이런 효과를 내는 소스들이 많습니만 가장 쉽게 설치할 수 있는 소스 중에
Lightbox JS
를 추천합니다.
화면도 깔끔하고, 무엇보다 초보자도 쉽게 자신의 홈페이지에 설치해서 사용할 수 있다는 장점이 있습니다.
아래그림 처럼 사용방법이 달랑 2줄로 끝납니다.
물론 위의 2줄의 소스만 넣으면 나오는건 아니고,
링크한 홈페이지에서 5개의 파일을 받아야 합니다.
밑에 3개 파일은 이미지 파일이니까 크게 신경쓸거 없구요, js파일과 css파일을 저장해서 경로만 잘 지정해 주면 됩니다. 경로에 대해서 이해가 잘 안가시는 분들은
http://www.homejjang.com/03/img_path.php
이 페이지를 참고하시면 됩니다. 이미지 경로를 설명하고 있는 페이지인데, 이미지든 js, css 파일이든 원리는 똑같습니다. 경로를 어떻게 지정해 주느냐에 대한 이해만 한다면 위와 같은 공개소스를 이용하여 충분히 홈페이지를 화려하게 꾸밀 수 있습니다.
작게 축소된 이미지를 클릭하면 큰 사이즈의 원본이미지가 나오는...
예전에는 이를 팝업창으로 구현을 했지만 요즘에는 자바스크립트나 플래시를 이용해서 구현을 많이합니다.
갤러리 소스라고도 하는데요, 이런 효과를 내는 소스들이 많습니만 가장 쉽게 설치할 수 있는 소스 중에
Lightbox JS
를 추천합니다.
화면도 깔끔하고, 무엇보다 초보자도 쉽게 자신의 홈페이지에 설치해서 사용할 수 있다는 장점이 있습니다.
아래그림 처럼 사용방법이 달랑 2줄로 끝납니다.
물론 위의 2줄의 소스만 넣으면 나오는건 아니고,
링크한 홈페이지에서 5개의 파일을 받아야 합니다.
lightbox.js - the important stuff
lightbox.css - basic style and tricky PNG support
overlay.png - 80% opacity, black tile used to create shadow
loading.gif - mock status bar used in examples above
close.gif - 'X' graphic placed in top-right corner
밑에 3개 파일은 이미지 파일이니까 크게 신경쓸거 없구요, js파일과 css파일을 저장해서 경로만 잘 지정해 주면 됩니다. 경로에 대해서 이해가 잘 안가시는 분들은
http://www.homejjang.com/03/img_path.php
이 페이지를 참고하시면 됩니다. 이미지 경로를 설명하고 있는 페이지인데, 이미지든 js, css 파일이든 원리는 똑같습니다. 경로를 어떻게 지정해 주느냐에 대한 이해만 한다면 위와 같은 공개소스를 이용하여 충분히 홈페이지를 화려하게 꾸밀 수 있습니다.
