jQuery Syaku LightBox : 이미지 라이트박스 자바스크립트

 jQuery Syaku LightBox

jQuery 용 이미지 라이트박스입니다. 오픈소스 이미지 라이트박스는 많은데. 너무 기능들이 방대하고 화려해서
심플하게 이미지 모달역할만 할 수 있는 것을 만들었습니다. 이미지 로딩중인 경우 로딩이미지가 출력되는 부분은 구현하지 않았습니다.

[데모]

<script type="text/javascript">
jQuery(function() { jQuery("a[rel=lightbox]").slightbox(); });
</script>

...
...
...

<a href="./demo/1.jpg" rel="lightbox"><img src="./demo/1.jpg" width="150" /></a>
<a href="./demo/4.jpg" rel="lightbox"><img src="./demo/4.jpg" width="150" /></a>
<a href="./demo/2.jpg" rel="lightbox"><img src="./demo/3.jpg" width="150" /></a>

 

이미지를 클릭하게 되면 a 링크의 파일을 오픈하게 됩니다. 모달로 활성화된 이미지에 마우스를 오버하면 오른쪽 상단에 아이콘 2개가 활성화됩니다. 첫번째 아이콘은 새창으로 이미지를 열고, 두번째 아이콘은 모달을 닫습니다.

브라우저 버전 : ie, 사파리, 파이어폭스, 크롬 사용할 수 있습니다.

jquery-syaku.lightbox.zip

[요청사항]

안녕하세요. jquery 라이트박스 소스를 찾다가 들어왔습니다. 

포스팅으로 올려놓으신건 상단의 X버튼을 눌러야 꺼지는 건데, 

혹시 사진 자체를 누르면 꺼지게 하려면(X버튼이 보이지않고).. 어딜 고쳐야할까요?

[답변]

비긴 함수를 아래와 같이 수정하시면 됩니다.

var  menu_btn = 값을 모두 지우면 오픈과 클로즈 아이콘이 보이지 않습니다.

    
    function _begin(idx) {
      var menu_btn = "";
      var offset = _offset();
      if (!obj_box.is(j_id_box)) {
        body.append($("<div id='" + id_box + "'></div>").css('width','100%').css('height',offset.scrollHeight));
      }

      if (!obj_display.is(j_id_display)) {
        body.append(jQuery("<div id='" + id_display + "'>" + menu_btn + /*<div id='syakuLightboxLoading'><span id='syakuLightboxLoadingImg'></span></div>*/"<img src='' id='" + id_display_img + "' style='display:none;' /></div>"));
        jQuery('#' + id_display_img).click(function() { _close(); });
      }
    }