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

- 라이센스 MIT - 사용 방법 1. 파일 상단에 아이콘 디자인 파일을 로드합니다. 그리고 Jquery 라이브러리와 dRawr 라이브러리를 로드합니다. 2. HTML5 canvas 객체를 생성합니다. 3. dRawr 플러그인을 호출하고, 그리기 모드를 활성화합니다. 4. 사이즈 조절 및 각종 옵션과 기능들은 사이트 상세 내용을 참고하세요. - 작동 예제

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

다운로드 받은 압축파일을 해제한뒤에, index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. index.html 파일을 웹브라우저로 열면, 위 그림과 같은 화면이 나옵니다. 카메라가 있는 부분을 클릭해보면 파일을 선택하는 탐색기가 열리고 이미지 파일을 선택을 해보면, 위 그림과 같이 선택한 이미지 중에 일부를 선택할 수 있는 화면이 표시가 됩니다. 적당히 사용하고 싶은 범위를 지정해서, 우측의 확인 모양의 아이콘을 눌러보면, 원본 이미지에서 선택한 부분만을 잘라서 화면에 표시를 해줍니다. 서버의 자원을 이용해서 업로드 된 이미지를 편집하는게 아니므로, 이미지 파일의 전체 데이터에서 필요한 만큼만 선별해서 입력받기 위한 용도로 활용이 가능해보이네요.

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 css 파일, bcPaint.js 파일을 로드합니다. 2. 그림판이 표시될 오브젝트를 추가합니다. 3. bcPaint 플러그인을 호출합니다. 4. 기본 색상이나 컬러셋을 수정할 수 있습니다. - 작동 예제

해피CGI, #happycgi, #cgimall, #JQuery, #image, #zoom, #이미지확대 - 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 xzoom.css 파일, xzoom.min.js 파일을 링크합니다. 2. IMG 태그로 이미지를 출력하고 아래 옵션을 적용합니다. · xoriginal - 확대/축소된 이미지로 사용되는 큰 이미지 경로 · xpreview - 선택 사항이지만 설정 시 이 속성은 중간 미리보기 이미지로 사용되는 반면 이 경우 src 속성은 작은 축소판 이미지로 사용됩니다. 이 속성이 설정되어 있지 않으면 src 속성이 중간 미리보기 이미지로 사용됩니다. · xtitle - 캡션으로 사용될 텍스트 문자열이며 titleClass가 있는 "div" ..

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 jquery.fixedTableHeader.js 파일을 링크합니다. 2. Table 소스코드를 코딩하고, fixedTableHeader 플러그인을 호출합니다. 3. 고정될 헤더 부분을 지정합니다. (기본값 : th) 4. 고정되었을 때 헤더 부분의 CSS를 재정의할 수 있습니다. - 작동 예제

모바일용 웹페이지를 제작할 때 상단 부분에 세줄(햄버거)이 화면을 스크롤(스와이프) 할때 숨기거나, 표시해주는 jQuery 플러그인입니다. 스크롤을 내려보면 상단에 세줄 모양의 바가 화면 스크롤을 따라서 내려오거나, 스크롤을 빠르게 내리는 경우 상단의 바가 화면에서 사라집니다. 햄거버 모양의 아이콘 외에 로고, 그 외의 아이콘 들이 추가된 예제입니다. 햄버거바를 클릭하면 메뉴 화면이 열리면서 햄버거 모양의 아이콘이 닫기를 의미하는 아이콘으로 변경시 에니메이션을 주는 예제입니다. 그 외에도 햄버거 바의 위치를 좌에서 우로 조절을 한다거나, 로고를 포함한다거나, 아래 그림 처럼 검색폼이 포함된 예제가 있습니다.

Morioh Theme는 jQuery 및 Bootstrap 프레임 워크 위에 구축 된 반응 형 대시 보드 (관리자 패널) 템플릿 입니다. Bootstrap 5 및 Bootstrap 4 모두에서 작동합니다 . 웹 및 모바일 애플리케이션, 웹 사이트 백엔드 및 전자 상거래 관리 포털과 같은 백엔드 애플리케이션에 적합합니다. 쇼핑몰 사이트와 같은 전자상거래용 사이트의 관리자모드를 구성하기에 사용할 만한 HTML 템플릿 입니다. jquery + bootstrap 프레임워크를 이용했기에 호환성이나 확장성면에서는 괜찮을 것 같네요. 위 그림은 메인화면의 템플릿입니다. 좌측의 메뉴를 이용해서 다양한 인터페이스를 미리 확인해볼수 있습니다. 반응형이다 보니 접속하는 기기의 해상도에 따라서, 위 그림 처럼 컨텐츠의 배치가..

Images grid jQuery plugin 는 반응 형 이미지 갤러리를 만들기위한 jQuery 플러그인입니다. 적용방법은 첨부된 압축파일을 다운받은후 적용하실 웹문서 html 파일을 열어 아래의 코드들을 응용하여 적용해 주시면 되겠습니다 먼저 html 웹문서에 script , css 를 선언해줍니다 그리고 썸네일 이미지를 호출하고 모달 팝업형태로 보여줄수 있게 아래의 코드와 같이 id값이 적용된 div 태그와 스크립트에 이미지 경로를 적용해주면 출력되는것을 확인하실 수 있습니다

kcToggle은 기본 브라우저 checkbox 설정을 jQuery 플러그인으로 대체합니다. 적용방법은 다음과 같습니다 첨부된 압축파일을 다운받아 원하는 웹디렉터리에 업로드후 html 웹문서에 적용을 하면 되며 아래와 같이 스크립트 호출후 아래와 같이 checkbox 태그 마지막에 kcToggle 을 붙여주면 변환되며 사용이 간편합니다 디자인 변경이 필요한 경우 첨부파일에 있는 kcToggle.css 를 수정하시면 되겠습니다