웹솔루션개발 25년 노하우! 해피CGI의 모든것

마우스를 오버하면 특정 레이어에 이미지를 확대하는 기능입니다. jQuery Plugin 입니다. 라이센스는 MIT 라이센스 입니다. 기능이 조금 독특하다 보니 라이브러리가 좀 필요합니다. 코드 구성은 아래와 같이 되어 있습니다. 압축된 파일을 해제하면 index.html 파일을 구동하면 바로 기능 확인 및 사용이 가능 합니다. 기능은 독특하지만 안타깝게도 api 를 제공하지 않습니다. 그래서 어떤 옵션이 있는지 체크가 안되구요. 있는 그대로 사용하시는게 편합니다.

jQuery 로 만든 Zoom in, Zoom out 플러그인 입니다. 이미지를 클릭하면 라이트 박스 처럼 이미지를 Zoom in 하여 보여집니다. 당연히 다시 클릭하면 이미지는 원상태로 Zoom out 됩니다. Mac에서는 ⌘ , Windows에서는 Ctrl 를 누른 상태에서 클릭하면 이미지가 새 탭에서 열립니다. 사용법 1.페이지 상단에 zoom 과 관련된 css 를 호출하세요. 2.img 태그에 data-action="zoom" 을 추가하세요. 3.하단에 js 를 호출하세요.

뉴스본문과 같은 형태의 문서에 삽입된 이미지를 클릭하면 레이어로 확대되어 전체화면으로 볼수 있는 medium-lightbox 입니다. 이미지는 data-width 와 data-height 값으로 제어하며 플러그인을 이용하여 이미지 보기시 부드러운 효과를 적용하고 있습니다. http://davidecalignano.it/project/files/medium-lightbox/demo/demo.html 본 링크는 해당 소스의 데모를 확인할 수 있는 링크입니다. 위와같이 이미지를 클릭하면 전체 화면에서 해당 이미지를 확인할 수 있는 기능이며, 별도 레이어 및 새창과 관련된 소스 없이 한번에 간단히 이미지를 확대하여 확인할 수 있습니다. 확대된 이미지를 한번더 클릭하면 축소되어 원래 위치에 삽입되는것처럼 적용됩니..

Zoom In, Zoom Out, Slide, Rotate, Blur, Gray Scale, Sepia, Blur + Gray Scale, Opacity, Flashing, Shine, Circle 다양한 이미지 마우스 오버 효과입니다. 원하는 효과의 클래스만 적용하면 바로 사용이 가능합니다.

이미지 및 텍스트를 확대해서 보여주는 효과 Zoomerang.js 입니다. 압축파일을 푸시고 바로 실행해보시면 됩니다. http://yyx990803.github.io/zoomerang/ 글자를 감싸는 div 및 span 태그에 class="zoom" 태그만 넣어주시면 됩니다.

jquery 를 이용해서 제작된 이미지를 확대시켜서 볼수 있는 스크립트입니다. 다운로드 받은 파일의 압축을 풀어서 index.html 를 웹브라우저로 열어서 보면 확인이 됩니다. 이미지 위에 마우스를 올리면 해당 부분에 이미지를 더 큰 이미지파일을 이용해서 돋보기처럼 확대되는 효과를 가진 자바스크립트입니다. small/ 경로에 있는 이미지는 작은이미지이며, large/ 경로에 있는 이미지는 확대된 상태에서 표시되는 이미지입니다. 소스코드는 위 그림과 같은데 data-image 는 일반 이미지 data-zoom-image 는 확대된 큰 이미지 thumb 는 하단의 작은 사진을 의미하네요. 출처는 https://www.sourcecodester.com/javascript/7802/zoom-effect-jqu..

썸네일에 마우스 오버시 해당 이미지가 확대되는 제이쿼리 3가지 형태 동일한 비율로 영역안에서 전체 이미지가 확대 영역안에서 이미지가 확대되고 마우스를 움직여서 특정 부분으로 이동 가능 영역밖으로 이미지가 확대됩니다. 해당사이트에서 소스에 관한 설명 및 다운로드가 가능합니다.