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

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

waifu2x에서는 이미지의 화질을 높이거나 일반적으로 이미지를 늘리는 것보다 이미지 깨짐현상이 훨씬 덜하게 최대 2배의 크기를 늘릴 수 있는 사이트 입니다. 이미지 업로드하시고 스타일, 노이즈감소, 확대 등 원하는 조건을 선택하신 다음 변환버튼을 누르시면 웹사이트상에서 변환된 이미지를 확인하실 수 있고, 다운로드 버튼을 누르시면 변환된 이미지가 다운로드 됩니다. 아래와 같이 작은 이미지의 크기를 늘리실 때 유용합니다. 일반적으로 포토샵 등 이미지 편집 프로그램으로 크기를 늘리시면 아래와 같이 이미지가 흐릿하게 깨져 보입니다. waifu2x 사이트를 이용하여 이미지를 2배 늘리시면 아래와 같이 보다 선명한 화질의 이미지로 크기를 늘리실 수 있습니다. 고화질 이미지 없는 저화질 이미지를 사용해야 될 경우,..

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

마우스 오버를 하면 아래와 같이 이미지가 확대와 이미지가 어두워지는 효과가 있습니다. 이미지의 배율과 검은색 그림자의 투명도를 조절할수 있습니다. 해당사이트에서 소스를 확인하고 바로 수정해볼수 있습니다.

이미지 및 텍스트를 확대해서 보여주는 효과 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가지 형태 동일한 비율로 영역안에서 전체 이미지가 확대 영역안에서 이미지가 확대되고 마우스를 움직여서 특정 부분으로 이동 가능 영역밖으로 이미지가 확대됩니다. 해당사이트에서 소스에 관한 설명 및 다운로드가 가능합니다.