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

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

마우스 스크롤을 하단으로 이동할때마다 내용이 출력되는 애니메이션 JQuery ScrollTrigger 입니다. CSS3를 활용한 애니메이션으로 다양한 프레임에서도 적용이 가능합니다. 이미지 출력 및 원페이지형 홈페이지 제작에도 유용합니다. 가로모드도 지원하며, 그 외 다양한 옵션을 제공하여 편리성이 높습니다.

색상 선택을 구글 문서 스타일을 이용해서 할수 있도록 하는 jquery/bootstrap 플러그인 입니다. 다운로드 받은 파일의 압축을 해제후 index.html 파일을 웹브라우저로 열어서 보면 샘플을 확인하는게 가능합니다. 일반적인 컬러피커들과는 다르게, 많은 색상을 선택할 수는 없지만, 자주 사용이 될 만한 색상만 모아두고 조금 더 쉽게 사용할 색상을 선택하도록 하기에는 유리해보이네요.

클립보드에 텍스트를 복사할 수 있게 도와주는 JQuery 플러그인입니다. - 라이센스 MIT - 작동 브라우저 Chrome, IE 9 이상, FireFox, Opera, Safari - 사용 방법 1. 파일 상단에 JQuery 라이브러리와 Copy to Clipboard JS 파일 링크를 걸어줍니다. 2. 버튼에 data-clipboard-text 속성을 추가하여 복사하고자하는 TEXT를 입력해 줍니다. 3. TEXTAREA 객체 안의 TEXT를 복사하고자 하는 경우에는 버튼에 data-clipboard-target 속성을 추가하여 TEXTAREA 객체의 CLASS명을 입력합니다. 4. 버튼 클릭시 Copy to Clipboard 플러그인이 작동하도록 작업합니다. - 작동 예제

- 라이센스 MIT - 사용 방법 1. 파일 상단에 ScrollTabs 플러그인 CSS 파일 링크를 걸어줍니다. 2. jQuery 라이브러리와 ScrollTabs 플러그인 JS 파일 링크를 걸어줍니다. 3. 스크롤이 가능한 탭에서 마우스 휠을 활성화 할 수 있도록 mosewheel 플러그인 JS 파일 링크를 걸어줍니다. 4. 아래와 같이 탭 메뉴를 구성합니다. 5. ScrollTabs 플러그인을 호출합니다. 6. 아래와 같은 옵션들을 설정할 수 있습니다. 7. API의 메소드는 홈페이지를 참고하세요.

책이나, 잡지의 책장 넘기는 효과를 모바일에서도 사용할 수 있는 3D로 생성하는 간단한 jQuery 스크립트입니다. 다운로드 받은 파일의 압축을 해제후 dist/index.html 파일을 웹브라우저에서 열어보면 확인이 가능합니다. 책장을 넘기는 효과를 3D로 구현해둔 예제입니다. 책장을 클릭하면, 실제 책장을 넘기듯한 효과를 이용해서 다음 페이지를 보여줍니다. index.html 파일의 소스코드와, js 파일의 소스코드를 확인해보면 표시한 부분에 책의 내용을 넣으면 됩니다. 책장을 넘길때 화면에 표시되는 효과를 위한 css/css3 파일과, js 파일 몇개를 이용해서 비교적 간단하게 웹페이지에서 책을 보는 효과를 적용해줄수 있네요. 페이지에 이미지를 포함시켜보니 잘 나오는걸로 봐서, 다양한 목적으로 활용..

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

* wRunner Slider Plugin - wRunner는 슬라이더를 추가하여 값을 선택하는 플러그인입니다. 테마, 단계, 최소 및 최대 값 등을 설정할 수 있습니다. jquery 3.4.1 버전 이상 필요로 합니다 * 사용방법 - 첨부된 압축파일을 웹디렉터리에 압축해제합니다 작업될 페이지의 html 상단에 아래와 같이 제공된 css를 호출합니다 아래와 같은 요소들을 추가하여 최소값, 최대값 단일,멀티 슬라이더 옵션, 가로세로 옵션등에 대한 값확인 및 설정을 할 수 있도록 되어있습니다 그리고 문서 하단에 아래와 같은 js 파일을 호출합니다 출력되는 결과는 아래와 같습니다 검색이나, 통계와 관련된 기능들에 접목할때 해당 슬라이더바를 활용하시면 도움이 될것 같습니다

콘텐츠 내용에 맞게 너비와 높이를 자동으로 저정해줍니다. 데모사이트에서도 확인하실 수 있으며 첨부파일을 다운받아 파일내에서 호출하는 html파일을 변경하여확인하실수도 있습니다. 단 동일한 도메인에서만 사용하실 수 있으며 콘텐츠 파일내용에 높이를 변경하면 적용되지 않습니다.구글 광고가 있을경우 오작동이 있을수도 있습니다. 데모사이트에서도 확인하실 수 있습니다.

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