작성일자
카테고리 Javascript/JQuery


제이쿼리 이미지 슬라이더 배너를 자동으로 만들어주는 무료프로그램을 소개합니다. 개인용으로 무료이고 이미지 하단에 제작자의 로고가 첨부되지만 상당히 좋은 프로그램입니다. 12개의 템플릿과 12개의 슬라이더 배너를 선택할 수 있으며 CSS를 조정하면 이미지도 자유롭게 원하는 크기로 설정할 수 있습니다. 이만한 프로그램이 개인용으로나마 무료라는게 믿어지지 않을 정도로 상당히 좋습니다. 제 블로그에 오랫만에 배너를 바꾸려고 작업했는데 제이쿼리가 많이 설치돼서 그런지 버벅거리더군요. 특히 인터넷 익스플로러에서는 상당히 버벅거립니다. 그래서 제거했습니다. 

이곳 을 클릭하면 해당 사이트로 이동합니다. 12종류의 데모를 확인해보시고 하단에 Free Download버튼을 클릭합니다. 윈도우버전과 맥버전이 가능하며 유료인 경우 1개 사이트용이 49달러, 무한 사용가능이 69달러입니다. Free Edition 버튼을 클릭하면 이름과 이메일 주소를 입력하는 창이 나옵니다. 이름은 적당한 이름을 입력하고 이메일 주소는 정확이 입력한 다음 Download Now 버튼을 클릭하면 내 이메일로 다운로드할 수 있는 링크가 보내집니다.

 
자신의 컴퓨터에 맞는 OS를 선택해서 링크를 클릭하면 실행파일이 다운로드 됩니다. 찾기 쉬운 폴더에 저장하고 파일을 더블클릭하면 설치됩니다. 사용법은 아주 간단합니다.


프로그램을 실행하면 창이 나옵니다. 우선 포토샵으로 배너로 사용할 여러개의 이미지를 같은 크기로 잘라놓은 다음 특정 폴더에 저장해 놓습니다. 1의 플러스 아이콘을 클릭하면 브라우저창이 나옵니다. 저장한 이미지가 있는 폴더로 이동하여 첫 이미지를 클릭하고 Shift키를 누른채 마지막 이미지를 선택해서 전체 이미지를 선택하고 Open버튼을 클릭하면 위처럼 빈 공간에 이미지가 나타납니다. 2의 스패너아이콘을 클릭하면 다음과 같은 창이 나옵니다.


1의 란에 적당한 이름을 입력합니다. 처음에 설정된 대로 그대로 놔두면 되고 9를 클릭하여 썸네일을 볼수 있는 메뉴아이콘의 위치를 정합니다. 각 부분의 내용은 다음과 같습니다.

2는 슬라이드가 자동반복할 수 있습니다. 3은 이미지에 마우스오버시 애니메이션이 정지됩니다. 4는 한번의 전체이미지 애니메이션이 실행되고 반복되지 않습니다. 5는 이미지 설명을 보이게 합니다. 6은 이전, 다음 버튼을 보이게 합니다. 7은 블릿 네비게이션을 보이게 합니다. 작은 버튼형태의 이미지입니다. 클릭하면 썸네일 이미지가 나타납니다. 10은 이미지 프레임과 그림자를 제거합니다.

11의 Images아이콘을 클릭하면 다음창으로 넘어갑니다.


