목록javascript (60)

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

[해피CGI][cgimall] Javascript 이미지 CSS 필터 편집기

Javascript 를 이용하여 이미지의 필터를 설정할 수 있는 프로그램을 소개합니다. # 장점 1. 대화형 CSS 이미지 필터 편집기를 만들 수 있습니다. 2. 버튼과 슬라이더를 사용하여 다양한 이미지 필터를 적용할 수 있는 사용자 친화적인 인터페이스가 제공합니다. 3. 밝기, 대비, 채도와 같은 매개변수를 조정하여 이미지를 창의적으로 수정할 수 있습니다. 4. 슬라이드를 통해 즉각적인 적용 효과를 확인할 수 있습니다. # 사용법 압축파일 해제하시면 index.html , index2.html 파일이 있습니다. index.html 파일은 데모로 제공되는 파일입니다. index2.html 파일은 간략하게 축소한 버젼의 파일 입니다. 실제로 사용해보니 필터를 자주 사용하시는 경우 사용하면 좋을것 같습니다...
웹프로그램밍 자료실/JAVA 자료 2024. 2. 21. 09:08
[해피CGI][cgimall] Classic Animated Directory Tree Plugin with jQuery - dTree

dTree는 부드러운 CSS3 전환으로 고전적인 접기/디렉토리/파일 트리 보기 구조를 만들기 위한 간단한 경량 jQuery 플러그인입니다. Cookie는 웹 페이지를 새로 고칠 때 오픈 상태를 기억할 수 있도록 지원합니다. 다운로드 받은 파일의 압축을 해제한 뒤, index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 폴더 아이콘 좌측에 있는 + 를 눌러서 펼쳤다가, 접었다가 할수 있습니다. 펼치고, 접어지고 하는 사이에 애니메이션이 있습니다. 사용방법은 아래와 같습니다. 쿠키를 이용해서, 새창을 열었을때 펼쳐놓은 폴더를 유지시켜줍니다.
웹프로그램밍 자료실/JAVA 자료 2023. 11. 28. 09:13
[해피CGI][cgimall] Dynamic Customizable Range Slider Plugin - jQuery rangeRover

범위를 선택하기 위한 슬라이더를 화면에 표시하는 jquery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 데모를 확인하는게 가능합니다. 사용방법은 아래와 같습니다. 페이지에서 범위 값을 선택하도록 하기 위한 인터페이스를 만들때 사용하면 괜찮을 것 같네요.
웹프로그램밍 자료실/JAVA 자료 2023. 2. 22. 09:09
[해피CGI][cgimall] FlexBox Exercise #3 - Image carousel 이미지 슬라이드 소스

우측하단 좌우 화살표 버튼을 클릭하시면 좌측 문구와 우측 이미지가 에니메이션 슬라이드 효과와 함께 변경됩니다. 끝까지 이동시 다시 처음부터 반복합니다. 웹사이트 메인페이지에서 유용하게 사용이 가능해 보입니다. 자바스크립트 소스입니다. 이미지 에니메이션 효과 뿐만 아이라 좌측 문구 영역도 별개의 에니메이션 소스로 작동됩니다. css 를 수정하시면 쉽게 변경이 가능합니다. 첨부파일을 다운로드하시거나 해당 사이트에서 소스를 확인할 수 있습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 2. 21. 09:12
[해피CGI][cgimall] 그리드 스크롤을 만들어주는 gridscrolling.js

웹페이지를 키보드 화살표 키를 따라 가로 세로로 이동하게 만들어 주는 js 입니다. 해당 js 를 받아 선언하고 위와 같이 초기화 해주면 사용 끝입니다. 페이지 구성은 세로로는 section 태그를 가로로는 aside 태그를 사용하여 디자인 하면 됩니다. 위와 같은 옵션도 제공합니다. 이미지 전시와 같은 페이지를 구상한다면 참 좋은 js 입니다.
웹프로그램밍 자료실/JAVA 자료 2023. 2. 1. 09:26
[해피CGI][cgimall] 이미지 크기 조정 및 자르기 JQuery 플러그인 - cropimage

