N.Design Studio에서 JQuery를 이용하여 배포하는 Dock Menu
자체 스크립트로 작동하는 Xesta용 euDock 메뉴

속도면에서는 어떤가요. 
제 펜3 500(-_-;) 노트북에서 두 링크예제를 비교해보니
위링크는 부드럽게 끊김없이 움직이지만
아래 링크예제는 상당히 무겁네여.

와! 훌륭한 블로그 스킨입니다.
근데 여기에 있는 샘플에서는 부드럽게 움직이는데,
제가 설치해 보니 부드럽지가 않네요, 굉장히 버벅거립니다.
그리고 고정되지를 않고 아래위로 따라 다니네요.
고정할 수는 없나요.
http://jcas.co.kr/zbxe/blog

호...저는 윈도우에서 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 님 자료 모두 잘 쓰고 있습니다 감사드립니다.
제가 사이트에 다 적용을 했는대요 한가지 링크를 걸어 놓은게 새창으로 열기로 해놓았는대
제사이트까지 링크주소로 열려요 ㅡ,.ㅡ 보고 따라만 하는 수준이라 왜 그런지좀 알려주세요.
정말 왕초보라 설명하기도 힘드네요.

그러니까 링크 걸어놓은 배너를 누르면 제사이트도 링크 걸린 사이트로 떠요 두개가 되는거죠 ㅡ,.ㅡ
설명이 이해가 되시려나 ㅋㅋ 암튼 방법좀 부탁드려요~