1에서 하단의 이미지를 보면서 템플릿을 선택합니다. 버튼 아이콘과 내비게이션의 위치 설명이미지의 위치가 각각 다릅니다. CSS를 변경하면 안보이게 하거나 위치를 변경할 수 있습니다.
2를 클릭하여 정해진 이미지 사이즈를 선택할 수 있고 대부분의 경우 Custom size를 선택해서 자신의 이미지 사이즈를 3에 입력합니다. 4에서 6은 포토샵에서 이미지 사이즈를 정했으니 필요없는 설정이지만 이미지 사이즈가 각각 다른 경우 축소시키거나 확대할 수 있는 기능입니다. 7에서 이미지의 품질을 정합니다. 8은 애니메이션의 종류입니다. 총 12종이며 선택을 하면 9에서 사용예가 나옵니다. 10은 슬라이드 사이의 간격 시간입니다. 하나의 슬라이드가 끝나고 다음 슬라이드가 나올때까지의 시간이죠. 11은 애니메이션이 실행되는 시간입니다. 12를 클릭하면 워트마크 즉 제작자의 로고가 보이지 않게 하는 링크인데 구매하는 사이트로 이동합니다. 다 설정이 되면 13의 Publish 아이콘을 클릭합니다.

 
1의 브라우즈 버튼을 클릭하여 저장할 폴더를 선택합니다. 2는 그대로 사용해도 되고 파일의 이름을 바꿀 수도 있습니다. 3에 체크하면 FTP로 서버에 보낼 수도 있고 4에 체크하여 웹 페이지에 삽입도 가능하며 5에서 줌라나 워드프레스용 모듈로 만들 수 있습니다. 6에 체크하고 7의 버튼을 클릭하면 기본 웹브라우저에 실행이 되면서 나타납니다.


만드는 것은 쉬운데 블로그나 사이트에 설치하려면 구조를 알아야합니다. 저장폴더를 열면 두개의 폴더와 index파일이 있습니다. data1폴더에는 포토샵에서 만든 이미지들이 새로 저장됩니다. tooltips폴더는 내비게이션 아이콘에 마우스오버시 나타나는 작은 이미지인 썸네일이 있는 폴더입니다. engine1폴더에선 애니메이션이 실행되는 제이쿼리 파일과 아이콘, CSS 스타일시트 파일이 있습니다. jquery.js파일은 제이쿼리 라이브러리로 구글의 제이쿼리 라이브러리 를 사용하면 더 좋습니다. 파일의 이름들이 이미 사용되고 있는 파일들과 유사해서 서로 중복될 수 있으므로 파일명을 바꿔주고 html파일에서도 경로를 바꿔주는 것이 좋습니다. wowslider.js는 괜찮으나 style.css는 아주 많이 쓰이는 스타일시트 파일명이므로 앞에 wowslider를 붙여주는 것이 좋습니다. script.js도 마찬가지입니다. 일반 사이트에 사용하는 경우는 engine1폴더를 그대로 저장하면 파일명이나 경로를 변경할 필요는 없지만 블로그의 경우는 저장 폴더가 images폴더 하나이므로 파일명에 신경을 많이 써야합니다. 


index파일을 에디터에 열면 간단한 구조입니다. 링크에 스타일시트가 있고 제이쿼리 라이브러리, 와우슬라이더 제이쿼리 플러그인이 head태그에 위치하고 script.js파일은 슬라이더 콘테이너 div의 하단에 위치합니다. 필요한 것은 9에서 14번줄까지와 18에서 41번줄까지 입니다. 이 두 부분을 경로를 수정해서 내 블로그나 사이트의 경로에 맞게 수정해줘야합니다. 가장 문제가 되는 것이 슬라이더에 나타나는 설명부분인데 jpg파일 이름이 그대로 사용되므로 포토샵에서 이미지 편집할때 파일이름을 바꿔주든가 아니면 위 html에서 변경해줘야합니다. 예를들면 위에서 이미지의 이름이 그대로 alt 텍스트 이름과 title 이름으로 사용됩니다. 이것이 슬라이드에서 그대로 나오게 됩니다. 그러니 이미지에 맞는 적당한 이름으로 바꿔주거나 CSS에서 이것이 안보이도록 설정하면 됩니다.


스타일시트 파일을 에디터에 열고 103번째 줄로 가면 이미지 설명인 타이틀을 수정할 수 있습니다. 1을 첨가하면 아예 안보이도록 할 수 있고 2와 3으로 위치를 수정할 수 있습니다. 4는 글자 배경의 색상이며 5는 글자의 색상입니다. 웹폰트를 사용하여 6에서 폰트명을 추가 할 수도 있습니다. 7은 글자의 투명도입니다. 8은 글자배경의 모서리의 둥근정도를 수정합니다.