- 라이센스 MIT - 사용 방법 1. 정보 및 이미지 자르기 컨테이너를 만듭니다. 2. 자르기를 실행할 버튼을 추가합니다. 3. JQuery 라이브러리와 cropimage.js 파일을 불러옵니다. 4. 자르기 컨테이너에서 플러그인을 호출하고 자르기 원하는 이미지는 지정합니다. 5. 잘라낸 이미지를 페이지에 표시합니다. 6. 옵션을 변경할 수 있습니다. - 작동 예제
웹프로그램밍 자료실/JAVA 자료 2023. 1. 18. 09:37
[해피CGI][cgimall] 쉽고 빠른 숫자 콤마 처리 jQuery 플러그인

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 Jquery.number.format.js 파일을 호출합니다. 2. 숫자 값 앞/뒤로 붙일 화폐 표시도 설정할 수 있습니다. 3. 천 단위에 기분 기호를 지정할 수 있습니다. 기본값 : 콤마(,) 4. 소수점 이하 숫자를 지정된 자리수만큼만 표시할 수 있습니다. 기본값 : 2 5. 소수점 이하 숫자를 지정된 소수 자릿수로 반올림 할 수 있습니다. 기본값 : true 6. 소수점 구분 기호를 지정할 수 있습니다. - 작동 예제
웹프로그램밍 자료실/JAVA 자료 2023. 1. 17. 09:07
[해피CGI][cgimall] Slick Slider with auto play YouTube, Vimeo and HTML5 video 동영상 슬라이드

고정된 이미지 vimeo 동영상 youtube 동영상 이미지 또는 자동재생되는 동영상을 슬라이드 되는 형태로 출력합니다. 정해진 가로 세로 비율에 따라 출력됩니다. 첨부된 파일을 다운로드 하거나 해당 사이트에서 전체 소스를 확인할 수 있습니다. css 로 슬라이드시 에니메이션 효과를 변경할 수 있습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 1. 16. 09:06
[해피CGI][cgimall] Responsive Touch-enabled Image Lightbox Plugin

데스크톱 및 모바일 웹 사이트에서 이미지 라이트 박스 및 갤러리 라이트 박스를 만들 수 있습니다. 첨부된 파일을 다운로드 해서, 압축을 해제하고 나면 demo 라는 폴더가 있습니다. demo 폴더에 있는, demo/index.html 파일과, demo/onlyImages.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 위 와 같은 화면이 표시가 되고, 우측의 이미지를 클릭 해보면, 위 그림과 같이 이미지를 슬라이더로 표시하는 기능을 확인하는게 가능합니다. 사용법은 아래와 같습니다. 지원되는 옵션들은 다양하며, 반응형 터치 지원 이미지 라이트박스 플러그인 | 무료 jQuery 플러그인 (jqueryscript.net) 위 페이지에서 확인이 가능하겠습니다. 그 외의 method 및 event 는 아..
웹프로그램밍 자료실/JAVA 자료 2023. 1. 5. 09:25
[해피CGI][cgimall] 드래그앤드롭 으로 크기조정, 확장, 회원이 가능한 JavaScript 라이브러리 Moveable

드래그앤드롭 으로 크기조정, 확장, 회원이 가능한 JavaScript 라이브러리 Moveable 드래그 이동, 사이즈 조절, 회전, 각 조절, 핀치 터치를 이용한 회전 및 사이즈조절 선택, 클립마스크, 라운드조절 등 다양한 기능이 제공됩니다. 사용자 정의 설정을 통해 각 기능별 사용여부도 조절 가능합니다. 웹을 통해 편집하는 플랫폼에서는 아주 유용하게 사용이 될꺼 같네요.
웹프로그램밍 자료실/JAVA 자료 2022. 12. 26. 09:10
Prev 1 2 3 4 ··· 6 Next