카테고리 보관물: 제이쿼리

제이쿼리 – 와우슬라이더(Wow Slider)

제이쿼리 이미지 슬라이더 배너를 자동으로 만들어주는 무료프로그램을 소개합니다. 개인용으로 무료이고 이미지 하단에 제작자의 로고가 첨부되지만 상당히 좋은 프로그램입니다. 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은 글자배경의 모서리의 둥근정도를 수정합니다.

CSS – 제이쿼리 내비게이션 메뉴바

데모 화면을 볼 수 있으며 우측에서 색상아이콘을 선택하고 Free Download 버튼을 클릭하면 압축파일로 다운로드 됩니다. 용량도 작아서 웹사이트에 별로 무리가 가지 않습니다. CSS3도 지원하여 그림자효과도 만들어지지만 인터넷익스플로러에서는 구현이 안되는군요. 모두 클릭해서 시험해보니 디자인이 아주 좋습니다. 최근에 생긴 사이트로 생각되는군요. 상업용으로 사용하려면 위에 보이듯이 돈을 지불하면 여러개의 스타일을 한번에 받을 수 있고 색상도 다양하게 포함됩니다. 개인용버전은 애매한 소스코드라고 되어있는데 무엇이 애매하다는 것인지는 아직 파악을 못했습니다. 특징을 보면 다음과 같습니다.

브라우저의 호환성이 있고 자바스크립트 기능을 끄더라도 CSS만으로도 작동됩니다.
검색엔진 최적화 되어있습니다.
깨끗한 Unordered List 구조입니다.
설치하기 쉽고 업데이트도 가능합니다.
환상적인 애니메이션과 컬러 전환기능(서브메뉴 선택시)이 있습니다.
다양한 색상선택이 가능합니다.
CSS로 사용자가 원하는대로 디자인 할 수 있습니다.
제이쿼리에 의해 작동됩니다.
압축해제시 3kb정도의 아주 작은 사이즈입니다.

사용해보니 작동이 잘되고 있습니다. 위에 설치한 메뉴가 이곳에서 다운받아 설치한 것입니다. 다만 개인용 무료로 사용하려면 Footer에 크레딧을 달아줘야 합니다. 이것을 제거할 경우 좌측 상단에 “No Back Link”라는 메시지가 출력됩니다. 제 블로그의 하단처럼 작은 글씨로 삽입하면 메시지가 안나타납니다.

특히 Lava Lamp식으로 메뉴에 마우스오버하면 이미지가 이동하는 것이 재밋습니다. 이런 것이 있으면 방문자가 메뉴에 마우스를 올려보는 시험을 해보게 됩니다.

설치는 CSS를 아시는 분이라면 쉽게 가능합니다. 압축을 풀면 index파일과 제이쿼리 파일, CSS 스타일 파일, 그리고 이미지 폴더가 있습니다. 인덱스파일에서 메뉴부분을 HTML 코드에 삽입하고 제이쿼리와 CSS 스타일 파일은 링크를 사용하면 됩니다.

한종류의 메뉴바에서 여러개의 컬러로 다운받아서 이미지 폴더의 이미지파일만 교체하면 간단하게 컬러를 바꿀 수 있네요.

티스토리 라이브리(LiveRe) 플러그인을 설치하니 오작동이 일어나서 설치를 취소했습니다. 참고하세요.