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

다음이미지로 넘길경우 이미지가 타일처럼 사각으로 나뉘어져 스페셜하게 변환됩니다. 변환전 변환시 - 이미지가 사각으로 쪼개어져 변경됩니다. 압축된 파일을 풀면 폰트 및 CSS, IMG파일과 JS, html 파일을 확인할 수 있습니다.

jquery 를 이용해서 이미지를 슬라이드 시켜주는 스크립트 입니다. 다운로드 받은 파일의 압축을 풀어서 FeaturedContentSlider/index.html 파일을 웹브라우저로 열어 보면 어떻게 슬라이드가 되는지 확인이 가능합니다. HTML의 구조와, CSS를 어떻게 적용해야 하는지, 자바스크립트는 어떻게 코딩해야 할런지를 아래의 페이지를 통해서 가이드를 주고 있네요. http://www.htmldrive.net/items/show/149/Slick-Auto-Playing-Featured-Content-SliderjQuery- 샘플로 제작된 HTML 및 CSS역시 가이드와 비슷하네요. 사진 부분, 사진 아래 설명문구(까만색배경) 설명문구 아래 작은 사진 부분등을 이용해서 위 그림과 같은 이미지 슬..

이미지를 슬라이드 할수 있는 스크립트입니다. 다운로드 받은 파일의 압축을 풀어서 index.html 을 웹브라우져로 열어보시면 됩니다. 지원하는 기능이 몇가지가 있는데, 1. 마우스와, 터치 이벤트에 의해서 이미지가 슬라이드 되는 기능 2. 이미지와 HTML태그를 섞어도 슬라이드가 되는 기능 3. 슬라이드 자체의 크기를 비율에 맞게 조절되는 기능 4. 슬라이드의 모든 부분을 편집하거나, 비활성화 하는 기능 이미지 + HTML 컨텐츠로 슬라이드가 되는 예제 화면크기에 맞춰서 사이즈가 조절되는 예제라는데 확인이 되지는 않네요.. 스마트폰기기로 접근해보면 달라지려나 싶긴 하네요. 슬라이드가 작동이 되는 세부기능들이 조절하는 것이 가능한 예제 슬라이드가 자동으로 전환되는 주기, 1번에서 2번으로 전환되는데 까지..

https://www.youtube.com/watch?v=_Ww8GxozMco 위의 유투브 링크로 해당 기능을 영상으로 확인 가능합니다. 설치 방법은 아래와 같습니다. 1. blueimpgallery.zip 파일을 압축을 풉니다. 2. blueimpgallery 폴더를 ckeditor / plugins 안에 복사합니다. 3. ckeditor / config.js 파일을 엽니다. 4. config.extraPlugins = 'widget,lineutils,blueImpGallery'; config.filebrowserBrowseUrl = '/browser/browse.php'; config.contentsCss = 'https://blueimp.github.io/Gallery/css/blueimp-gall..

이미지를 슬라이드 할수 있는 스크립트입니다. 다운로드 받은 파일의 압축을 풀어서 index.html 을 웹브라우져로 열어보시면 됩니다. 지원하는 기능이 몇가지가 있는데, 1. 마우스와, 터치 이벤트에 의해서 이미지가 슬라이드 되는 기능 2. 이미지와 HTML태그를 섞어도 슬라이드가 되는 기능 3. 슬라이드 자체의 크기를 비율에 맞게 조절되는 기능 4. 슬라이드의 모든 부분을 편집하거나, 비활성화 하는 기능 이미지 + HTML 컨텐츠로 슬라이드가 되는 예제 화면크기에 맞춰서 사이즈가 조절되는 예제라는데 확인이 되지는 않네요.. 스마트폰기기로 접근해보면 달라지려나 싶긴 하네요. 슬라이드가 작동이 되는 세부기능들이 조절하는 것이 가능한 예제 슬라이드가 자동으로 전환되는 주기, 1번에서 2번으로 전환되는데 까지..