http://manos.malihu.gr/jquery-thumbnail-scroller
Con esta estructura:
Código HTML:
<div id="tS2" class="jThumbnailScroller"> <div class="jTscrollerContainer"> <div class="jTscroller"> <a href="#"><img src="thumbs/img1.jpg" /></a> ... <a href="#"><img src="thumbs/img5.jpg" /></a> </div> </div> <a href="#" class="jTscrollerPrevButton"></a> <a href="#" class="jTscrollerNextButton"></a> </div>
y después llamando la función JQUERY
Código HTML:
<script> jQuery.noConflict(); (function($){ window.onload=function(){ $("#tS2").thumbnailScroller({ scrollerType:"hoverPrecise", scrollerOrientation:"horizontal", scrollSpeed:2, scrollEasing:"easeOutCirc", scrollEasingAmount:600, acceleration:4, scrollSpeed:800, noScrollCenterSpace:10, autoScrolling:0, autoScrollingSpeed:2000, autoScrollingEasing:"easeInOutQuad", autoScrollingDelay:500 }); } })(jQuery); </script> <script src="jquery.thumbnailScroller.js"></script>
Funciona...
PERO MI PROBLEMA, es que el contenido del DIV class="jTscroller" lo genero dinamicamente con XAJAX.
La primera vez que se genera BIEN, queda todo OK, pero en el momento que cambio el contenido de forma dinamica, se queda mal, ya que la función de scroll no toma en cuenta si ahora contiene 5 10 o 50 elementos a mostrar.
Desde XAJAX cuando genero el nuevo contenido puedo ejecutar SCRIPT usando:
$respuesta->script('........');
return $respuesta;
La función es esta:
Código HTML:
/*
Author: malihu [http://manos.malihu.gr]
*/
(function($){
$.fn.thumbnailScroller=function(options){
var defaults={ //default options
scrollerType:"hoverPrecise", //values: "hoverPrecise", "hoverAccelerate", "clickButtons"
scrollerOrientation:"horizontal", //values: "horizontal", "vertical"
scrollEasing:"easeOutCirc", //easing type
scrollEasingAmount:800, //value: milliseconds
acceleration:2, //value: integer
scrollSpeed:600, //value: milliseconds
noScrollCenterSpace:0, //value: pixels
autoScrolling:0, //value: integer
autoScrollingSpeed:8000, //value: milliseconds
autoScrollingEasing:"easeInOutQuad", //easing type
autoScrollingDelay:2500 //value: milliseconds
};
var options=$.extend(defaults,options);
return this.each(function(){
//cache vars
var $this=$(this);
var $scrollerContainer=$this.children(".jTscrollerContainer");
var $scroller=$this.children(".jTscrollerContainer").children(".jTscroller");
var $scrollerNextButton=$this.children(".jTscrollerNextButton");
var $scrollerPrevButton=$this.children(".jTscrollerPrevButton");
//set scroller width
if(options.scrollerOrientation=="horizontal"){
$scrollerContainer.css("width",999999);
var totalWidth=$scroller.outerWidth(true);
$scrollerContainer.css("width",totalWidth);
}else{
var totalWidth=$scroller.outerWidth(true);
}
var totalHeight=$scroller.outerHeight(true); //scroller height
//do the scrolling
if(totalWidth>$this.width() || totalHeight>$this.height()){ //needs scrolling
var pos;
var mouseCoords;
var mouseCoordsY;
if(options.scrollerType=="hoverAccelerate"){ //type hoverAccelerate
var animTimer;
var interval=8;
$this.hover(function(){ //mouse over
$this.mousemove(function(e){
pos=findPos(this);
mouseCoords=(e.pageX-pos[1]);
mouseCoordsY=(e.pageY-pos[0]);
});
clearInterval(animTimer);
animTimer = setInterval(Scrolling,interval);
},function(){ //mouse out
clearInterval(animTimer);
$scroller.stop();
});
$scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
}else if(options.scrollerType=="clickButtons"){
ClickScrolling();
}else{ //type hoverPrecise
pos=findPos(this);
$this.mousemove(function(e){
mouseCoords=(e.pageX-pos[1]);
mouseCoordsY=(e.pageY-pos[0]);
var mousePercentX=mouseCoords/$this.width(); if(mousePercentX>1){mousePercentX=1;}
var mousePercentY=mouseCoordsY/$this.height(); if(mousePercentY>1){mousePercentY=1;}
var destX=Math.round(-((totalWidth-$this.width())*(mousePercentX)));
var destY=Math.round(-((totalHeight-$this.height())*(mousePercentY)));
$scroller.stop(true,false).animate({left:destX,top:destY},options.scrollEasingAmount,options.scrollEasing);
});
$scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
}
//auto scrolling
if(options.autoScrolling>0){
AutoScrolling();
}
} else {
//no scrolling needed
$scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
}
//"hoverAccelerate" scrolling fn
var scrollerPos;
var scrollerPosY;
function Scrolling(){
if((mouseCoords<$this.width()/2) && ($scroller.position().left>=0)){
$scroller.stop(true,true).css("left",0);
}else if((mouseCoords>$this.width()/2) && ($scroller.position().left<=-(totalWidth-$this.width()))){
$scroller.stop(true,true).css("left",-(totalWidth-$this.width()));
}else{
if((mouseCoords<=($this.width()/2)-options.noScrollCenterSpace) || (mouseCoords>=($this.width()/2)+options.noScrollCenterSpace)){
scrollerPos=Math.round(Math.cos((mouseCoords/$this.width())*Math.PI)*(interval+options.acceleration));
$scroller.stop(true,true).animate({left:"+="+scrollerPos},interval,"linear");
}else{
$scroller.stop(true,true);
}
}
if((mouseCoordsY<$this.height()/2) && ($scroller.position().top>=0)){
$scroller.stop(true,true).css("top",0);
}else if((mouseCoordsY>$this.height()/2) && ($scroller.position().top<=-(totalHeight-$this.height()))){
$scroller.stop(true,true).css("top",-(totalHeight-$this.height()));
}else{
if((mouseCoordsY<=($this.height()/2)-options.noScrollCenterSpace) || (mouseCoordsY>=($this.height()/2)+options.noScrollCenterSpace)){
scrollerPosY=Math.cos((mouseCoordsY/$this.height())*Math.PI)*(interval+options.acceleration);
$scroller.stop(true,true).animate({top:"+="+scrollerPosY},interval,"linear");
}else{
$scroller.stop(true,true);
}
}
}
//auto scrolling fn
var autoScrollingCount=0;
function AutoScrolling(){
$scroller.delay(options.autoScrollingDelay).animate({left:-(totalWidth-$this.width()),top:-(totalHeight-$this.height())},options.autoScrollingSpeed,options.autoScrollingEasing,function(){
$scroller.animate({left:0,top:0},options.autoScrollingSpeed,options.autoScrollingEasing,function(){
autoScrollingCount++;
if(options.autoScrolling>1 && options.autoScrolling!=autoScrollingCount){
AutoScrolling();
}
});
});
}
//click scrolling fn
function ClickScrolling(){
$scrollerPrevButton.hide();
$scrollerNextButton.show();
$scrollerNextButton.click(function(e){ //next button
e.preventDefault();
var posX=$scroller.position().left;
var diffX=totalWidth+(posX-$this.width());
var posY=$scroller.position().top;
var diffY=totalHeight+(posY-$this.height());
$scrollerPrevButton.stop().show("fast");
if(options.scrollerOrientation=="horizontal"){
if(diffX>=$this.width()){
$scroller.stop().animate({left:"-="+$this.width()},options.scrollSpeed,options.scrollEasing,function(){
if(diffX==$this.width()){
$scrollerNextButton.stop().hide("fast");
}
});
} else {
$scrollerNextButton.stop().hide("fast");
$scroller.stop().animate({left:$this.width()-totalWidth},options.scrollSpeed,options.scrollEasing);
}
}else{
if(diffY>=$this.height()){
$scroller.stop().animate({top:"-="+$this.height()},options.scrollSpeed,options.scrollEasing,function(){
if(diffY==$this.height()){
$scrollerNextButton.stop().hide("fast");
}
});
} else {
$scrollerNextButton.stop().hide("fast");
$scroller.stop().animate({top:$this.height()-totalHeight},options.scrollSpeed,options.scrollEasing);
}
}
});
$scrollerPrevButton.click(function(e){ //previous button
e.preventDefault();
var posX=$scroller.position().left;
var diffX=totalWidth+(posX-$this.width());
var posY=$scroller.position().top;
var diffY=totalHeight+(posY-$this.height());
$scrollerNextButton.stop().show("fast");
if(options.scrollerOrientation=="horizontal"){
if(posX+$this.width()<=0){
$scroller.stop().animate({left:"+="+$this.width()},options.scrollSpeed,options.scrollEasing,function(){
if(posX+$this.width()==0){
$scrollerPrevButton.stop().hide("fast");
}
});
} else {
$scrollerPrevButton.stop().hide("fast");
$scroller.stop().animate({left:0},options.scrollSpeed,options.scrollEasing);
}
}else{
if(posY+$this.height()<=0){
$scroller.stop().animate({top:"+="+$this.height()},options.scrollSpeed,options.scrollEasing,function(){
if(posY+$this.height()==0){
$scrollerPrevButton.stop().hide("fast");
}
});
} else {
$scrollerPrevButton.stop().hide("fast");
$scroller.stop().animate({top:0},options.scrollSpeed,options.scrollEasing);
}
}
});
}
});
};
})(jQuery);
//global js functions
//find element Position
function findPos(obj){
var curleft=curtop=0;
if (obj.offsetParent){
curleft=obj.offsetLeft
curtop=obj.offsetTop
while(obj=obj.offsetParent){
curleft+=obj.offsetLeft
curtop+=obj.offsetTop
}
}
return [curtop,curleft];
}
Gracias!!!
