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

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

jQuery 를 이용하여 제작된 슬라이드 플러그인 입니다. 3가지 스타일( coverflow | carousel | flat )을 옵션 설정으로 컨트롤 가능 합니다. 3D 효과를 적용하려면 carousel 로 적용해야 함을 참고 하세용. 라이센스 : MIT 지원 브라우저 Chrome, Safari & IOS Safari, Firefox, IE 10+, IE 8~9 (제한적 지원) 사용방법은 아래를 참고하세요. 1. CSS 와 jQuery를 호출하세요. 2. 슬라이드 컨텐츠를 구성하세요. Plain ol' HTML! ... 3. 슬라이드를 실행시키세요. var options = { start: 0, fadeIn: 400, loop: true, buttonPrev: 'Previous', buttonNext:..

JQuery 플러그인을 활용한 동영상 풀 스크린 배경 으로 만들고, 여러 동영상을 사용하여 슬라이드 쇼로도 만들 수 있습니다. 다수의 동영상을 이용하여 슬라이스 쇼도 가능하며, 설정 가능한 옵션에는 자동재생여부, 컨트롤 기능 사용여부, 축소기능 사용등의 설정을 하실 수 있습니다.

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

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

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

* jTippy tooltip plugin - jQuery 툴팁 플러그인. 뛰어난 반응 형 배치로 사용 및 구성이 쉽습니다. 원하는 영역에 툴팁을 추가하여 문구를 보여주고 문구를 보여주는 동시에 hover, focus효과, background 에 대한 영역을 black, blur 와 같은 효과를 주어 툴팁을 더 돋보이게 만들 수 있습니다 * 사용방법 첨부된 압축파일을 다운받아 원하는 웹디렉터리에 압축을 해제후 html 문서상에 아래와 같은 형태로 코드를 삽입하도록 합니다 코드상단 css 추가 코드하단 js 추가 위와 같이 플러그인관련 css 및 js를 작성하고 본문 코드중단에 아래와 같이 툴팁효과들을 적용할 수 있습니다 툴팁 및 백그라운드 효과 위의 효과외에 툴팁영역을 작게 또는 크게, 컬러를 변경하는등..

Jquery 를 이용하여 웹사이트의 소스 퍼가기를 막을 수 있습니다. 기타 용도에 따라서 단축키들을 막을 수 있습니다. 물론 완벽한 차단 방법은 아니지만 최대한 불편하게 만든다 라고 생각하시는게 맞을듯 합니다. 차단하는 단축키는 아래와 같습니다. 압축파일을 해제하시면 demo.html 파일이 있습니다. 해당 파일에는 HTML 과 SCRIPT 가 같이 포함되어 있습니다. 부분적으로 사용하고 싶거나 특정 기능만 사용하고 싶다면 아래의 스크립트를 수정하시면 됩니다. //Mouse Right Click document.addEventListener('contextmenu',function(e){ e.preventDefault(); }); //Keyboard Keys document.addEventListener..

반응형으로 제작된 jQuery 사이트 메뉴 플러그인 SIDR입니다. 여타 다른 플러그인과 같은 사용법으로 하시면 됩니다. 테마는 총 3개를 지원하며, CSS 파일로 구분됩니다. 메뉴의 구동 방식은 3가지 이며, 다양한 옵션을 통해 구동위치, 기준점, 속도 등등을 제어할 수 있습니다.

다운로드 받은 파일의 압축을 풀고 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 좌측에 나열된 항목들을 체크박스로 선택해서 우측으로 이동시켜서 어떤 항목을 선택할지를 입력받는 입력폼으로 사용이 가능합니다. 위 그림 처럼 그룹화시켜서 한번 체크하면 해당 그룹에 속한 전체를 선택하는 것도 가능하네요. 그룹화 시키지 않고 하나하나 개별옵션을 선택하도록 한 예제입니다. 선택할 옵션들을 단어로 검색하는 예제입니다. 샘플로 제공해준 소스코드를 보면선택에 필요한 항목들을 조절하는 것은 그리 어려워 보이진 않네요. 출처는 https://www.jqueryscript.net/form/Groupable-Searchable-Dual-Listbox-Transfer.html 입니다.