[해피CGI][cgimall] 이미지 확대/축소 기능인 MediumLightbox

뉴스본문과 같은 형태의 문서에 삽입된 이미지를 클릭하면 레이어로 확대되어 전체화면으로 볼수 있는 medium-lightbox 입니다.

이미지는 data-width 와 data-height 값으로 제어하며 플러그인을 이용하여 이미지 보기시 부드러운 효과를 적용하고 있습니다.

 

http://davidecalignano.it/project/files/medium-lightbox/demo/demo.html

본 링크는 해당 소스의 데모를 확인할 수 있는 링크입니다.

 

 

위와같이 이미지를 클릭하면 전체 화면에서 해당 이미지를 확인할 수 있는 기능이며,

별도 레이어 및 새창과 관련된 소스 없이 한번에 간단히 이미지를 확대하여 확인할 수 있습니다.

확대된 이미지를 한번더 클릭하면 축소되어 원래 위치에 삽입되는것처럼 적용됩니다. 또한 스크롤을 내릴경우에도

확대된 이미지는 원래자리로 이동되어 자연스럽게 글을 읽으면서 이미지를 확인할 수 있는 구조로

구현이 가능합니다.

https://github.com/davidecalignano/MediumLightbox

위 링크는 본 소스를 직접 다운로드 및 사용방법을 설명해놓은 링크이며,

<link href="style.css" rel="stylesheet">
<script src="mediumLightbox.js" ></script>

위 js 소스 를 선언한 후

<figure class="half left zoom-effect">
    <div class="aspectRatioPlaceholder" >
        <div class="aspect-ratio-fill" style="padding-bottom: 50%;"></div>
        <img class="img" data-width="900" data-height="450" src="image.jpg">
    </div>
</figure>

위와같은 이미지 폭, 이미지 높이를 data 값으로 선언하고

적용한 페이지 하단에

<script>
  MediumLightbox('figure.zoom-effect', {
   //margin:300
  });
 </script>

위와같은 스크립트를 선언하는것만으로 해당 소스가 구현이 되므로 간단하게 본 소스를 적용할 수 있습니다.