<style type="text/css">
/* Slaider */
#slideshow { position: relative; padding: 0; list-style: none; width: 620px; height: 280px; overflow: hidden; }
#slideshow img { border: none; }
#slideshow .arrow { width: 42px; height: 50px; display: block; position: absolute; top: 116px; text-indent: -9999px; overflow: hidden; cursor: pointer; }
#slideshow .arrowL { background: url(/images/arrowsslide.png) no-repeat; left: 0; }
#slideshow .arrowR { background: url(/images/arrowsslide.png) -42px 0px no-repeat; right: 0; }
.slideView, .thumbList { margin: 0; padding: 0; list-style: none; }
.slideView { height: auto; position: relative; top: 0; left: 0; overflow: hidden; z-index: 0; }
.slideView li { width: 100%; height: 280px; float: left; margin: 0; display: inline; }
.slideView li a { display: block; width: 100%; height: 100%; }
#slideshow .desc { padding: 5px; margin: 0; width: 620px; height: 24px; background: black; position: absolute; bottom: 0; left: 0px; color: white; font-weight: bolder; overflow: hidden; z-index: 6; font-size: 12px; }
#slideshow .wrap { background: black; position: absolute; height: 75px; bottom: 0; left: 0px; z-index: 90;}
#slideshow .thumbList { overflow: hidden; position: absolute; top: 0px; left: 0px; margin-top: 12px; display:none; }
#slideshow .thumbList li { width: 107px; height: 52px; display: inline; margin: 0; float: left; display:none; }
#slideshow .thumbList li a { display: block; width: 80px; height: 48px; border: 2px solid black; margin-left: 11px; }
#slideshow .thumbList li a:hover { border-color: #f75514; }
/* ------- */
</style>
  <div id="slideshow">
  <ul class="slideView">

<li><a href="#"><img src="[image]" alt="[alt text]" /></a></li>
<li><a href="#"><img src="[image]" alt="[alt text]" /></a></li>
<li><a href="#"><img src="[image]" alt="[alt text]" /></a></li>
   
   
  </ul>
  </div>
  <script src="/js/slideView.js" type="text/javascript"></script>
  <script type="text/javascript">
$(function() {
$("#slideshow").slideView({
  loop: true
  });
});
</script>

