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

고퀄리티의 음식관련 사진들을 모아놓은 무료 이미지 사이즈 foodiesfeed 입니다. 좋은 이미지가 좋은 디자인에 도움이 된다는 사실은 모두 알고 계실겁니다. 음식과 관련된 저작권 걱정없는 고퀄리티 무료 이미지 사이트입니다. 퀄리티가 높은 음식 사진들이 많아서 유용하게 사용할 수 있을 듯 합니다. ^^

isystkSlider 는 다양한 기능들을 지원하는 이미지 슬라이더 프로그램 입니다. 다운로드 받은 파일의 압축을 해제한후 나오는 dist/index.html 파일을 웹브라우저로 열어보면 데모를 확인이 가능합니다. 위 예제는 단순한 이미지 슬라이더의 예제입니다. 이미지 슬라이더 + 갤러리 형태의 예제입니다. 모바일에서 사용하면 좋을만한 예제입니다. 샘플용 HTML파일의 소스코드를 열어보면 이미지 슬라이더를 만들기 위한 HTML태그들을 어떻게 구성해야 하는지 확인이 가능합니다 슬라이더를 작동시키는 다양한 옵션들이 존재하네요.

jQuery 와 CSS flexbox 로 만들어진, 반응형의 사진 갤러리 입니다. 첨부된 파일의 압축을 풀어서 나오는example/index.html 파일을 웹브라우저 열어보면 데모를 확인이 가능합니다. 반응형이어서, 화면의 크기에 맞게 이미지의 배열이 적당하게 조절이 됩니다. 이미지를 클릭해보면 해당 이미지가 light box 로 팝업이 됩니다. 좌우 화살표를 이용해서 다음 이미지나, 이전 이미지로 슬라이드도 됩니다. 위 그림 처럼 index.html 파일의 소스코드도 상당히 간단합니다.

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

360ImageRotate는 반응형 모바일 친화적인 이미지 뷰어 플러그인으로 사용자에게 제품에 대한 360도의 시청 경험을 제공합니다. - 라이센스 MIT - 작동 브라우저 Chrome, IE 9 이상, FireFox, Opera, Safari - 사용 방법 1. 각도를 다르게 한 여러장에 사진을 준비합니다. 기본 이미지 저장 경로는 images 입니다. 2. 필요한 JavaScript 및 CSS 파일을 HTML 파일에서 호출합니다. 3. 360도 이미지가 노출될 자리에 객체를 추가합니다. 4. 플러그인을 호출합니다. 5. 각종 옵션들을 추가할 수 있습니다. totalFrames : 보유한 총 이미지 수endFrame : 자동 회전 애니메이션의 끝 프레임currentFrame : 자동 회전 시작 프레임s..

* Motion Hover Effects 이미지 왜곡으로 흥미로운 호버 효과나타내는 jquery 플러그인. 주요 기능은 `이미지 왜곡 효과`, `이미지 스트레치 효과` 가 되겠습니다 * License 웹 사이트, 웹 앱 및 판매용 웹 템플릿과 같은 개인 또는 상업용 프로젝트에 통합되거나 구축 된 경우 자유롭게 사용할 수 있습니다. "있는 그대로"리소스를 가져 와서 판매, 재배포, 재 게시 또는 "플러그인"버전의 리소스를 판매 할 수 없습니다. 이 리소스를 사용하여 빌드 된 무료 플러그인에는 눈에 띄는 언급이 있어야하며 원본 저작물에 연결되어야합니다. * 사용방법 첨부된 압축파일을 해제하여 원하는 웹루트 디렉터리에 업로드 합니다 적용할 html 문서에 아래와 같은 구조형태로 코드를 삽입해야 합니다 제공된 ..

모달 팝업을 이용해서 이미지 크기를 조정,회전,자르기,미리보기를 할수 있는 jQuery 플러그인입니다. 웹페이지에서 이미지 파일을 선택해서 모달창을 이용해서 이미지를 회전하거나, 이미지중 일부 부분만 자르는 등의 조절을 할수 있는 jquery 플러그인입니다. 압축을 풀면 나오는 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 이미지를 선택하면 위 그림과 같은 모달창을 이용해서 이미지를 회전시킬수 있으며, 사용할 크기를 마우스로 드래그 해서 지정할 수 있습니다. 이미지를 편집하기에 필요한 옵션들을 위 그림과 같이 지정할수 있네요. 몇가지 옵션을 제공하고 있으며, 샘플을 확인하기 위한 index.html 에 어떤 옵션인지에 대해서 설명을 해주고 있습니다.

SVG로 제작된 로딩 아이콘 입니다. 크기, 색상, 속도 등을 자유롭게 조절이 가능한 svg로 제작된 로딩 아이콘입니다. 해당 사이트 또는 첨부파일을 다운로드 받아 소스 확인이 가능합니다.

가장인기 있는 216종의 색상의 PNG이미지를 색상을 클릭하여 리스트를 확인하실 수 있습니다. 위 이미지에서 원하는 색상을 클릭하면 해당 색상과 관계있는 png 이미지 리스트가 출력됩니다. 이미지를 클릭하면 이미지에대한 상세내용을 확인할 수 있으며 download 버튼을 눌러 다운 받을수 있습니다. 이미지 다운로드시 이미지 라이센스에 유의하여 사용하실 바랍니다 ^^

Javascript 를 이용한 뷰어 입니다. 라이센스는 MIT 라이센스 입니다. 뷰어 호출시 옵션, api 메서드, 이벤트 헨들러 들을 다양하게 제공합니다. 설치는 아래와 같이 npm 으로 하시거나 include 로 하셔도 됩니다. 하지만 압축 파일에는 jquery.js 파일은 없으니 cdn 주소를 이용하시기 바랍니다. ^^ npm install imageviewer jqueryInclude files: