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

고정된 이미지 vimeo 동영상 youtube 동영상 이미지 또는 자동재생되는 동영상을 슬라이드 되는 형태로 출력합니다. 정해진 가로 세로 비율에 따라 출력됩니다. 첨부된 파일을 다운로드 하거나 해당 사이트에서 전체 소스를 확인할 수 있습니다. css 로 슬라이드시 에니메이션 효과를 변경할 수 있습니다.

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

슬라이더를 이용하여 범위를 설정할 수 있습니다. 싱글, 듀얼 타입과 옵션으로 세로형 슬라이더도 있습니다. 라이센스 : MIT 구성요소 : HTML, CSS, JavaScript(+jQuery) 옵션은 아래와 같습니다. 1. roots : 슬라이더 선택합니다. 2. type : range 또는 빈값으로 선택합니다. range 는 듀얼 빈값은 싱글 3. direction : vertical 또는 빈값으로 선택합니다. vertical 는 세로형 빈값은 가로형 4. rangeValue : minValue 과 maxValue 을 셋팅할 수 있습니다. minValue 최소값 maxValue 최대값

데모상 1~100번까지의 영역을 슬라이더에 적용되어있으며, 해당 지정된 영역만큼의 슬라이더 객체수를 만들어 보여줄수 있는 슬라이더 소스입니다. 데모소스에서 index.html 파일내에 스크립트 소스중 total 갯수를 수정하시면 원하시는 영역만큼 지정되게 됩니다. 현재는 단순한 값의 번호만을 변경할 수 있습니다만 위 소스를 응용하여 다양한 이미지 및 효과등을 구현할수도 있을거라 보여지네요.^^