jquery 이미지 슬라이드, 웹용 제이쿼리 갤러리 만들기 - WOW Slider v2.5

jquery 이미지 슬라이드, 웹용 제이쿼리 갤러리 만들기 - WOW Slider v2.5

요약 : WOW Slider (웹용 이미지 슬라이드) v2.5 - 소개 및 사용법

테스트 환경 : 윈도우 7 얼티밋 K (32비트) 서비스팩1
제작 : http://wowslider.com/
라이센스 : 무료
작성자 : 해커 C
주의 : 실제와 다른 내용이 포함 될 수도 있음

안녕하세요? 해커 C 입니다.

간단하게 웹용 이미지 슬라이드를 만들어보는 하루 보내세요 ~ ^^

이번에 소개해 드릴 프로그램은 홈페이지나 블로그, 웹에서 사용되는 이미지 슬라이드를

제이쿼리를 이용하여 쉽게 제작할 수 있게 도와주는 WOW Slider 입니다.

홈페이지나 설치형태의 블로그를 운영하시는 분들께는 유용하게 사용될 거 같습니다.

WOW Slider (웹용 이미지 슬라이드) 시작합니다.

WOW Slider (웹용 이미지 슬라이드) - 실행파일과 설치경로

WOW Slider (웹용 이미지 슬라이드) - 실행파일과 설치경로


실행파일은 슬라이드 효과를 표현한듯한 아이콘을 사용한 것으로 보이네요. ㅎㅎ


기본 설치경로는 ( C:\Program Files\WOW Slider ) 입니다.




WOW Slider (웹용 이미지 슬라이드) - 기본UI

WOW Slider (웹용 이미지 슬라이드) - 기본 UI

여러 언어를 지원하긴 하지만, 아직 한국어는 지원되지 않습니다.

한국어가 지원되지 않지만, 사용에는 크게 무리 없을 거에요. ^^


WOW Slider (웹용 이미지 슬라이드) - 사진 불러오기와 옵션설정

WOW Slider (웹용 이미지 슬라이드) - 사진 불러오기와 옵션설정


[+] 버튼을 눌러서 컴퓨터에 저장된 사진을 불러오도록 합니다.

(사진 불러오기는 컴퓨터에 있는 사진 외에 특정 URL에 있는 사진도 불러올 수 있습니다.)


사진을 불러왔다면, 해당 사진을 클릭한 다음 하단부에 있는 옵션설정 창에서


타이틀과 이미지 클릭 시 이동 url, 그리고 타켓 설정을 할 수 있습니다.




WOW Slider (웹용 이미지 슬라이드) - 사진삭제, 순서변경

WOW Slider (웹용 이미지 슬라이드) - 사진삭제, 순서변경

[ - , ↑ , ↓ ] 버튼을 이용하면 사진삭제와 순서를 번경할 수 있습니다.


WOW Slider (웹용 이미지 슬라이드) - 슬라이더 설정

WOW Slider (웹용 이미지 슬라이드) - 슬라이더 설정


스패너 아이콘을 이용해도 되며 'Publish' 버튼을 이용해도 같은 옵션을 설정할 수 있습니다.


이전 사진, 다음 사진, loop 설정 등 슬라이더의 기본적인 옵션을 설정합니다.




WOW Slider (웹용 이미지 슬라이드) - 이미지효과 설정

WOW Slider (웹용 이미지 슬라이드) - 이미지 효과 설정


템플릿과 장면전환 효과입니다.


왼쪽에 있는 템플릿과 미리보기를 이용하여 슬라이드 효과를 선택할 수 있습니다.


오른쪽에 이미지 장면전환 효과도 따로 있으니 이용하시면 됩니다.




WOW Slider (웹용 이미지 슬라이드) - 슬라이드 크기

WOW Slider (웹용 이미지 슬라이드) - 슬라이드 크기


다른 건 기본옵션이나 기본템플릿을 이용해도 되지만,


슬라이드의 크기는 해당 슬라이드를 사용하고자 하는 곳의 사이즈에 맞게 선택을 해야겠죠??ㅎㅎ


원하는 사이즈가 목록에 없다면 "Custom size"를 선택하여 직접 입력하시면 됩니다.




WOW Slider (웹용 이미지 슬라이드) - 슬라이드 저장

WOW Slider (웹용 이미지 슬라이드) - 슬라이드 저장

슬라이드에 사용될 사진과 장면전환, 템플릿, 사이즈의 설정을 모두 마쳤다면

"Publish" 를 눌러서 슬라이드를 저장하시면 됩니다.


WOW Slider (웹용 이미지 슬라이드) - 완성 (파일생성)

WOW Slider (웹용 이미지 슬라이드) - 완성 (파일생성)


슬라이드 만들기를 완료하고 나면 다음과 같이 2개의 폴더와 1개의 HTML 파일이 생성됩니다.


이미지와 제이쿼리와 추가 스크립트가 들어 있는 폴더입니다.


HTML을 수정하여 자신이 사용하고자 하는 웹에 맞게 고쳐서 사용하시면 됩니다. ^^




WOW Slider (웹용 이미지 슬라이드) - 테스트

WOW Slider (웹용 이미지 슬라이드) - 테스트

완성된 슬라이드를 테스트해보았습니다.

기본 템플릿과 작은 사이즈를 이용했습니다.

이전 사진, 다음 사진, 정상작동하며 사진전환 효과도 잘 작동합니다.

WOW Slider (웹용 이미지 슬라이드).. 블로그나 홈페이지를 운영하시는 분이라면

사용해보시게 되면 더 예쁘고 화려하게 웹페이지를 꾸밀 수 있을 거에요. ㅎㅎ

오른쪽 하단부에 워터마크가 생성이 되는 게 아쉽긴 하지만, 라이센스를 구매하거나

편법이긴 하지만 html과 스크립트를 보실 줄 알면 간단하게 제거할 수 있긴 하지만,

이 부분은 저작권위반으로써 공개하지 않겠습니다. ^^;;

요즘 카페나 홈페이지, 블로그에서 슬라이드 이미지를 많이들 사용하시는 거 같아서,

html과 스크립트, CSS를 다루기 어려우신 분께는 유용할 거 같습니다.

항상, 이미지 슬라이드를 이용하여 더욱 멋진 웹페이지를 만들 수 있게 도와주시는,

WOW Slider (웹용 이미지 슬라이드) 개발자 (관계자) 여러분 진심으로 감사합니다.

다운로드 라이센스는 "무료" 입니다.
WOW Slider의 저작권 보호를 위해 제작사 홈페이지로 이동합니다.