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

* Thumbnails Preview Slider jquery 로 만든 썸네일 미리보기 이미지 * 적용방법 첨부된 압축파일을 다운로드 하여 원하는 웹경로에 업로드합니다 마크업 구조는 아래와 같습니다 썸네일에 대한 항목을 보유할 기본 컨테이너 목록으로 구성됩니다 ts_thumbnails 클래스가 있으며 점 위로 마우스를 가져가면 축소판을 볼 수 있는 작은 보유하게 됩니다 tspreview_wrapper 클래스가 있는 div 내부에 있는 썸네일 목록은 다음과 같은 구조를 갖습니다 썸네일 주요 스크립트 호출은 아래와 같습니다 이외에 html 및 css , js 는 샘플파일의 index.html 파일을 참조하시면 도움이 되실겁니다 브라우저로 실행시 아래와 같은 화면을 확인할 수 있습니다

* juqery 3D Wall Gallery 3D 효과가 있는 jquery 갤러리 - 이미지를 가리키면 설명을 볼 수 있습니다 - 상단의 jQuery UI 슬라이더를 사용하여 이미지를 슬라이드합니다 - 마우스 휠을 사용하여 이미지를 스크롤 합니다 - 하단의 썸네일 미리보기를 사용하여 이미지 선택 - URL에 있는 이미지에 대한 해시 앵커를 사용하여 직접 가져올 수 있습니다 * 적용방법 첨부된 압축파일을 다운로드 하여 원하는 웹경로에 업로드합니다 적용하고자 하는 웹문서에 css 파일을 호출합니다 아래와 같이 이미지 태그와 앵커를 각각 지정해줍니다 아래와 같이 각 앵커 이미지에 맞는 썸네일 이미지도 지정해줍니다 그리고 하단에 제공되는 js 파일 및 jquery 파일을 호출합니다 적용된 화면은 아래와 같습니다..

jQuery 를 이용한 메뉴 플러그인 입니다. 압축된 js 파일은 9KB로 매우 가볍습니다. IE11 에서도 구동 됩니다. 왼쪽 메뉴 또는 오른쪽 메뉴 형태로 설정하여 사용할 수 있습니다. HTML5를 사용 합니다. BEM 표기법을 사용합니다. 라이센스는 MIT License (MIT) 입니다. 아래는 실행화면 입니다. 사용법 안내 입니다. 1. 라이브러리를 호출 합니다. 2. 컨텐츠 및 메뉴를 선언 합니다. Menu Shop Products Collections Premium Common Exclusive First Secound Other Accesories Small Medium Large Cards Sets Example 1 Example 2 Example 3 Example 4 Example 5 ..

jQuery 를 이용하여 라이트 박스를 만들 수 있습니다. 사용자 정의가 가능합니다. 이미지, 비디오(YouTube, Vimeo, Wistia, Brightcove), Soundcloud 트랙, IFRAME 및 AJAX 콘텐츠를 지원하도록 제작되었습니다. 반응형 으로 제작 되었습니다. MIT 라이센스 입니다. 사용법은 간단 합니다. 1. 라이브러리 호출 2. 컨텐츠 선언 빨간색은 라이트박스에 보여질 썸네일 입니다. 파란색은 리스트에 보여질 썸네일 입니다. 3. 실행 var foo = $('#gallery'); foo.poptrox(); 실행화면 입니다.

날짜/시간 picker 입니다. 상황에 따라 날짜와 시간 모두 설정하거나 개별로 사용이 가능합니다. 해당 사이트 또는 아래 사이트에서 소스에 대한 설명을 확인할 수 있습니다. https://github.com/katemihalikova/ion-datetime-picker

구글 드라이브의 OCR 기능으로 이미지에 있는 텍스트를 추출할 수 있습니다. 1. 구글 드라이브에 이미지를 업로드 합니다. 2. 텍스트를 추출할 이미지에 마우스 우클릭 후 연결 앱에서 Google 문서 선택 3. 새로운 창에서 추출된 텍스트를 확인할 수 있습니다.

드래그앤드롭, 리사이즈, 멀티터치 등의 기능을 제공하는 interactjs 입니다. https://interactjs.io/ 위 홈페이지에 접속시 하단에서 샘플 및 소스를 확인이 가능 합니다. 최신버전의 소스는 https://github.com/taye/interact.js 페이지를 통해 다운로드 할 수 있습니다. interact.js 소스 이용방법은 https://interactjs.io/docs/ 페이지에서 열람 하시고, 필요하신곳에 적용하여 이용 하시면 되겠습니다.

간단하게 웹페이지 내의 소스코드 하이라이팅을 쉽게 할 수 있는 highlightjs 입니다. highlightjs는 최대 196가지의 언어를 지원합니다. 참고로 이곳에 첨부된 소스 파일은 34종의 언어만 포함된 버전 입니다. 전체 언어에 대한 소스를 다운로드 받으시고자 하신다면 아래 페이지로 이동하여 원하는 언어를 클릭하여 하단의 다운로드 버튼을 통해 다운로드가 가능 합니다. https://highlightjs.org/download/ 혹은 CDN 서비스를 이용 할 수도 있습니다. 사용방법은 https://highlightjs.org/usage/ 페이지에서 확인 하실수가 있으며, 기본적인 사용방법은 간단 합니다. Javascript 와 CSS를 선언하고 하이라이팅이 필요한곳에 태그를 이용 하면 됩니다. ..

체크박스 버튼을 없이 카드를 선택할 수 있는 Checkbox card를 소개합니다. 선택되지 않은 상태에서 위 이미지처럼 이미지 색상이 흑백으로 출력됩니다. 카드를 선택하면 check 아이콘 및 라인이 나타나 선택된 것을 보여주며, 원래 이미지 색상이 출력됩니다. 체크박스, 라디오 버튼의 폼을 사용할때 참고하기 좋은 디자인 인거 같습니다. ^^

위 이미지 처럼 되어 있던 이미지들이 화면을 스크롤 하게 되면 위 이미지처럼 기울어져 화면이 울렁거리는 듯한 효과를 줍니다. 기본적으로 이미지가 출력되는 부분에 transform: skewY(0deg)로 설정되어 있으며, script 소스로 스크롤기 기울기 값을 각기 달리 부여해 이와 같은 효과가 만들어지고 있습니다. 해당 script 소스는 홈페이지 참고 해보실 수 있습니다. ^^