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

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

가로 막대 그래프를 손쉽게 웹페이지에 표시할수 있는 jQuery 플러그인입니다. 다운로드 받은 파일의 압축을 해제하면 생기능 demo/index.html 파일을 웹브라우저로 열어서 보면 데모를 확인하는게 가능합니다. 위 그림은 가장 심플한 예제입니다. 소스코드를 열어보면 위 그림 처럼 제목, 단위, 세부설명문구, 각 그래프의 레이블, 값 정도만 설정하면 첫번째 그림 처럼 화면에 막대 그래피를 생성할수 있는 예제입니다. 몇가지 옵션들을 이용해서, 막대그래프를 위 그림 처럼 줄로 구분해서 나누는게 가능합니다. 한개의 그래프를 위한 예제 소스코드인데, 그래프가 1개일때 보다는 약간 복잡하네요. 또 다른 예제는 막대 그래프를 줄로 구분하는게 아닌 한줄로 구분하는 예제도 있네요. 예제 소스코드에선, 그래프가 2개..

animateTyping.js는 컨테이너 요소 내에서 텍스트의 입력 및 삭제 애니메이션으로 타자기 효과를 내는 Jquery 플러그인입니다. - 라이센스 MIT - 작동 브라우저 Chrome, IE 9 이상, FireFox, Opera, Safari - 사용 방법 1. 파일 상단에 JQuery 라이브러리와 jquery.animateTyping.js 파일 링크를 걸어줍니다. 2. 객체에 animate-typing 속성을 부여하고 문구를 입력하면 플러그인이 나머지를 알아서 처리합니다. 3. 여러 줄의 문구를 입력하고 삭제하는 애니메이션을 구현하려면 간단하게 여러줄을 입력하면 됩니다. 4. data-animate-loop 속성으로 입력/삭제 애니메이션을 반복할 수 있습니다. 5. 다음과 같이 애니메이션 속도 및..

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

* Poppa : Lightweight jQuery Validation Plugin Poppa는 클라이언트 폼양식 유효성 검사를 쉽게하는 jQuery 플러그인입니다. 기본 사용자 정의를 제공하며 브라우저 간 호환, 신뢰성 및 경량화 (8kb 만 축소)를 목표로합니다. URL 및 이메일 유효성 검사 및 기본 오류 메시지 (영어)를 포함한 유용한 유효성 검사 방법이 제공됩니다. 사용방법은 아래와 같습니다 첨부된 압축파일을 해제하여 사용할 웹서버 공간에 업로드 합니다 제공되어진 css 파일을 html 문서 상단에 선언하고 jquery 도 로드합니다 태그 앞에 js 파일을 로드합니다 위와 같이 필수요소들을 로드한 다음 html 본문영역의 input 타입 태그에 data-validation-typedata-val..

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

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

네이버에서 제작한 MIT 라이센스의 차트 billboard.js 입니다.AreaChart 를 비록하여 타원형 차트, 라인형 차트, 도넛형 차트 등 다양한 차트를 제공해주고API 도 제공하여 다양한 분야에 쉽게 이용할 수 있습니다. billboard.js 로 제공되는 기본형 차트입니다. 색상으로 각각의 데이터를 확인할 수 있는 기본형 차트부터 아래에 소개해드릴 다양한 차트 구조를 확인할 수 있습니다. 위와같은 다양한 목차별 차트를 확인할 수 있습니다. 이용하는 방법은 본 사이트에서 다운로드 받을 수 있는 billboard.js 파일과 billboard.css billboard.min.js billboard.min.css insight.css insight.min.css 를 다운받아 상단에 선언한 이후 를 ..

드래그와 리사이즈를 이용해서 일일 스케쥴을 편집하기 위한 쉬운 jquery 플러그인 입니다. 데모 사이트 보다는 다운로드 받은 파일의 압축을 해제해서 나오는 demo/index.html 파일을 웹브라우저로 열었을때 확인을 해보는게 기능과 설명이 더 많습니다. 빈공간을 클릭해서 새로운 일정을 추가하는게 가능하네요. 기존에 일정을 클릭해서 이동시키거나, 일정의 끝을 클릭해서 늘리거나, 줄일수도 있습니다. 일정을 추가하거나 변경시마다 로그(콜백)를 이용해서 일정관리 등을 제작하기에 좀더 쉽게 활용이 가능해보이네요. 사용법이나, 지원되는 옵션은 데모를 확인하는 HTML문서내에서 설명을 잘 해주고 있습니다. 출처는https://www.jqueryscript.net/time-clock/Simple-Daily-Sch..

JavaScript 를 이용하여 테이블이 여러 요소의 입력박스를 동적으로 생성하는 스크립트 입니다. 라이센스는 MIT 입니다. 압축 파일에 test.html 파일을 만들어서 첨부해 두었습니다. 해제하여 사용하시면 되구요. 조금 더 구성을 다르게 하고 싶거나 옵션 및 콜백을 구성하고 싶다면 아래의 링크를 통해 옵션을 커스텀 하시기 바랍니다. [ 옵션 및 콜백 확인하기 ] 1.CSS 와 기본 JS 호출하기 2.빈 테이블 생성 및 로드 버튼 생성. 3.AppendGrid 호출하기 ( 생성 옵션을 설정한다 생각하시면 편해요 ) 4.기존 데이터를 로딩할 경우 ... 사용하시면 됩니다.