https://www.georgiadurante.com/jquery.thumbnailScroller.js

1/*
2Thumbnail scroller jQuery plugin
3Author: malihu [http://manos.malihu.gr]
4Homepage: manos.malihu.gr/jquery-thumbnail-scroller
5*/
6(function($){  
7 $.fn.thumbnailScroller=function(options){  
8	var defaults={ //default options
9		scrollerType:"hoverPrecise", //values: "hoverPrecise", "hoverAccelerate", "clickButtons"
10		scrollerOrientation:"horizontal", //values: "horizontal", "vertical"
11		scrollEasing:"easeOutCirc", //easing type
12		scrollEasingAmount:800, //value: milliseconds
13		acceleration:2, //value: integer
14		scrollSpeed:600, //value: milliseconds
15		noScrollCenterSpace:0, //value: pixels
16		autoScrolling:0, //value: integer
17		autoScrollingSpeed:8000, //value: milliseconds
18		autoScrollingEasing:"easeInOutQuad", //easing type
19		autoScrollingDelay:2500 //value: milliseconds
20	};
21	var options=$.extend(defaults,options);
22    return this.each(function(){ 
23		//cache vars
24		var $this=$(this);
25		var $scrollerContainer=$this.children(".jTscrollerContainer");
26		var $scroller=$this.children(".jTscrollerContainer").children(".jTscroller");
27		var $scrollerNextButton=$this.children(".jTscrollerNextButton");
28		var $scrollerPrevButton=$this.children(".jTscrollerPrevButton");
29		//set scroller width
30		if(options.scrollerOrientation=="horizontal"){
31			$scrollerContainer.css("width",999999); 
32			var totalWidth=$scroller.outerWidth(true);
33			$scrollerContainer.css("width",totalWidth);
34		}else{
35			var totalWidth=$scroller.outerWidth(true);
36		}
37		var totalHeight=$scroller.outerHeight(true); //scroller height
38		//do the scrolling
39		if(totalWidth>$this.width() || totalHeight>$this.height()){ //needs scrolling		
40			var pos;
41			var mouseCoords;
42			var mouseCoordsY;
43			if(options.scrollerType=="hoverAccelerate"){ //type hoverAccelerate
44				var animTimer;
45				var interval=8;
46				$this.hover(function(){ //mouse over
47					$this.mousemove(function(e){
48						pos=findPos(this);
49						mouseCoords=(e.pageX-pos[1]);
50						mouseCoordsY=(e.pageY-pos[0]);
51					});
52					clearInterval(animTimer);
53					animTimer = setInterval(Scrolling,interval);
54				},function(){  //mouse out
55					clearInterval(animTimer);
56					$scroller.stop();
57				});
58				$scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
59			}else if(options.scrollerType=="clickButtons"){
60				ClickScrolling();
61			}else{ //type hoverPrecise
62				pos=findPos(this);
63				$this.mousemove(function(e){
64					mouseCoords=(e.pageX-pos[1]);
65					mouseCoordsY=(e.pageY-pos[0]);
66					var mousePercentX=mouseCoords/$this.width(); if(mousePercentX>1){mousePercentX=1;}
67					var mousePercentY=mouseCoordsY/$this.height(); if(mousePercentY>1){mousePercentY=1;}
68					var destX=Math.round(-((totalWidth-$this.width())*(mousePercentX)));
69					var destY=Math.round(-((totalHeight-$this.height())*(mousePercentY)));
70					$scroller.stop(true,false).animate({left:destX,top:destY},options.scrollEasingAmount,options.scrollEasing); 
71				});
72				$scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
73			}
74			//auto scrolling
75			if(options.autoScrolling>0){
76				AutoScrolling();
77			}
78		} else {
79			//no scrolling needed
80			$scrollerPrevButton.add($scrollerNextButton).hide(); //hide buttons
81		}
82		//"hoverAccelerate" scrolling fn
83		var scrollerPos;
84		var scrollerPosY;
85		function Scrolling(){
86			if((mouseCoords<$this.width()/2) && ($scroller.position().left>=0)){
87				$scroller.stop(true,true).css("left",0); 
88			}else if((mouseCoords>$this.width()/2) && ($scroller.position().left<=-(totalWidth-$this.width()))){
89				$scroller.stop(true,true).css("left",-(totalWidth-$this.width())); 
90			}else{
91				if((mouseCoords<=($this.width()/2)-options.noScrollCenterSpace) || (mouseCoords>=($this.width()/2)+options.noScrollCenterSpace)){
92					scrollerPos=Math.round(Math.cos((mouseCoords/$this.width())*Math.PI)*(interval+options.acceleration));
93					$scroller.stop(true,true).animate({left:"+="+scrollerPos},interval,"linear"); 
94				}else{
95					$scroller.stop(true,true);
96				}
97			}
98			if((mouseCoordsY<$this.height()/2) && ($scroller.position().top>=0)){
99				$scroller.stop(true,true).css("top",0); 
100			}else if((mouseCoordsY>$this.height()/2) && ($scroller.position().top<=-(totalHeight-$this.height()))){
101				$scroller.stop(true,true).css("top",-(totalHeight-$this.height())); 

102			}else{
103				if((mouseCoordsY<=($this.height()/2)-options.noScrollCenterSpace) || (mouseCoordsY>=($this.height()/2)+options.noScrollCenterSpace)){
104					scrollerPosY=Math.cos((mouseCoordsY/$this.height())*Math.PI)*(interval+options.acceleration);
105					$scroller.stop(true,true).animate({top:"+="+scrollerPosY},interval,"linear"); 
106				}else{
107					$scroller.stop(true,true);
108				}
109			}
110		}
111		//auto scrolling fn
112		var autoScrollingCount=0;
113		function AutoScrolling(){
114			$scroller.delay(options.autoScrollingDelay).animate({left:-(totalWidth-$this.width()),top:-(totalHeight-$this.height())},options.autoScrollingSpeed,options.autoScrollingEasing,function(){
115				$scroller.animate({left:0,top:0},options.autoScrollingSpeed,options.autoScrollingEasing,function(){
116					autoScrollingCount++;
117					if(options.autoScrolling>1 && options.autoScrolling!=autoScrollingCount){
118						AutoScrolling();
119					}
120				});
121			});
122		}
123		//click scrolling fn
124		function ClickScrolling(){
125			$scrollerPrevButton.hide();
126			$scrollerNextButton.show();
127			$scrollerNextButton.click(function(e){ //next button
128				e.preventDefault();
129				var posX=$scroller.position().left;
130				var diffX=totalWidth+(posX-$this.width());
131				var posY=$scroller.position().top;
132				var diffY=totalHeight+(posY-$this.height());
133				$scrollerPrevButton.stop().show("fast");
134				if(options.scrollerOrientation=="horizontal"){
135					if(diffX>=$this.width()){
136						$scroller.stop().animate({left:"-="+$this.width()},options.scrollSpeed,options.scrollEasing,function(){
137							if(diffX==$this.width()){
138								$scrollerNextButton.stop().hide("fast");
139							}
140						});
141					} else {
142						$scrollerNextButton.stop().hide("fast");
143						$scroller.stop().animate({left:$this.width()-totalWidth},options.scrollSpeed,options.scrollEasing);
144					}
145				}else{
146					if(diffY>=$this.height()){
147						$scroller.stop().animate({top:"-="+$this.height()},options.scrollSpeed,options.scrollEasing,function(){
148							if(diffY==$this.height()){
149								$scrollerNextButton.stop().hide("fast");
150							}
151						});
152					} else {
153						$scrollerNextButton.stop().hide("fast");
154						$scroller.stop().animate({top:$this.height()-totalHeight},options.scrollSpeed,options.scrollEasing);
155					}
156				}
157			});
158			$scrollerPrevButton.click(function(e){ //previous button
159				e.preventDefault();
160				var posX=$scroller.position().left;
161				var diffX=totalWidth+(posX-$this.width());
162				var posY=$scroller.position().top;
163				var diffY=totalHeight+(posY-$this.height());
164				$scrollerNextButton.stop().show("fast");
165				if(options.scrollerOrientation=="horizontal"){
166					if(posX+$this.width()<=0){
167						$scroller.stop().animate({left:"+="+$this.width()},options.scrollSpeed,options.scrollEasing,function(){
168							if(posX+$this.width()==0){
169								$scrollerPrevButton.stop().hide("fast");
170							}
171						});
172					} else {
173						$scrollerPrevButton.stop().hide("fast");
174						$scroller.stop().animate({left:0},options.scrollSpeed,options.scrollEasing);
175					}
176				}else{
177					if(posY+$this.height()<=0){
178						$scroller.stop().animate({top:"+="+$this.height()},options.scrollSpeed,options.scrollEasing,function(){
179							if(posY+$this.height()==0){
180								$scrollerPrevButton.stop().hide("fast");
181							}
182						});
183					} else {
184						$scrollerPrevButton.stop().hide("fast");
185						$scroller.stop().animate({top:0},options.scrollSpeed,options.scrollEasing);
186					}
187				}
188			});
189		}
190	});  
191 };  
192})(jQuery); 
193//global js functions
194//find element Position
195function findPos(obj){
196	var curleft=curtop=0;
197	if (obj.offsetParent){
198		curleft=obj.offsetLeft
199		curtop=obj.offsetTop
200		while(obj=obj.offsetParent){
201			curleft+=obj.offsetLeft
202			curtop+=obj.offsetTop
203		}
204	}
205	return [curtop,curleft];
206}