/*

  2010.3.9
  SlideView Component
  developled by Robin at ELFVision and PageTalks
  used mainly in the WUSESKY Project
   
  Visit Robin's:
  http://www.elfvision.com/
  http://pagetalks.com/
   
   
*/
(function($) {
$.iSlideView = {
  build: function(user_options) {
   var defaults = {
    thumb: true,
    thumbPrefix: "thumb_",
    frame: {
     isExist: false
    },
    slideBy : 1,
    speed: 500,
    easeOut: "swing",
    easeIn: "swing",
    easeThumb: "swing",
    loop: false,
    interval: 5000
   },
    options = $.extend(defaults, user_options),
    getThumbName = function(n,prefix) {
     var arr = n.split("/");
     var tl = n.length;
     var w = arr[arr.length-1].length;
     return n.substr(0,tl-w-1)+"/"+prefix+arr[arr.length-1];
    };
    
   return $(this).each(function() {
    var x =$(this),
     list  = x.find("ul"),
     links = list.find("a"),
     images = list.find("img"),
     slidebar,
     thumbList,
     thumbCon,
     desc,
     arrow,
     back = options.leftArrow ? $(options.leftArrow) : $("<span class='arrowL arrow'><</span>"),
     next = options.rightArrow ? $(options.rightArrow) : $("<span class='arrowR arrow'>></span>"),
     xH,
     xW,
     li,
     liW,
     totalW,
     xTotalH,
     Pointer,
     total,
     tLink,
     isBusy = false,
     focusTo = function(p) {
      var offsetT = - (xH * p);
      if(isBusy) {
       list.stop();
      }
      isBusy = true;
      if(options.desc) {
       desc.html(options.desc[p]);
      } else {
       desc.html(images.eq(p).attr("alt"));
      }
      list.animate({
       top: offsetT +"px"
      },options.speed,options.easeOut,function() {
       isBusy = false;
      });
     };
     
    links.click(function() {
     return false;
    });
     
    //Insert a frame
    var xW = x.width();
    var xH = x.height();
    if(options.frame.isExist) {
     $("<div class='slideFrame' />").appendTo(x).css({
      width: x.width()-options.frame.width * 2,
      height: x.height()-options.frame.width * 2,
      border: options.frame.width+"px solid "+ options.frame.color,
      position: "absolute",
      top: 0,
      left: 0,
      zIndex: 4
     });
    }
     
    //Insert thumb list, arrows, captions
    desc = $("<p class='desc' />").appendTo(x);
    if(options.thumb || (!options.leftArrow || !options.rightArrow) ) {
     slidebar = $("<div class='slidebar' />").appendTo(x).fadeTo("fast",0.8);
    }
    if(options.thumb) {
     thumbList = $("<ul class='thumbList' />");
     thumbCon = $("<div class='wrap' />").append(thumbList).appendTo(slidebar);
     //prepare sidebar thumbs
     $.each(images,function(index,img){
      thumbList.append("<li><a href='#' id='"+ (index+1) +"'><img src='"+getThumbName(img.src,options.thumbPrefix)+"' alt='"+img.alt+"' /></a></li>");
     });
      
     li = thumbList.find("li");
     liW = li.width();
     totalW = li.length * liW;
     thumbList.css("width",totalW).hover(function() {
      slidebar.fadeTo("fast",1);
     }, function() {
      slidebar.fadeTo("fast",0.8);
     });
     tLink = thumbList.find("a").each(function(i) {
      $(this).hover(function() {
       var id = this.id-1;
       (function(index){
        if(index!=Pointer) {
         focusTo(id);  
        }
       })(i);
      },function() {
       focusTo(Pointer);
      });
     });
    }
    if(!options.leftArrow || !options.rightArrow) {
     slidebar.append(next).prepend(back);
    }
     
    focusTo(0);
     
    desc.fadeTo("fast",0.6).hover(function() {
     $(this).fadeTo("fast",0.9);
    },function() {
     $(this).fadeTo("fast",0.6);
    });
     
    xTotalH = images.length * xH;
    list.css("height",xTotalH);
     
    Pointer = 0;
    total = images.length;
     
    if(!options.leftArrow) {back.fadeTo("fast",0.5);}
     
    if(options.loop) {//loop the slide
     setInterval(function() {
      next.click();
     },options.interval);
    }
     
    next.click(function() {
    if( total - Pointer > options.slideBy ) {
     if(options.thumb) {
     var offsetL =  parseInt(thumbList.css("left")) - liW * options.slideBy;
      thumbList.animate({
       left: offsetL + "px"
      },options.speed,options.easeThumb);
     }
      
     Pointer+=options.slideBy;
     focusTo(Pointer);
      
     if(!options.leftArrow) {
      back.fadeTo("fast",1);
     }
    } else {
     if(options.loop) {
      if(options.thumb) {
       thumbList.animate({
        left: "0px"
       },options.speed,options.easeThumb);
      }
      Pointer = 0;
      focusTo(0);
     } else {
      next.fadeTo("fast",0.5);
     }
    }
    return false;
    });
     
    back.click(function() {
    if(Pointer!=0) {
     if(options.thumb) {
      var offsetL =  parseInt(thumbList.css("left")) + liW * options.slideBy;
      thumbList.animate({
       left: offsetL + "px"
      },options.speed,options.easeThumb);
     }
      
     Pointer-=options.slideBy;
     focusTo(Pointer);
      
     if(!options.rightArrow) {
      next.fadeTo("fast",1);
      if(Pointer==0)//when slide back to the start
       back.fadeTo("fast",0.5);
     }
    }  
    return false;
    });
   });
  }
};
$.fn.slideView = $.iSlideView.build;
})(jQuery);