https://www.khaskhabar.com/js/slideGallery.js

1/*
2---
3
4script: slideGallery.js
5
6description: Multifunctional gallery for MooTools
7
8license: MIT-style license
9
10authors:
11- Sergii Kashcheiev
12
13requires:
14- core/1.3: Options
15- core/1.3: Events
16- core/1.3: Fx.Tween
17- core/1.3: Fx.Transitions
18
19provides: [slideGallery, fadeGallery]
20
21...
22*/
23var slideGallery = new Class({
24	Version: "1.3.1",
25	Implements: [Options, Events],
26	options: {
27		holder: ".holder",
28		elementsParent: "ul",
29		elements: "li",
30		nextItem: ".next",
31		prevItem: ".prev",
32		stop: ".stop",
33		start: ".start",
34		speed: 600,
35		duration: 4000,
36		steps: 1,
37		current: 0,
38		transition: "sine:in:out",
39		direction: "horizontal",
40		mode: "callback",
41		currentClass: "current",
42		nextDisableClass: "next-disable",
43		prevDisableClass: "prev-disable",
44		paging: false,
45		pagingEvent: "click",
46		pagingHolder: ".paging",
47		random: false,
48		autoplay: false,
49		autoplayOpposite: false,
50		stopOnHover: true
51		/* 
52		onStart: $empty,
53		onPlay: $empty,
54		*/ 
55	},
56	initialize: function(gallery, options) {
57		if(gallery.length == null) this.gallery = gallery;
58		else this.gallery = gallery[0];
59		if(!this.gallery) return false;
60		this.setOptions(options);
61		this.holder = this.gallery.getElement(this.options.holder);
62		this.itemsParent = this.holder.getElement(this.options.elementsParent);
63		this.items = this.itemsParent.getElements(this.options.elements);
64		this.next = this.gallery.getElement(this.options.nextItem);
65		this.prev = this.gallery.getElement(this.options.prevItem);
66		this.stop = this.gallery.getElement(this.options.stop);
67		this.start = this.gallery.getElement(this.options.start);
68		this.current = this.options.current;
69		this.bound = {rotate: this.rotate.bind(this) }
70		
71		if(this.options.direction == "horizontal") {
72			this.direction = "margin-left";
73			this.size = this.items[0].getWidth();
74			this.visible = Math.round(this.holder.getWidth()/this.size);
75		}
76		else {
77			this.direction = "margin-top";
78			this.size = this.items[0].getHeight();
79			this.visible = Math.round(this.holder.getHeight()/this.size);
80		}
81
82		if(this.items.length <= this.visible) {
83			if(this.next) this.next.addClass(this.options.nextDisableClass).addEvent("click", function() {return false;});
84			if(this.prev) this.prev.addClass(this.options.prevDisableClass).addEvent("click", function() {return false;});
85			if(this.stop) this.stop.addEvent("click", function() {return false;});
86			if(this.start) this.start.addEvent("click", function() {return false;});
87			this.gallery.addClass("stopped no-active");
88			this.fireEvent("start", this.current, this.visible, this.items.length, this.items[this.current]);
89			return false;
90		}
91			
92		this.options.steps = this.options.steps > this.visible ? this.visible : this.options.steps;
93		this.options.duration = this.options.duration < 1000 ? 1000 : this.options.duration;
94		this.options.speed = this.options.speed > 6000 ? 6000 : this.options.speed;
95		if(this.options.speed > this.options.duration) this.options.speed = this.options.duration;
96		
97		this.fx = new Fx.Tween(this.itemsParent, {
98			property: this.direction,
99			duration: this.options.speed,
100			transition: this.options.transition,
101			link: "cancel",
102			fps: 100,
103			onCancel: function() {
104				if(!this.callChain()) this.fireEvent("chainComplete", this.subject);
105				return this;
106			}
107		});
108	
109		if(this.options.random) this.shuffle();
110		this.getInitialCurrent();
111		
112		if(this.options.mode == "circle") {
113			while(this.items.length < this.options.steps+this.visible) {
114				this.itemsParent.innerHTML += this.itemsParent.innerHTML;
115				this.items = this.itemsParent.getElements(this.options.elements);
116			}
117			for(var i=0; i<this.current; i++) {
118				this.items[i].inject(this.itemsParent, "bottom");
119			}
120			this.options.paging = false;
121		}
122		else {
123			if(this.options.paging) this.createPaging();
124			this.play(false);
125		}
126		
127		if(this.next) {
128			this.next.addEvent("click", function() {
129				this.nextSlide();
130				return false;
131			}.bind(this));
132		}
133		
134		if(this.prev) {
135			this.prev.addEvent("click", function() {
136				this.prevSlide();
137				return false;
138			}.bind(this));
139		}
140		
141		if(this.options.autoplay || this.options.autoplayOpposite) this.timer = this.bound.rotate.delay(this.options.duration);
142		else this.gallery.addClass("stopped");
143		
144		if(this.start) {
145			this.start.addEvent("click", function() {
146				clearTimeout(this.timer);
147				this.gallery.removeClass("stopped");
148				this.timer = this.bound.rotate.delay(this.options.duration);
149				return false;

150			}.bind(this));
151		}
152		
153		if(this.stop) {
154			this.stop.addEvent("click", function() {
155				this.gallery.addClass("stopped");
156				clearTimeout(this.timer);
157				return false;
158			}.bind(this));
159		}
160		
161		if(this.options.stopOnHover) {
162			this.gallery.addEvent("mouseenter", function() {
163				clearTimeout(this.timer);
164			}.bind(this));
165			this.gallery.addEvent("mouseleave", function() {
166				if(!this.gallery.hasClass("stopped")) {
167					clearTimeout(this.timer);
168					this.timer = this.bound.rotate.delay(this.options.duration);
169				}
170			}.bind(this));
171		}
172		
173		this.fireEvent("start", this.current, this.visible, this.items.length, this.items[this.current]);
174	},
175	getInitialCurrent: function() {
176		var tempCurrent = this.items.get("class").indexOf(this.options.currentClass);
177		if(tempCurrent != -1) this.current = tempCurrent;
178		else {
179			if(this.current > this.items.length-1) this.current = this.items.length-1;
180			else	if(this.current < 0) this.current = 0;
181		}
182		if(this.options.mode != "circle" && this.visible+this.current >= this.items.length) this.current = this.items.length-this.visible;
183		return this;
184	},
185	rotate: function() {
186		if(!this.options.autoplayOpposite) this.nextSlide();
187		else this.prevSlide();
188		this.timer = this.bound.rotate.delay(this.options.duration);
189		return this;
190	},
191	play: function(animate) {
192		if(this.options.mode == "line") this.sidesChecking();
193		if(animate) this.fx.start(-this.current*this.size);
194		else this.fx.set(-this.current*this.size);
195		if(this.options.paging) this.setActivePage();
196		this.fireEvent("play", this.current, this.visible, this.items.length, this.items[this.current]);
197		return this;
198	},
199	nextSlide: function() {
200		if(this.options.mode != "circle") {
201			if(this.visible+this.current >= this.items.length) {
202				if(this.options.mode == "callback") this.current = 0;
203			}
204			else if(this.visible+this.current+this.options.steps >= this.items.length) {
205				this.current = this.items.length-this.visible;
206			}
207			else this.current += this.options.steps;
208			this.play(true);
209		}
210		else {
211			var temp = this.current;
212			if((this.current += this.options.steps) >= this.items.length) this.current -= this.items.length;
213			this.fx.start(-this.size*this.options.steps).chain(function() {
214				for(var i=0; i<this.options.steps; i++) {
215					if(temp >= this.items.length) temp = 0;
216					this.items[temp++].inject(this.itemsParent, "bottom");
217				}
218				this.fx.set(0);
219			}.bind(this));
220			this.fireEvent("play", this.current, this.visible, this.items.length, this.items[this.current]);
221		}
222		return this;
223	},
224	prevSlide: function() {
225		if(this.options.mode != "circle") {
226			if(this.current <= 0) {
227				if(this.options.mode == "callback") this.current = this.items.length-this.visible;
228			}
229			else if(this.current-this.options.steps <= 0) {
230				this.current = 0;
231			}
232			else	this.current -= this.options.steps;
233			this.play(true);
234		}
235		else {
236			for(var i=0; i<this.options.steps; i++) {
237				if(this.current-1 < 0) this.current = this.items.length;
238				this.items[--this.current].inject(this.itemsParent, "top");
239			}
240			this.fx.set(-this.size*this.options.steps).start(0);
241			this.fireEvent("play", this.current, this.visible, this.items.length, this.items[this.current]);
242		}
243		return this;
244	},
245	sidesChecking: function() {
246		this.next.removeClass(this.options.nextDisableClass);
247		this.prev.removeClass(this.options.prevDisableClass);
248		if(this.visible+this.current >= this.items.length) this.next.addClass(this.options.nextDisableClass)
249		else if(this.current==0) this.prev.addClass(this.options.prevDisableClass);
250		return this;
251	},
252	createPaging: function() {
253		this.paging = new Element("ul");
254		var pagingHold = this.gallery.getElement(this.options.pagingHolder);
255		if(pagingHold != null) this.paging.inject(pagingHold);
256		else this.paging.inject(this.gallery).addClass("paging");
257		
258		var length = Math.ceil((this.items.length-this.visible)/this.options.steps)+1;
259		var str = "";
260		for(var i=0; i<length; i++) {
261			str += '<li><a href="#">' + parseInt(i+1) + '</a></li>';
262		}
263		this.paging = this.paging.set("html", str).getElements("a");
264		this.paging.each(function(el, i) {
265			el.addEvent(this.options.pagingEvent, function() {
266				if(i < length-1) this.current = i*this.options.steps;
267				else this.current = this.items.length-this.visible;
268				this.play(true);
269				return false;

270			}.bind(this));
271		}.bind(this));
272		return this;
273	},
274	setActivePage: function() {
275		this.paging.removeClass("active")[Math.ceil(this.current/this.options.steps)].addClass("active");
276		return this;
277	},
278	shuffle: function() {
279		var str = "";
280		this.items.sort(function(){return 0.5 - Math.random()}).each(function(el) {
281			str += new Element("div").adopt(el).get("html");
282		});
283		this.items = this.itemsParent.set("html", str).getElements(this.options.elements);
284		return this;
285	}
286});
287var fadeGallery = new Class({
288	Extends: slideGallery,
289	initialize: function(gallery, options) {
290		if(options.mode == "circle") options.mode = "callback";
291		this.parent(gallery, options);
292		this.fxFade = [];
293		this.items.each(function(el, i) {
294			this.fxFade[i] = new Fx.Tween(el, {
295				property: "opacity",
296				duration: this.options.speed,
297				transition: this.options.transition,
298				link: "cancel"
299			});
300			this.fxFade[i].set(0);
301		}.bind(this));
302		this.play(false);
303	},
304	play: function(animate) {
305		if(this.previous == null) {
306			this.previous = 0;
307			return false;
308		}
309		if(this.options.mode == "line") this.sidesChecking();
310		if(animate) {
311			this.fxFade[this.previous].start(0);
312			this.fxFade[this.current].start(1);
313		}
314		else {
315			this.fxFade[this.previous].set(0);
316			this.fxFade[this.current].set(1);
317		}
318		this.previous = this.current;
319		if(this.options.paging) this.setActivePage();
320		this.fireEvent("play", this.current, this.visible, this.items.length, this.items[this.current]);
321	}
322});