레이아웃 스킨
| 라이센스 | 기타 |
|---|---|
| 기타 라이센스 | 없음 |
| 적용 버전 | 정식버전(1.0이후) |

제로보드 XE용 블로그 스킨 Xesta Vivid의 레이아웃에 추가 될 Dock 메뉴입니다. Mac OS의 데스크탑과 같이 화면 하단에 Dock Bar가 위치하며 마우스를 올리면 해당 아이콘이 슬라이드 되면서 확대되는 이펙트를 가지고 있습니다. euDock 2.0을 사용해서 Xesta Vivid에 맞게 수정하였습니다. euDock 2.0의 기능을 백분 활용하면 훨씬 다양한 효과를 창출할 수도 있습니다.
이 스크립트가 작동할 수 있게끔 도와주신 BNU님(http://bnufactory.com/)께 정말 감사 말씀 올립니다. 중첩문 떄문에 아주 오랫동안 고생했는데 너무 통쾌하게 잘 알려주셔서 이렇게 작업을 완료 할 수 있게 되었습니다.
* euDock 2.0을 사용하여 실제 Mac OS 데스크톱의 지니 램프와 같은 Dock 메뉴를 화면 하단에 추가시켜 줍니다
* Prototype이나 Jquery와 같은 자바스크립트 라이브러리를 사용하는 것이 아닌 자체 라이브러리를 가지고 있습니다
* N.Design Studio에서 제공하는 Dock메뉴와 달리 완전히 실제처럼 작동합니다. 이 두가지의 차이점을 보려면 다음의 링크를 참고해서 비교해 보십시오
유용한 링크들
* Dock 메뉴에 대한 설치와 셋팅법은 아래의 링크를 참조하시기 바랍니다.
http://www.thehammer.co.kr/blog/xesta-eudock/
* Dock 메뉴 샘플에 나오는 Skype 아쿠아 버블 로고 만드는 방법 알아보기
http://www.thehammer.co.kr/blog/aqua-bubble-text-effects/
* Dock 메뉴에 사용할 더 다양한 32-bit PNG 이미지 얻기
http://www.thehammer.co.kr/blog/category/icons/
와! 훌륭한 블로그 스킨입니다.
근데 여기에 있는 샘플에서는 부드럽게 움직이는데,
제가 설치해 보니 부드럽지가 않네요, 굉장히 버벅거립니다.
그리고 고정되지를 않고 아래위로 따라 다니네요.
고정할 수는 없나요.
http://jcas.co.kr/zbxe/blog
아무래도 PNG 이미지 파일을 여러개를 동시에 돌리는데다, Label이라는 기능을 쓰면 아이콘 밑에 메뉴명이 나타나면서 아이콘이 살짝 페이드 아웃되었다가 인 되는 효과까지 동시에 들어가기 때문에 소스가 많아진 페이지에 넣게되면 꽤 무거운 구동을 보입니다.
아이콘 수를 줄이거나 Label 효과를 사용하지 않으면 좀 더 가벼워집니다. 라벨 효과는 아마 제가 맨 아래에 있는 것은 빼고 넣었을 겁니다. 다른 아이콘 스크립트 부분도 맨 마지막 부분과 동일하게 해주시면 좀 더 가벼워집니다.
호...저는 윈도우에서 rk 런처를 쓰지만 홈페이지에서 이렇게 구동 되는 dock을 보니 신기하네요 :)
좋은 스킨 구경하고 갑니다
아 적용해봤습니다....
하단에 따라 다니는군요
gudouck2.0 홈페이지에는 고정이 되어 있던데 +_+ 어케 하면 고정 시켜 버릴까요 ?
하단에 따라 다니는것도 나름 귀엽네요 +_+
전 두군데 홈페이지에 적용 했는데 맘에 드는군요... 아직 수정은 안했구요
그대로 적용만 시켜 봤습니다..
http://www.digetchoco.net
지금 상태는 홈페이지 무한으로 아래로 내려 가지는군요....
배경을 지정을 안해서인듯-,-;;
hammer 님 안녕하세요 ^^
적용해봤는데 좋네요 +_+
따라다니는거에 놀랬어요 +_+
고정하는 법은 없을까요 사용하기에 따라서 상당히
유용하겠네요 …
레이아웃을 배포 해주셨는데… hammer님 홈페이지에 댓글다신 블루곰님의 말씀처럼..
처음 hammer님의 레이아웃을 까시는 분이 아닌 이상..
레이아웃을 생성하신분들은 홈페이지 레이아웃을 수정을
하시거나 관리자페이지 가셔서 레이아웃을 만져 줘야 합니다..
제로보드 특성상… 몇버전인지 모르겠지만… 레이아웃 초기화
라는 버튼이 생긴 후로는…. 레이아웃 소스를 관리자 페이지에서
생성 하시면 소스가 따로 저장 되는 걸로 알고 있습니다…
한마디로-,- ftp에 layout.html을 암만 수정해봤자 코드가 먹히지
않는다는거죠… 무조건 홈페이지 레이아웃 수정하시거나
관리자페이지에서 레이아웃 수정을 하셔야 된다는 말씀-,-;;
그런 의미로 …수정하는 법은.... (제 설명은 언제나 초보자용입니다-,-)
일단… ftp 계정에 hammer님이 올리신 파일을 주소에 맞게
layouts/xesta/js/eudock
그대로 넣습니다…
그런 다음 자신의 홈페이지에 들어 가셔서 레이아웃 수정을
하세요… 상단에 …보시면 js 파일 impet 란에
<!-- js 파일 import -->
<!--%import("js/xe_official.js")-->
<!--%import("js/eudock/euDock.2.0.js")-->
<!--%import("js/eudock/euDock.Image.js")-->
<!--%import("js/eudock/euDock.Label.js")-->
제일 아래 3줄의 코드를 삽입 해줍니다…
그런 다음
hammer 님이 적어주신 소스 이부분을 푸더 부분에 넣어 줍니다
<!-- EuDock for Xesta Vivid 스크립트--> <script type="text/javascript"> euEnv.imageBasePath="";
var dock = new euDock();
dock.setAnimation(euMOUSE,0.3);
dock.setScreenAlign(euDOWN,0);
dock.setBar({
left :{
euImage:{
image:"layouts/xesta/js/eudock/itheme/dock-bg-l.gif"
}
},
horizontal:{
euImage:{
image:"layouts/xesta/js/eudock/itheme/dock-bg.gif"
}
},
right :{
euImage:{
image:"layouts/xesta/js/eudock/itheme/dock-bg-r.gif"
}
}
});
dock.setIconsOffset(2);
/* 첫번째 항목 */
dock.addIcon(new Array({
euImage:{
image:"layouts/xesta/js/eudock/itheme/home.png"
}},
{
euLabel:{
object:{
euImage:{
image:"layouts/xesta/js/eudock/itheme/home.png"
}},
txt :"Home",
style :"text-align:center; font: bold 11px Arial; color: #ffffff;",
anchor:euDOWN,
offsetX:0,
offsetY:-25
}
}),
{
link:"http://eudock.jules.it"
});
/* 두번째 항목 */
dock.addIcon(new Array({
euImage:{
image:"layouts/xesta/js/eudock/itheme/email.png"
}},
{
euLabel:{
object:{
euImage:{
image:"layouts/xesta/js/eudock/itheme/email.png"
}},
txt :"Email",
style :"text-align:center; font: bold 11px Arial; color: #ffffff;",
anchor:euDOWN,
offsetX:0,
offsetY:-25
}
}),
{
link:"http://eudock.jules.it"
});
/* 세번째 항목 */
dock.addIcon(new Array({
euImage:{
image:"layouts/xesta/js/eudock/itheme/video.png"
}},
{
euLabel:{
object:{
euImage:{
image:"layouts/xesta/js/eudock/itheme/video.png"
}},
txt :"Video",
style :"text-align:center; font: bold 11px Arial; color: #ffffff;",
anchor:euDOWN,
offsetX:0,
offsetY:-25
}
}),
{
link:"http://eudock.jules.it"
});
/* 네번째 항목 */
dock.addIcon(new Array({
euImage:{
image:"layouts/xesta/js/eudock/itheme/music.png"
}},
{
euLabel:{
object:{
euImage:{
image:"layouts/xesta/js/eudock/itheme/music.png"
}},
txt :"Music",
style :"text-align:center; font: bold 11px Arial; color: #ffffff;",
anchor:euDOWN,
offsetX:0,
offsetY:-25
}
}),
{
link:"http://eudock.jules.it"
});
/* 다섯번째 항목 */
dock.addIcon(new Array({
euImage:{
image:"layouts/xesta/js/eudock/itheme/calendar.png"
}},
{
euLabel:{
object:{
euImage:{
image:"layouts/xesta/js/eudock/itheme/calendar.png"
}},
txt :"Calendar",
style :"text-align:center; font: bold 11px Arial; color: #ffffff;",
anchor:euDOWN,
offsetX:0,
offsetY:-25
}
}),
{
link:"http://eudock.jules.it"
});
/* 여섯번째 항목 */
dock.addIcon(new Array({
euImage:{
image:"layouts/xesta/js/eudock/itheme/history.png"
}},
{
euLabel:{
object:{
euImage:{
image:"layouts/xesta/js/eudock/itheme/history.png"
}},
txt :"history",
style :"text-align:center; font: bold 11px Arial; color: #ffffff;",
anchor:euDOWN,
offsetX:0,
offsetY:-25
}
}),
{
link:"http://eudock.jules.it"
});
/* 일곱번째 항목 */
dock.addIcon(new Array({
euImage:{
image:"layouts/xesta/js/eudock/itheme/link.png"
}},
{
euLabel:{
object:{
euImage:{
image:"layouts/xesta/js/eudock/itheme/link.png"
}},
txt :"Links",
style :"text-align:center; font: bold 11px Arial; color: #ffffff;",
anchor:euDOWN,
offsetX:0,
offsetY:-25
}
}),
{
link:"http://eudock.jules.it"
});
/* 여덜번째 항목 */
dock.addIcon(new Array({
euImage:{
image:"layouts/xesta/js/eudock/itheme/portfolio.png"
}},
{
euLabel:{
object:{
euImage:{
image:"layouts/xesta/js/eudock/itheme/portfolio.png"
}},
txt :"Suitcase",
style :"text-align:center; font: bold 11px Arial; color: #ffffff;",
anchor:euDOWN,
offsetX:0,
offsetY:-25
}
}),
{
link:"http://eudock.jules.it"
});
/* 아홉번째 항목 */
dock.addIcon(new Array({
euImage:{
image:"layouts/xesta/js/eudock/itheme/rss.png"
}},
{
euLabel:{
object:{
euImage:{
image:"layouts/xesta/js/eudock/itheme/rss.png"
}},
txt :"RSS",
style :"text-align:center; font: bold 11px Arial; color: #ffffff;",
anchor:euDOWN,
offsetX:0,
offsetY:-25
}
}),
{
link:"http://eudock.jules.it"
});
/* 열번째 항목 */
dock.addIcon(new Array({
euImage:{
image:"layouts/xesta/js/eudock/itheme/rss2.png"
}
}),
{
link:"http://eudock.jules.it"
});
</script>
이걸 푸더 아무곳에나 넣으시면 됩니다..
전 이곳에 넣었죠..
</div><!-- /footer -->
소스 젤 하단 에 보면 저 소스가 있죠 저소스 바로 위에 붙혀 넣었습니다..
넣어 주신후에….
블루곰님이 지적해주신 … 경로 문제..상단에 삽입한
소스를 보시면 이미지 경로들이 적혀 있는게 보이실겁니다..
아래와 같이 적혀 있죠 각 파트 마다..
layouts/xesta/js/eudock/itheme………
이소스를 이렇게
layouts/Xesta/js/eudock/itheme………
xesta 가 아닌 Xesta 로 고쳐 적으세요…hammer님이
따로 따로 배포 하셔서 … 배포버젼은 폴더가 대문자랍니다..
이렇게 했는데도 안된다면…
경로에 홈페이지 주소를 다 넣으세요…그게 속편함..
예를 들어
http://soo14.ivyro.net/zbxe/layouts/Xesta/js/eudock/itheme………
이런식이죠…그럼
다들 잘 사용하세요…
다시 함번 엄청난 녀석을 배포해주신 hammer님게
감사드립니다…
그리고 더 자세한 걸 원하시면 hammer님 홈페이지를 방문하세요~
휘유 이거 뭐 다이제님이 제 대신 더 잘 답변해 주시니 부끄럽다능... 감사합니다~ 그리고 고정 시키는건 Align 기능중에 Fixed기능이네요^^ Align 부분 옵션 어떻게 다루는지 오늘중에 그럼 블로그에 추가로 기재하겠습니다. 왼쪽이나 오른쪽 정렬 같은 경우는 이미지를 수직으로 로테이트 시키는 작업이 필요해서 차일피일 좀 미뤘는데 오늘 적어놓을께요^^
다른 컴에서 6을 쓰다가
노트북을 익스7로 해서 사용해보니 6에서는 연결이 끊어졌다는 메시지가 뜨는군요.
새로고침을 자주 한다는 것이 6을 쓰시는 분들에겐 죄송하구요. 익스7에서는 잘 돌아갑니다. (이부분의 보완책은 없는지요.)
이미지 갤러리에서 이미지 추가해서 슬라이드로 하면 로딩 메시지만 뜨고 그림이 올라오질 않네요.
그리고 이미지 올리고 등록하면 이미지가 올라가지 않을때가 있어 수정으로 다시 등록하면 그림이 표시됩니다.
코멘트 링크표시 부분이 게시판 아래 우측으로 정렬되면 좋을 듯 합니다. 현재 티스토리나 기타 부분이 아래 우측으로
표시되는 것이 일반 적인것이 아닌가 함니다. 소스를 함부로 만지기 아직은 겂이나서 소스만 복사해서 아래로
내려두었는데 왼쪽으로 표시되고 코멘트를 클릭하면 게시판 탑으로 올라가 내려와야 하는 불편함도 있더군요.
이리저리 궁리는 해봅니다만 ^^ 실력이 달려서 시간만 많이 소진 하는군요.
올려주신 소중한 자료들 답변 설명들로 많은 도움이 되었습니다. 더 좋은 소스와 발전된 소스들 많이 배워 가겠습니다.
모두들 수고하셨습니다. 좋은 자료 감사합니다.
Hammer 님 자료 모두 잘 쓰고 있습니다 감사드립니다.
제가 사이트에 다 적용을 했는대요 한가지 링크를 걸어 놓은게 새창으로 열기로 해놓았는대
제사이트까지 링크주소로 열려요 ㅡ,.ㅡ 보고 따라만 하는 수준이라 왜 그런지좀 알려주세요.
정말 왕초보라 설명하기도 힘드네요.
그러니까 링크 걸어놓은 배너를 누르면 제사이트도 링크 걸린 사이트로 떠요 두개가 되는거죠 ㅡ,.ㅡ
설명이 이해가 되시려나 ㅋㅋ 암튼 방법좀 부탁드려요~
설명을 붙이자면 내 게시판에 있는 링크를 클릭시 원래 내 창은 고정되어 있고 새창에 새주소가 열려야 되는데,
내창과 새창 모두다가 새창의 주소로 열립니다.
http://jcas.co.kr/zbxe/fa 여기서 링크주소클릭시 테스트가능함.
euDock.2.0.js에서 때문에 발생하는일인 것은 알아냈는데 그 다음은....
그리고 이 스킨에서 우측 위젯 넣는 부분에 기존에 사용하는 최근글이나, 이미지 위젯을 적용하면,
브라우저 창크기 변환시 위젯들이 제자리를 찾아가지 못합니다.
그래서 살펴보니 CSS안에 position: 이 존재하면 그런 증상이 나옵니다.
기존에 있는 CSS에는 왼만하면 거의 position: 이 걸려있는데,
이 스킨과 같이 나온 위젯들에는 position: 이 전혀 없네요.
이 스킨 사용시는 다른 위젯들을 사용을 안하던지 아님 position: 을 다 삭제해야 합니다.
http://jcas.co.kr/zbxe/blog 에서 테스트 가능함.
위에 문제는 저도 해결했습니다.
참고로 남깁니다. 이게 정답인지는 몰라도 이렇게 하니 홈피도 Dock도 잘 작동됩니다.
먼저 euDock.2.0.js의 1081줄에 있는 return true; 를 제거하니까 됩니다.
function on_MouseClick(e) {
if (!e) var e = window.event;
for (var i in euEnv.euDockArray)
if (euEnv.euDockArray[i].mouseClick)
euEnv.exeThread |= euEnv.euDockArray[i].mouseClick(euEnv.euScrOfX+e.clientX,euEnv.euScrOfY+e.clientY);
if (euEnv.onclickBK)
return euEnv.onclickBK(e);
return true;
};





N.Design Studio에서 JQuery를 이용하여 배포하는 Dock Menu
자체 스크립트로 작동하는 Xesta용 euDock 메뉴
속도면에서는 어떤가요.
제 펜3 500(-_-;) 노트북에서 두 링크예제를 비교해보니
위링크는 부드럽게 끊김없이 움직이지만
아래 링크예제는 상당히 무겁네여.