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

* ResponsiveSlides 소개 - ResponsiveSlides.js 는 컨테이너 안의 요소를 사용하여 반응 형 슬라이더를 만드는 jQuery 플러그인입니다. Microsoft의 Build 2012 및 Gridset App 과 같은 사이트에서 사용되었습니다 . ResponsiveSLides.js는 IE6 이상의 모든 IE 버전을 포함하여 다양한 브라우저에서 작동합니다. 또한 IE6 및 기본적으로 지원하지 않는 다른 브라우저에 대한 CSS 최대 폭 지원을 추가합니다. * License - MIT license * 사용방법 - 첨부된 압축파일을 원하는 웹디렉터리에 업로드후 압축을 해제합니다 - js 파일을 링크합니다 - 마크업을 추가합니다 - css 를 추가합니다 - 슬라이드쇼를 연결하고 웹페이지를..

Zoom In, Zoom Out, Slide, Rotate, Blur, Gray Scale, Sepia, Blur + Gray Scale, Opacity, Flashing, Shine, Circle 다양한 이미지 마우스 오버 효과입니다. 원하는 효과의 클래스만 적용하면 바로 사용이 가능합니다.

jQuery를 이용한 포토 슬라이드 구현 소스이며, 다양한 옵션 제공으로 손쉽게 사용이 가능합니다 비교적 간단한 소스 삽입만으로도 이용이 가능합니다. 하단의 작은 미리보기 이지미 기능과 메인 이미지 마우스 오버시 좌우 이동버튼도 활성화 됩니다. 화면 해상도에 따라서 자동으로 제어가 되며 반응형으로 제작되어 다양한 디바이스에 활용이 가능합니다.

열고 닫기 버튼을 통해 레이어를 닫고 열수 있습니다. css 만으로 작동하는 소스로 소스를 다운로드 받으실 수 있습니다.

* flexisel 소개 - 반응형 회전식 슬라이드 쇼 jquery plugin * License - MIT License * 이용방법 - 이용방법은 간단합니다 첨부된 압축파일을 다운받아 해제하여 필요한 jquery, js, css 파일을 작업해야될 페이지에 옮겨놓습니다 추가되는 코드는 jquery , js, css 파일 선언부와 슬라이드되어야될 영역별 코드 삽입 스크롤이 정상적으로 작동될 수 있도록 jquery window load 이벤트를 연결하여 flexisel 스크립트를 삽입할 수 있도록 합니다 flexisel 가 실행되고 설정할 수 있는 옵션은 무한스크롤, 자동스크롤, 간격설정, 이동속도, 보여져야될 이미지 개수 등이 있으며 좀 더 자세한 옵션내용의 확인은 첨부된 파일 README.md 문서를 ..

매끄러운 슬라이드를 종류별로 확인할 수 있습니다. 또한 사용소스도 간단해 초보자도 쉽게 다룰수 있습니다. 예제를 쭉 본후 하단의 다운로드 나우 버튼을 클릭해 다운받아 응용해보세요! 더 많은 예제가 있지만 4가지만 캡쳐해드립니다. 화살표 클릭시 하나씩 이동합니다. 실행소스 $('.single-item').slick(); 한번 클릭시 3개씩 이동합니다. 실행소스 $('.multiple-items').slick({ infinite: false, slidesToShow: 3, slidesToScroll: 3 }); 한번 클릭시 4개씩 이동합니다. 실행소스 $('.responsive').slick({ dots: true, infinite: false, speed: 300, slidesToShow: 4, slide..

* Jquery Slideshow Feature List 소개 - Jquery 로 제작된 Slideshow 이며 슬라이드 탭에 대한 설정과 마우스가 영역으로 이동되었을때 애니메이션에 대한 작동여부, 슬라이드탭에 대한 전환시간에 대한 설정이 가능합니다 Jquery 1.3 버전이상 이용할 수 있습니다 * 설치 및 사용방법 - 첨부된 압축파일을 원하는 웹서버에 공간에 다운로드하여 압축을 해제하고 jquery 파일과 슬라이드에 필요한 js를 아래와 같이 선언합니다 탭메뉴의 동작을 할수있게 슬라이드 함수를 및 탭 아이디값과 탭이동시 보여줘야될 영역에 대한 id 값을 선업합니다 탭메뉴와 슬라이드 영역에 대한 id값 선언과 내용을 작성하여 완성합니다

jquery를 이용해서 제작된 다양한 효과를 가진 슬라이드 입니다. 첨부파일을 다운로드 받아서 압축을 해제한후 examples/index.html examples/multiple.html examples/numbers.html examples/thumbs.html 위 파일들을 웹브라우저로 열어보면 슬라이드 효과를 확인할수 있습니다. 다양한 애니메이션 효과를 선택할수 있네요. 한페이지에 여러개의 슬라이드를 이용하는 예제입니다. 슬라이드의 네비게이션을 숫자를 쓰거나, 작은사진을 이용하는 예제입니다. 출처는 https://skitter-slider.net/ 입니다.

패널형 슬라이드 배너로 랜딩페이지 또는 이벤트 페이지 제작에 유용할것 같으며 반응형으로 만들어져 있습니다. PC 모바일 각 각의 패널 타이틀을 누르게되면 해당 패널에대한 상세 내용을 확인할 수 있습니다. 우측의 카테고리 메뉴같이 생긴 버튼을 누르시면 텍스트 형태의 메뉴도 확인할 수 있습니다. 링크페이지에서 자료를 다운로드 받으실수 있으며 view demo를 클릭하시면 상세히 확인하실 수 있습니다. 파일을 다운받아보시면 html파일과 리셋 css, 디자인css , 관련 js로 구성되어 있으며 파일 편집을 통하여 다양하게 이용하실 수 있습니다.