예제 보기 : 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