http://kuhni-lili.ru/js/jquery.simplyscroll.js

1/*
2 * simplyScroll 1.0.4 - a scroll-tastic jQuery plugin
3 *
4 * http://logicbox.net/jquery/simplyscroll
5 * http://logicbox.net/blog/simplyscroll-jquery-plugin
6 * http://plugins.jquery.com/project/simplyScroll
7 *
8 * Copyright (c) 2009 Will Kelly - http://logicbox.net
9 *
10 * Dual licensed under the MIT (MIT-LICENSE.txt)
11 * and GPL (GPL-LICENSE.txt) licenses.
12 *
13 * Last revised: 03/07/2009 21:13
14 *
15 */
16
17(function($) {
18
19$.fn.simplyScroll = function(o) {
20	return this.each(function() {
21		new $.simplyScroll(this,o);
22	});
23};
24
25var defaults = {
26	className: 'simply-scroll',
27	frameRate: 24, //No of movements per second
28	speed: 2, //No of pixels per frame
29	horizontal: true,
30	autoMode: 'off', //disables buttons 'loop','bounce'
31	pauseOnHover: true,
32	startOnLoad: false, //use this if having rendering problems (safari 3 + Mac OSX?)
33	localJsonSource: '', //format [{"src":"images/pic.jpg","title":"title","link":"http://"},{etc..}]
34	flickrFeed: '',
35	jsonImgWidth: 1015,
36	jsonImgHeight: 180
37};
38	
39$.simplyScroll = function(el,o) {
40	
41	var self = this;
42	
43	this.o = $.extend({}, defaults, o || {});
44	this.auto = this.o.autoMode!=="off" ? true : false;
45	
46	//called on ul/ol/div etc
47	this.$list = $(el);
48	
49	//generate extra markup
50	this.$list.addClass('simply-scroll-list')
51		.wrap('<div class="simply-scroll-clip"></div>')
52		.parent().wrap('<div class="' + this.o.className + ' simply-scroll-container"></div>');
53	
54	if (!this.o.auto) { //button placeholders
55		this.$list.parent().parent()
56		.prepend('<div class="simply-scroll-forward"></div>')
57		.prepend('<div class="simply-scroll-back"></div>');
58	}
59	
60	//load image data
61	if (this.o.flickrFeed) {
62		$.getJSON(this.o.flickrFeed + "&format=json&jsoncallback=?",
63			function(data) {
64				json = [];
65				$.each(data.items, function(i,item) {
66					json.push({
67						"src": item.media.m,
68						"title": item.title,
69						"link": item.link
70					});
71				});
72				self.renderData(json);
73			}
74		);
75	} else if (this.o.localJsonSource) {
76		$.getJSON(this.o.localJsonSource,
77			function(json) {
78				self.renderData(json);
79			}
80		);
81	} else {
82		
83		if (!this.o.startOnLoad) {
84			this.init();
85		} else {
86			//wait for load before completing setup
87			$(window).load(function() { self.init();  });
88		}
89		
90	}
91		
92};
93	
94$.simplyScroll.fn = $.simplyScroll.prototype = {};
95
96$.simplyScroll.fn.extend = $.simplyScroll.extend = $.extend;
97
98$.simplyScroll.fn.extend({
99	init: function() {
100		//shortcuts
101		this.$items = this.$list.children();
102		this.$clip = this.$list.parent();
103		this.$container = this.$clip.parent();
104
105		if (!this.o.horizontal) {
106			this.itemMax = this.$items[0].offsetHeight; //this.$items[0].offsetHeight;
107			this.clipMax = this.$clip.height(); //this.$clip[0].offsetHeight;
108			this.dimension = 'height';			
109			this.moveBackClass = 'simply-scroll-btn-up';
110			this.moveForwardClass = 'simply-scroll-btn-down';
111		} else {
112			this.itemMax = this.$items[0].offsetWidth;
113			this.clipMax = this.$clip.width();			
114			this.dimension = 'width';
115			this.moveBackClass = 'simply-scroll-btn-left';
116			this.moveForwardClass = 'simply-scroll-btn-right';
117		}
118		
119		this.posMin = 0;
120		this.posMax = this.$items.length * this.itemMax;
121		this.$list.css(this.dimension,this.posMax +'px');
122		
123		if (this.o.autoMode=='loop') {
124			var addItems = Math.ceil(this.clipMax / this.itemMax);	
125			this.$items.slice(0,addItems).clone(true).appendTo(this.$list);
126			this.posMax += (this.clipMax - this.o.speed);
127			this.$list.css(this.dimension,this.posMax+(this.itemMax*addItems) +'px');
128		}
129		
130		this.interval = null;	
131		this.intervalDelay = Math.floor(1000 / this.o.frameRate);
132		
133		//ensure that speed is divisible by item width
134		while (this.itemMax % this.o.speed !== 0) {
135			this.o.speed--;
136			if (this.o.speed===0) {
137				this.o.speed=1; break;	
138			}
139		}
140		
141		var self = this;
142		this.trigger = null;
143		this.funcMoveBack = function() { self.trigger=this;self.moveBack(); };
144		this.funcMoveForward = function() { self.trigger=this;self.moveForward(); };
145		this.funcMoveStop = function() { self.moveStop(); };
146		this.funcMoveResume = function() { self.moveResume(); };
147		
148		if (this.auto) {
149			if (this.o.pauseOnHover) {
150				this.$clip.hover(this.funcMoveStop,this.funcMoveResume);
151			}
152			this.moveForward();
153		} else {
154			this.$btnBack = $('.simply-scroll-back',this.$container)
155				.addClass('simply-scroll-btn' + ' ' + this.moveBackClass + ' ' + 'disabled')
156				.hover(this.funcMoveBack,this.funcMoveStop);
157			this.$btnForward = $('.simply-scroll-forward',this.$container)
158				.addClass('simply-scroll-btn' + ' ' + this.moveForwardClass)
159				.hover(this.funcMoveForward,this.funcMoveStop);
160		}
161	},
162	moveForward: function() {
163		var self = this;
164		this.movement = 'forward';
165		if (this.trigger !== null) {
166			this.$btnBack.removeClass('disabled');
167		}
168		self.interval = setInterval(function() {
169			if (!self.o.horizontal && self.$clip[0].scrollTop < (self.posMax-self.clipMax)) {
170				self.$clip[0].scrollTop += self.o.speed;
171			} else if (self.o.horizontal && self.$clip[0].scrollLeft < (self.posMax-self.clipMax)) {
172				self.$clip[0].scrollLeft += self.o.speed; 
173			} else if (self.o.autoMode=='loop') {
174				self.resetPos();
175			} else {
176				self.moveStop(self.movement);
177			}
178		},self.intervalDelay);
179	},
180	moveBack: function() {
181		var self = this;
182		this.movement = 'back';
183		if (this.trigger !== null) {
184			this.$btnForward.removeClass('disabled');
185		}
186		self.interval = setInterval(function() {
187			if (!self.o.horizontal && self.$clip[0].scrollTop>0) {
188				self.$clip[0].scrollTop -= self.o.speed;
189			} else if (self.o.horizontal && self.$clip[0].scrollLeft>0) {
190				self.$clip[0].scrollLeft -= self.o.speed;
191			} else if (self.o.autoMode=='loop') {
192				self.resetPos();
193			} else {
194				self.moveStop(self.movement);
195			}
196		},self.intervalDelay);
197	},
198	moveStop: function(moveDir) {
199		clearInterval(this.interval);	
200		if (this.trigger!==null) {
201			if (typeof moveDir != "undefined") {
202				$(this.trigger).addClass('disabled');
203			}
204			this.trigger = null;
205		}
206		if (this.auto) {
207			if (this.o.autoMode=='bounce') {
208				moveDir == 'forward' ? this.moveBack() : this.moveForward();
209			}
210		}
211	},
212	moveResume: function() {
213		this.movement=='forward' ? this.moveForward() : this.moveBack();
214	},
215	resetPos: function() {
216		if (!this.o.horizontal) {
217			this.$clip[0].scrollTop = 0;
218		} else {
219			this.$clip[0].scrollLeft = 0;
220		}
221	},
222	renderData: function(json) {
223		if (json.length>0) { //render json data
224			var self = this;
225			$.each(json, function(i,item) {
226				$("<img/>").attr({
227					src: item.src,
228					title: item.title,
229					alt: item.title,
230					width: self.o.jsonImgWidth,
231					height: self.o.jsonImgHeight
232				}).appendTo(self.$list);
233			});
234			this.init();
235		}
236	}
237});
238		  
239})(jQuery);