웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
레이어를 이용한 초간단 갤러리를 만들어봅시다.
2003.02.15 00:27
예제 보기 : http://morami.net/test_show_img/index.html
이번에는 레이어를 이용해서 간단한 이미지 갤러리를 만들어 보겠습니다.
더 이쁘게 꾸미시는건 여러분께 맡기겠습니다.
저는 원리만 간단하게요..^^
뭐 별거 아닙니다. 저는 초보 분들을 위해서 간단히 레이어에 쓰임에 대해서 말씀드릴려고 하는거니깐요.
고수분께서는 지나치시면 됩니다. 흠흠
그럼 시작할께요.
보통 이미지를 갤러리를 만들때 팝업을 뛰어거나 해서 하는 경우가 대부분이지요.
여기서는 자바스크립트로 레이어를 이용해서 만들어 보겠습니다.
index.html 파일 하나만 있으면 됩니다.
index.html
-------------------------------------------------------------------------------------------------------
<script language=javascript>
function ShowImg(file_name)
{
var file_name;
img_layer.style.visibility = "visible";
img_layer.innerHTML="<img src=" + file_name + " border=0 onclick=HideImg() alt='클릭하면 닫힙니다.'>";
}
function HideImg()
{
img_layer.style.visibility = "hidden";
}
</script>
<table>
<tr>
<td><a href=javascript:ShowImg('img/1.jpg'+ ')><img src=img/1.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/2.jpg')><img src=img/2.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/3.jpg')><img src=img/3.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/4.jpg')><img src=img/4.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/5.jpg'+ ')><img src=img/5.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/6.jpg')><img src=img/6.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/7.jpg')><img src=img/7.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/8.jpg')><img src=img/8.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/9.jpg'+ ')><img src=img/9.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/10.jpg')><img src=img/10.jpg border=0 width=120 height=120></a></td>
</tr>
</table>
<div id=img_layer style="position:absolute; left:20px; top:30px; z-index:2; visibility:hidden;"></div>
-------------------------------------------------------------------------------------------------------
부분 부분 설명 할께요.
<a href=javascript:ShowImg('img/1.jpg')><img src=img/1.jpg border=0 width=120 height=120></a>
이미지를 클릭하면 ShowImg 자스 함수로 img/1.jpg 이미지의 주소를 넘겨 줍니다.
(' ') 안에 이미지의 경로를 적어주시면 됩니다.
function ShowImg(file_name)
{
var file_name;
img_layer.style.visibility = "visible";
img_layer.innerHTML="<img src=" + file_name + " border=0 onclick=HideImg() alt='클릭하면 닫힙니다.'>";
}
넘어온 파일 이름을 file_name 이라는 변수로 받습니다.
img_layer.style.visibility = "visible"; --> img_layer 라는 레이어를 보여 줍니다.
img_layer.innerHTML="<img src=" + file_name + " border=0 onclick=HideImg() alt='클릭하면 닫힙니다.'>";
--> img_layer 라는 레이어에 " " 안에 있는 내용을 씁니다.
이 부분에 테이블도 넣고 하면 이쁘게 만드실 수 있을겁니다.
onclick=HideImg() 이미지를 클릭하면 레이어를 가리게 해줄 함수를 호출합니다.
function HideImg()
{
img_layer.style.visibility = "hidden";
}
--> 레이어를 가립니다.
<div id=img_layer style="position:absolute; left:20px; top:30px; z-index:2; visibility:hidden;"></div>
-->레이어 소스입니다. 왼쪽에서 20 위에서 30 위치에 보여지게 됩니다.
보여질 위치는 수정하면 되요.
그리 복잡하지 않은거라 뭐 설명 들릴께 없습니다.
테스트 페이지는 제가 살짝 꾸민겁니다.
역시 간단하지만 초보분들께 도움이 됬으면 하는 바램이군요.
차후 쓸만하게 만들면 이쁘게 꾸며서 알려 드리겠습니다.
그럼 모라미 물러 갑니다.
예제 보기 : http://morami.net/test_show_img/index.html
이번에는 레이어를 이용해서 간단한 이미지 갤러리를 만들어 보겠습니다.
더 이쁘게 꾸미시는건 여러분께 맡기겠습니다.
저는 원리만 간단하게요..^^
뭐 별거 아닙니다. 저는 초보 분들을 위해서 간단히 레이어에 쓰임에 대해서 말씀드릴려고 하는거니깐요.
고수분께서는 지나치시면 됩니다. 흠흠
그럼 시작할께요.
보통 이미지를 갤러리를 만들때 팝업을 뛰어거나 해서 하는 경우가 대부분이지요.
여기서는 자바스크립트로 레이어를 이용해서 만들어 보겠습니다.
index.html 파일 하나만 있으면 됩니다.
index.html
-------------------------------------------------------------------------------------------------------
<script language=javascript>
function ShowImg(file_name)
{
var file_name;
img_layer.style.visibility = "visible";
img_layer.innerHTML="<img src=" + file_name + " border=0 onclick=HideImg() alt='클릭하면 닫힙니다.'>";
}
function HideImg()
{
img_layer.style.visibility = "hidden";
}
</script>
<table>
<tr>
<td><a href=javascript:ShowImg('img/1.jpg'+ ')><img src=img/1.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/2.jpg')><img src=img/2.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/3.jpg')><img src=img/3.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/4.jpg')><img src=img/4.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/5.jpg'+ ')><img src=img/5.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/6.jpg')><img src=img/6.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/7.jpg')><img src=img/7.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/8.jpg')><img src=img/8.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/9.jpg'+ ')><img src=img/9.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/10.jpg')><img src=img/10.jpg border=0 width=120 height=120></a></td>
</tr>
</table>
<div id=img_layer style="position:absolute; left:20px; top:30px; z-index:2; visibility:hidden;"></div>
-------------------------------------------------------------------------------------------------------
부분 부분 설명 할께요.
<a href=javascript:ShowImg('img/1.jpg')><img src=img/1.jpg border=0 width=120 height=120></a>
이미지를 클릭하면 ShowImg 자스 함수로 img/1.jpg 이미지의 주소를 넘겨 줍니다.
(' ') 안에 이미지의 경로를 적어주시면 됩니다.
function ShowImg(file_name)
{
var file_name;
img_layer.style.visibility = "visible";
img_layer.innerHTML="<img src=" + file_name + " border=0 onclick=HideImg() alt='클릭하면 닫힙니다.'>";
}
넘어온 파일 이름을 file_name 이라는 변수로 받습니다.
img_layer.style.visibility = "visible"; --> img_layer 라는 레이어를 보여 줍니다.
img_layer.innerHTML="<img src=" + file_name + " border=0 onclick=HideImg() alt='클릭하면 닫힙니다.'>";
--> img_layer 라는 레이어에 " " 안에 있는 내용을 씁니다.
이 부분에 테이블도 넣고 하면 이쁘게 만드실 수 있을겁니다.
onclick=HideImg() 이미지를 클릭하면 레이어를 가리게 해줄 함수를 호출합니다.
function HideImg()
{
img_layer.style.visibility = "hidden";
}
--> 레이어를 가립니다.
<div id=img_layer style="position:absolute; left:20px; top:30px; z-index:2; visibility:hidden;"></div>
-->레이어 소스입니다. 왼쪽에서 20 위에서 30 위치에 보여지게 됩니다.
보여질 위치는 수정하면 되요.
그리 복잡하지 않은거라 뭐 설명 들릴께 없습니다.
테스트 페이지는 제가 살짝 꾸민겁니다.
역시 간단하지만 초보분들께 도움이 됬으면 하는 바램이군요.
차후 쓸만하게 만들면 이쁘게 꾸며서 알려 드리겠습니다.
그럼 모라미 물러 갑니다.
예제 보기 : http://morami.net/test_show_img/index.html
댓글 6
-
Gura.org
2003.02.15 12:56
-
모라미
2003.02.15 14:07
움 좋은 발상이라구요. -.- 네 감사합니다.
분명히 말씀드렸습니다.
이번에는 레이어를 이용해서 간단한 이미지 갤러리를 만들어 보겠습니다.
더 이쁘게 꾸미시는건 여러분께 맡기겠습니다.
저는 원리만 간단하게요..^^
원리만 간단히 보여 드린겁니다.
이점 양해해 주세요.
부드럽게 하는거야 얼마든지 스크립트 더 추가 하면 되겠지요. -
김승한
2003.02.19 09:45
감사합니다~~
응용해서 유용하게 잘 쓸게여~ ^-^ -
모라미
2003.02.25 05:50
이 스크립트를 통해서 갤러리 프로그램을 만들어 봤습니다.
사용자를 최대한 배려해서 만들었습니다. ^^
구경해보세요. 아래 주소 입니다.
http://www.nzeo.com/bbs/zboard.php?id=p_source&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&select_arrange=headnum&desc=asc&no=635 -
윤민석
2003.03.17 15:56
전 자바는 모르지만.. 보기좋은데요^^ 추천 !! -
김인기
2004.02.22 17:38
질문 되나요?
PHP에서 자바 배열로 어떻게 하죠?
예를들면 DB를 읽어야 화일이 결정되는데.. 그걸 java로 할려면..??
제목 | 글쓴이 | 날짜 |
---|---|---|
올블로그 명예의 전당글 가져오기 (캐쉬기능추가) [2] | 유창화 | 2006.04.17 |
올블로그(http://www.allblog.net/Home/) 명예의 전당글 가져오기 [2] | 유창화 | 2006.04.17 |
네이버 openapi 사용하여 쇼핑검색 만들기 [3] | 유창화 | 2006.04.13 |
네이버 openapi 사용하여 한국어사전 만들기 | 유창화 | 2006.04.13 |
네이버 openapi 사용하여 실시간 인기검색어 보여주기 [3] | 유창화 | 2006.04.13 |
유용한 PHP성능 개선을 위한 팁 [4] | 이태라 | 2006.04.11 |
[PHP 동영상강의] 46. 다중검색기 제작해보기 [8] | 서기 | 2006.04.06 |
[PHP 동영상강의] 45. 우편번호 검색기 제작해보기 [12] | 서기 | 2006.03.30 |
[PHP 동영상강의] 44. 즐겨찾기 제작하기 [7] | 서기 | 2006.03.21 |
[PHP 동영상강의] 43. 공용함수의 제작/쿠키로그인(보안) [4] | 서기 | 2006.03.16 |
[PHP 동영상강의] 42. 세션의 사용 [4] | 서기 | 2006.03.02 |
[PHP 동영상강의] 41. 추천사이트(북마크)프로그램 만들기 [4] | 서기 | 2006.02.27 |
[PHP 동영상강의] 40. 파일의 업로드 [7] | 서기 | 2006.02.27 |
[PHP 동영상강의] 39. 회원가입/로그인 처리 [8] | 서기 | 2006.02.06 |
[PHP 동영상강의] 38. 삭제시 비밀번호 물어보기 [6] | 서기 | 2006.01.26 |
[PHP 동영상강의] 37. 기본적인 페이징 처리하기 [7] | 서기 | 2006.01.21 |
[PHP 동영상강의] 36. 사용자 정의함수 심화학습 [8] | 서기 | 2006.01.21 |
[PHP 동영상강의] 35. 사용자 정의함수의 사용 [8] | 서기 | 2006.01.16 |
[PHP 동영상강의] 34. 자료를 수정해보자. [8] | 서기 | 2006.01.14 |
[PHP 동영상강의] 33. 자료를 삭제해보자. [6] | 서기 | 2006.01.12 |
근데 이게 좀더 부드러우면 쓸만할듯합니다