저작자 표시 비영리 변경 금지
신고
BlogIcon 까움이

상세한 설명 참 감사합니다 ^^*..
하지만 어려운건 별수 없네요 ㅠㅠ
저같은 초보한테는 역시 힘든것 같요.

상단바가 참 이쁘네요! 웹디자인을 얼마나 배우면 저런 상단바를 만들지 감도 안잡힙니다 ^^
좋은 포스팅 감사합니다~ 자주 들르겠습니다!

BlogIcon 베누시안

안녕하세요. 반갑습니다. 웹디자인은 사실 CSS만 알면 다 됩니다. 저런 제이쿼리는 플러그인이라서 원하는 위치에 심기만 하면 되는거랍니다. 심는 작업이 CSS가 하는 일이구요. 새해에는 CSS에 대해서 자세히 글을 올릴 예정이니 참고하시면 웹디자인은 쉬워질겁니다. 포토샵은 기본으로 좀 아시면 좋습니다. 이미지를 편집해야하거든요. 댓글 감사드리고 새해 복 많이 받으세요.

공중관람

정말 멋진 정보네요 ㅠㅠ 근데 하단에 보이는 WOWSlider.com 이 문구는 안보이게 할 수 없나요? ㅠㅠ 스타일 시트에 있는 건가요 제이쿼리는 도통몰라서...

BlogIcon 베누시안

안녕하세요. 무료로 사용하면 그렇게 나오고 안나오게 하려면 유료로 구매를 해야합니다.

떨림

아 정말 마크만 없엘수 있다면 딱 좋겠는데.....
방법이 없을지.ㅠㅠ

BlogIcon 베누시안

안녕하세요. 유료프로그램이지만 구글에 찾아보면 무료인 좋은 플러그인도 많답니다. 댓글 감사드려요.

손군만세

와우 정말 대단한 프로그램이네요 정보 감사합니다.

김기백

관리자의 승인을 기다리고 있는 댓글입니다

호야

좋은정보감사합니다
궁금한게있어서 그런데여 제가 초보라 쇼핑몰에 응용해서 올릴려구하는데 쇼핑몰쪽사이트는 자바를 인식을 안해주네여
자바없에서 똑같이 구동이 가능한가요?

BlogIcon 베누시안

안녕하세요. 어떤 쇼핑몰인지 모르겠으나 오픈 마켓 같은 곳에서는 자체적으로 자바스크립트를 사용하지 못하게 하는데 이런 경우에는 위와같은 자바스크립트 플러그인을 사용하지 못합니다. 별개의 쇼핑카트에서나 가능하죠. 블로그도 가입형 블로그에서는 자유롭게 디자인하지 못하는 것과 같습니다.

고야

어떻게해야하는지 모르겠어요

index파일에 소스보기 누르고 그 소스부분 베누시안님이 말씀하신대로 9~14 18~41을로 적용해서 올렸는데 엑박이 뜨네요...이미지파일이름을 바꿔준다는것도 잘 이해가 안가고...ㅠㅠㅠ넘어려워요.....

BlogIcon 베누시안

안녕하세요. HTML과 CSS에 대해서 잘 아셔야 위 작업을 할 수 있습니다. 그냥 삽입만하는 작업이 아니거든요.

포뇨

사이즈를 아이폰5 사이즈에맞춰 했는데 폰에서보면 줄어들어보이는데 왜그럴까요 ㅠㅠ

BlogIcon 베누시안

반응형이라서 그럴겁니다.

모든

어디서 다운받을수있나요

유료라도 살려고한느대요.

BlogIcon 베누시안

위 글에 링크가 있습니다.

simbo

관리자의 승인을 기다리고 있는 댓글입니다

인생의회전목마

관리자의 승인을 기다리고 있는 댓글입니다

인생의회전목마

관리자의 승인을 기다리고 있는 댓글입니다

mr.ji

wowslider 워터마크 궁금하시면..... 메일주세요 knkr99@nate.com

티스토리 툴바