jsCarousel 2.0.0, jQuery 기반의 이미지 슬라이드 플러그인

jsCarousel.zip

jsCarousel 은..
이미지들이 자동으로 스크롤 되면서,
마우스 커서가 하버링 되면 자동 스크롤이 멈췄다가 마우스 커서가 다른 곳으로 가면 다시 자동 스크롤 되는 플러그인입니다.
파일을 첨부하였습니다. 원래의 홈페이지를 찾으려 하니까 찾기 쉽지 않네요..

아래는 샘플입니다. 그중 적당한 옵션으로 보이구요..
.jsCarousel({
  onthumbnailclick:function(src){ openThis(0,src) },
  scrollspeed:1000,
  delay:4000,
  autoscroll:true,
  masked:true,
  itemstodisplay:5,
  orientation:'h'
});

상기 옵션은 다음과 같습니다.
onthumbnailclick 은 썸네일 이미지 위에서 마우스 클릭이 일어나면 실행되는 자바스크립트 함수입니다.
openThis(0,src) 는 임의로 등록한 함수이지요.. jQuery 의 특징을 살려서 함수를 만들어 넣으면 됩니다.
scrollspeed 는 좌우 또는 상하로 자동 스크롤 되는 속도입니다. 단위는 Mili-second.
delay 는 다음번 스크롤 될때까지의 지연시간입니다. 단위는 Mili-second.
autoscroll 는 자동 스크롤 가동 여부.
masked 는 스크롤 될때 마스크를 씌우느냐의 여부입니다. 마우스 커서가 올라가면 원래의 색상이 나옵니다.
마스크 강도는 .css 에서 다룹니다.
itemstodisplay 는 한 화면에 보여지는 썸네일 이미지 갯수입니다.
orientation 은 썸네일 이미지들이 늘어서는 방향입니다. h 는 수평방향, v 는 수직방향.


그런데, 자바스크립트에 오류가 있어요..
아래와 같이 index<=0 인 경우에 index=noOfBlocks-1 이 아니라 그냥 index=noOfBlocks 로 해야 하는 거죠.

function changeSlide() {
  if (direction == "forward") {
    if (index <= 0) index = noOfBlocks;
  } else {
    if (index >= noOfBlocks - 1) { index = -1; }
  }
  showThumbs();
  interval = setTimeout(changeSlide, settings.delay);
}

.css 를 수정하면 색다르게 표현할 수 있습니다.
좌우 또는 상하 화살표는 background-image 와 background-position 으로 설정하는데..
이렇게 하면 테두기 경계에 딱 달라붙거든요. 이 부분은 작업자가 알아서 수정을 해 주어야 합니다.

이미지가 자동 스크롤 될때 마우스가 올려졌다가 다시 마우스가 밖으로 이동하면,
몇번은 자동 스크롤이 엉뚱하게 돌아가도, 곧 다시 제자리를 잡습니다.
이 부분도 고쳐지긴 해야 할 듯하구요..

한 화면에 5개씩 모두 채워 넣어야 하는데 빈 공간은 어떻게 해야 할 것이냐..?
썸네일은 <div><img ../><br /><span ...>..</span></div> 이런 식으로 작성되는데,
빈 공간이 생기더라도 5개를 꽉 채워줄 필요가 있으니까..
빈 공간에는 <div></div> 이렇게 넣어서 5개 단위가 되도록 채웁니다.

5개씩 화면에 보여질때 세팅하는 순서가 있습니다.
만약 A1, A2, ..., A5, B1, B2, ..., B5, C1, C2, ..., C5 의 순서로 보여져야 한다면..
썸네일 이미지를 넣을 때, C1, C2, ..., C5, B1, B2, ..., B5, A1, A2, ..., A5 순으로 해야 합니다.

한 화면에 5개씩 움직이기 때문에 5개 이하로 구성된 경우에는 자동 스크롤이 안됩니다.
이 때는, 5개의 배수가 되도록 동일한 것을 복사해 넣습니다.
A1, A2, A3 이렇게 3개만 넣어지는데 자동 스크롤이 되도록 하려면,
아래와 같이 반복해서 넣어 주라는 거죠.
A1, A2, A3, <div></div>, <div></div>, A1, A2, A3, <div></div>, <div></div>