웹디자이너 일을 하는 10몇년 지기로부터 간단한 자바스크립트를 개발을 부탁받았습니다.
기능요구사항들이 쉬운편이어서 개발요청을 받아들여,
오랜만에 자바스크립트 코딩을 했습니다.
다음에 소주한잔 얻어먹으면 됩니다~ <<=== 날짜 잡으시오~~ 손 사장~~~~
아래의 소스 샘플은 매우 복잡한 기능을 구현한 내용은 아니지만,
이런 정도의 소스들도 개발하려면 자잘한 시간이 필요하니,
아래 샘플을 복사해다가 유용하게 사용하시면 되겠습니다~~
※ 아래의 샘플 소스는
저의 허락없이 마음껏 무한배포, 자유 공유 및 수정편집을 해도 됩니다~~
1. 기능 정의
(1) 아래쪽에 작은 섬네일 이미지를 클릭하면, 상단에 큰 이미지가 보여진다.
(2) 큰 이미지 좌우로 이전과 다음 이미지 보기 아이콘이 있어서,
섬네일 표시 순서에 따라 큰 이미지가 보여진다.
(3) 일정 시간차를 두고 전체 이미지 목록을 슬라이드 보기가 된다.
(4) 슬라이드 실행과 종료 아이콘이 상황에 따라 변경되어 보여진다.
2. 소스 및 샘플 이미지
- 샘플 소스명 : show_image.html
- 이미지 경로 디렉토리 : ./img/
- 샘플 소스 및 이미지 다운로드 : 
이미지 갤러리 보기를 위한 자바스크립트.zip
3. 무한공유 소스
|
<html>
<title>황사마(urajilation@gmailcom)의 이미지 갤러리 스크립트</title>
<!--
********************************************************************************
- 제 목 : 황사마(urajilation@gmailcom)의 이미지 갤러리 스크립트
- 작성일 : 2013년 4월 11일
- 저작권 : 이 샘플 소스 및 스크립트는 자유롭게 사용 및 수정, 배포하여도 됩니다.
- 기능 정의
(1) 아래쪽에 작은 섬네일 이미지를 클릭하면, 상단에 큰 이미지가 보여진다.
(2) 큰 이미지 좌우로 이전과 다음 이미지 보기 아이콘이 있어서,
섬네일 표시 순서에 따라 큰 이미지가 보여진다.
(3) 일정 시간차를 두고 전체 이미지 목록을 슬라이드 보기가 된다.
(4) 슬라이드 실행과 종료 아이콘이 상황에 따라 변경되어 보여진다.
********************************************************************************
-->
<script language="javascript">
/************************************************************
페이지가 오픈될 때 디폴트로 보여줄 이미지를 초기화시킨다.
*/
function initiate_img()
{
// 작은 이미지의 총 갯수 초기화
document.getElementById('count_img_no').value = 5;
current_img_no = 1;
set_img(current_img_no);
}
/************************************************************
작은 이미지를 클릭했을 때 관련된 큰 이미지를 보여준다.
*/
function show_big_img(current_img_no)
{
// 슬라이드 보기 진행중인 경우 슬라이드보기를 중지시킨다.
if (document.getElementById('slide_show_yn').value == "Y")
{
document.getElementById('slide_show_yn').value = "N";
document.getElementById('slide_icon').src = "./img/start.JPG";
clearInterval(slideObj);
}
set_img(current_img_no);
}
/************************************************************
다음 이미지 보기 버튼을 클릭할 때
*/
function next_img()
{
count_img_no = document.getElementById('count_img_no').value;
// 현재 이미지가 마지막 이미지이면, 첫번째 이미지를 불러온다.
if (document.getElementById('current_img_no').value == count_img_no)
{
current_img_no = 1;
} else {
current_img_no = eval(document.getElementById('current_img_no').value) + 1;
}
set_img(current_img_no);
}
/************************************************************
이전 이미지 보기 버튼을 클릭할 때
*/
function previous_img()
{
count_img_no = document.getElementById('count_img_no').value;
// 현재 이미지가 첫번째 이미지이면, 마지막 이미지를 불러온다.
if (document.getElementById('current_img_no').value == 1)
{
current_img_no = count_img_no;
} else {
current_img_no = eval(document.getElementById('current_img_no').value) - 1;
}
set_img(current_img_no);
}
/************************************************************
슬라이드 보기/종료 Icon을 Toggle 시킨다.
*/
var slideObj; // 시간지연 처리
function slide_event()
{
if (document.getElementById('slide_show_yn').value == "N")
{
document.getElementById('slide_show_yn').value = "Y";
document.getElementById('slide_icon').src = "./img/stop.JPG";
slide_second = eval(document.getElementById('slide_second').value);
slideObj = setInterval("next_img()", slide_second * 1000);
} else {
document.getElementById('slide_show_yn').value = "N";
document.getElementById('slide_icon').src = "./img/start.JPG";
clearInterval(slideObj);
}
}
/************************************************************
이미지 정보를 셋팅한다.
*/
function set_img(current_img_no)
{
// 작은 이미지의 총 갯수 초기화
document.getElementById('current_img_no').value = current_img_no;
document.getElementById('b_img').src = "./img/" + "b_" + current_img_no + ".JPG";
}
</script>
<body onload="initiate_img()">
<center>
<form name="gallery">
<input name="count_img_no" value="" type="hidden">
<input name="current_img_no" value="" type="hidden">
<input name="slide_show_yn" value="N" type="hidden">
<table width="80%">
<tr>
<td colspan="4" align="center">(슬라이드 실행간격 : <input name="slide_second" value="3"> 초)<br>
<img onClick="javascript:previous_img()"src="./img/previous.jpg">
<img id="slide_icon" onClick="javascript:slide_event()" src="./img/start.jpg">
<img onClick="javascript:next_img()" src="./img/next.jpg">
</td>
</tr>
<tr>
<td colspan="4" align="center"><img id="b_img" src=""></td>
</tr>
<tr>
<td><img id="s_1" onClick="javascript:show_big_img(1)" src="./img/s_1.jpg"> </td>
<td><img id="s_2" onClick="javascript:show_big_img(2)" src="./img/s_2.jpg"> </td>
<td><img id="s_3" onClick="javascript:show_big_img(3)" src="./img/s_3.jpg"> </td>
<td><img id="s_4" onClick="javascript:show_big_img(4)" src="./img/s_4.jpg"> </td>
</tr>
<tr>
<td><img id="s_5" onClick="javascript:show_big_img(5)" value="5" src="./img/s_5.jpg"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</center>
</body>
</html>
|
