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

반응형 기반의 회전식 슬라이드 및 터치식 슬라이드 등 다양한 효과의 슬라이드 jquery 플러그인 소스입니다. 터치 앤 드래그 및 최신 브라우저에 호환성이 높은 소스입니다. 예시된 샘플 슬라이드 효과는 대략 10여종이며, 기본적인 슬라이드 형식은 아래와 같습니다. 최근 홈페이지에 자주 이용되는 마우스 휠 슬라이드 효과가 있어 해당 소스를 이용한 효과를 참고하시기 바랍니다. https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html 우선 기본베이스가 되는 슬라이드 소스를 html 에 삽입후 ​ 라는 소스를 적용하여 마우스 휠 소스가 적용되도록 합니다. 혹은 다운로드 받은 소스에서 docs > demos 폴더내에 mousewheel.html 파일을 ..

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

popModal은 jQuery 플러그인을 이용하여 ​툴팁, 제목, 모달, 대화상자, 확인 팝업 모달을 만들수 있습니다 1.jQuery 가 필요 합니다. 2.css 와 popModal.min.js 파일을 호출하세요. 3.버튼을 생성하여 모달 클릭할 준비하세요. 4.버튼을 클릭하면 생성될 모달을 만들어주세요. 위의 방법이 기본적인 모달 생성 방법 입니다. 다양한 옵션이 존재 하네요. 유의사항 popModal 을 이용하여 동적모달을 생성할 수 있습니다. 하지만 로컬 형태에서는 작동하지 않으니 웹에서 테스트 해 보셔야 합니다. 그리고 라이센스는 MIT 라이센스 입니다. ​

다운로드 받은 압축파일을 해제한후, index.html 파일을 웹브라우저로 열어서 보면 샘플을 확인하는게 가능합니다. 위 그림과 같은 탭메뉴를 화면에 표시해줍니다. 웹페이지에 탭메뉴를 구현해 둔 자바스크립트와, HTML소스코드는 예제가 매우 많지만, 탭메뉴의 개수, 적용되는 효과, 작동하는 이벤트 등의 이유로 다소 이용하기에 복잡한게 많습니다. 이 프로그램은 비교적 간단하게 사용할 수가 있어서 유용할것 같네요. 1. 위와 같이 ul, li 태그로 탭메뉴 부분을 만들고, 각 탭에 연결되는 컨텐츠를 코딩합니다. 2. jquery 와 tabs.js 가 로딩되도록 위 태그를 넣어줍니다. ​ ​3. ul 태그에 지정한 id 를 이용해서 위와 같은 스크립트로 탭메뉴를 활성화 시킬수 있습니다. 심플한 만큼 다양한 기..

- 라이센스 MIT - 사용 방법 1. 파일 상단에 star-rating-svg.css 파일을 불러옵니다. 2. 별점을 노출할 빈 DIV 객체에 jq-stars 클래스를 걸어줍니다. 3. 파일 상단에 JQuery 라이브러리와 jquery.star-rating-svg.js 파일 링크를 걸어줍니다. 4. 별점을 노출할 빈 DIV 객체에 플러그인을 호출합니다. 5. 플러그인 상세 옵션 및 Method, Event는 사이트 링크를 참고하세요. - 작동 예제

- 라이센스 MIT - 사용 방법 1. 파일 상단에 JQuery 라이브러리와 slectrange.js 파일 링크를 걸어줍니다. 2. 옵션이 없는 셀렉트박스 객체를 추가합니다. 3. 각 객체에 min, max 값을 조절하여 selectRange 플러그인을 호출합니다. - 작동 예제 ​ ​ ​

태블릿 및 모바일 장치에서 스와이프 이벤트를 이용해서 스크롤 할수 있는 jquery 스위퍼 플러그인입니다. ​ ​다운로드 받은 압축파일을 해제해서 examples/index.html examples/carousel-css3.html 두개의 파일을 웹브라우저로 열어보면 확인이 가능합니다. ​ 모바일이나 태블릿에서 스와이프 이벤트를 이용해서 컨텐츠를 상,하,좌,우 스크롤링 할때 적당합니다. 이런 화면을 제작하는 방법이 일단 많은 컨텐츠를 먼저 만들어야 해서, 조금은 까다로운 편인거 같네요. 특이사항으로는 swipescroll 을 생성할 때 지정할 수 있는 몇가지 옵션이 있습니다. 그 외에는 스와이프 이벤트중과, 이벤트의 헨들러가 있네요 태블릿이나, 모바일 기기에서 많은 컨텐츠를 표시해야 할 때 유용해 보입니..

반응형 이미지 갤러리로 클릭시 모달창으로 이미지가 표시되며,제한된 그림 요소에 대해 유사한 반응 이미지 방식을 사용하는 이미지 갤러리를 만들어 줍니다. 브라우저 크기에 따라 반응형으로 이미지 갤러리가 정렬됩니다. 클릭시 이미지 썸네일이 슬라이딩으로 처리되는 형태의 모달창으로 구현됩니다. 핵심소스인 와 하단에 소스 및 설정 스크립트 부분을 설정하여 제어가 가능합니다.

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 플러그인입니다. 다운로드 받은 파일의 압축을 해제하고 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 기본 셀렉트박스의 스타일을 조절해서 각 옵션들 마다 이미지, 옵션값, 타이틀값 등을 이용해서, 셀렉트박스를 이용해서 옵션을 선택시 아래 그림 처럼 표시할수 있습니다. HTML 태그랑 비교해보면, option 태그에 몇가지 정해둔 속성들을 이용해서 제어하는게 가능해보입니다. 검색어를 이용해서 많은 옵션들 중에 선택하고자 하는 옵션을 쉽게 찾아내는 기능을 구현하는것도 가능하네요. 여러개의 옵션을 다중으로 선택하는 multiple 셀렉트박스도 도 위 그림과 같이 검색어를 입력해서 옵션을 찾아내거나, 어떤 옵..