https://editurastiinta.md/js/jquery.blueberry.js

1/*
2 * jQuery Blueberry Slider v0.4 BETA
3 * http://marktyrrell.com/labs/blueberry/
4 *
5 * Copyright (C) 2011, Mark Tyrrell <[email protected]>
6 *
7 * This program is free software: you can redistribute it and/or modify
8 * it under the terms of the GNU General Public License as published by
9 * the Free Software Foundation, either version 3 of the License, or
10 * (at your option) any later version.
11 *
12 * This program is distributed in the hope that it will be useful,
13 * but WITHOUT ANY WARRANTY; without even the implied warranty of
14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
15 * GNU General Public License for more details.
16 *
17 * You should have received a copy of the GNU General Public License
18 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
19 *
20 */
21
22(function($){
23	$.fn.extend({
24		blueberry: function(options) {
25
26			//default values for plugin options
27			var defaults = {
28				interval: 8000,
29				duration: 500,
30				lineheight: 1,
31				height: 'auto', //reserved
32				hoverpause: false,
33				pager: true,
34				nav: true, //reserved
35				keynav: true
36			}
37			var options =  $.extend(defaults, options);
38 
39			return this.each(function() {
40				var o = options;
41				var obj = $(this);
42
43				//store the slide and pager li
44				var slides = $('.slides li', obj);
45				var pager = $('.pager li', obj);
46
47				//set initial current and next slide index values
48				var current = 0;
49				var next = current+1;
50
51				//get height and width of initial slide image and calculate size ratio
52				var imgHeight = slides.eq(current).find('img').height();
53				var imgWidth = slides.eq(current).find('img').width();
54				var imgRatio = imgWidth/imgHeight;
55
56				//define vars for setsize function
57				var sliderWidth = 0;
58				var cropHeight = 0;
59
60				//hide all slides, fade in the first, add active class to first slide
61				slides.hide().eq(current).fadeIn(o.duration).addClass('active');
62				
63
64				//build pager if it doesn't already exist and if enabled
65				if(pager.length) {
66					pager.eq(current).addClass('active');
67				} else if(o.pager){
68					obj.append('<ul class="pager"></ul>');
69					slides.each(function(index) {
70						$('.pager', obj).append('<li><a href="#"><span>'+index+'</span></a></li>')
71					});
72					pager = $('.pager li', obj);
73					pager.eq(current).addClass('active');
74				}
75
76				//rotate to selected slide on pager click
77				if(pager){
78					$('a', pager).click(function() {
79						//stop the timer
80						clearTimeout(obj.play);
81						//set the slide index based on pager index
82						next = $(this).parent().index();
83						//rotate the slides
84						rotate();
85						return false;
86					});
87				}
88
89				//primary function to change slides
90				var rotate = function(){
91					//fade out current slide and remove active class,
92					//fade in next slide and add active class
93					slides.eq(current).fadeOut(o.duration).removeClass('active')
94						.end().eq(next).fadeIn(o.duration).addClass('active').queue(function(){
95							//add rotateTimer function to end of animation queue
96							//this prevents animation buildup caused by requestAnimationFrame
97							//rotateTimer starts a timer for the next rotate
98							rotateTimer();
99							$(this).dequeue()
100					});
101
102					//update pager to reflect slide change
103					if(pager){
104						pager.eq(current).removeClass('active')
105							.end().eq(next).addClass('active');
106					}
107
108					//update current and next vars to reflect slide change
109					//set next as first slide if current is the last
110					current = next;
111					next = current >= slides.length-1 ? 0 : current+1;
112				};
113				//create a timer to control slide rotation interval
114				var rotateTimer = function(){
115					obj.play = setTimeout(function(){
116						//trigger slide rotate function at end of timer
117						rotate();
118					}, o.interval);
119				};
120				//start the timer for the first time
121				rotateTimer();
122
123				//pause the slider on hover
124				//disabled by default due to bug
125				if(o.hoverpause){
126					slides.hover(function(){
127						//stop the timer in mousein
128						clearTimeout(obj.play);
129					}, function(){
130						//start the timer on mouseout
131						rotateTimer();
132					});
133				}
134
135				//calculate and set height based on image width/height ratio and specified line height
136				var setsize = function(){
137					sliderWidth = $('.slides', obj).width();
138					cropHeight = Math.floor(((sliderWidth/imgRatio)/o.lineheight))*o.lineheight;
139
140					$('.slides', obj).css({height: cropHeight});
141				};
142				setsize();
143
144				//bind setsize function to window resize event
145				$(window).resize(function(){
146					setsize();
147				});
148				
149				
150
151				//Add keyboard navigation
152
153				if(o.keynav){
154					$(document).keyup(function(e){
155
156						switch (e.which) {
157
158							case 39: case 32: //right arrow & space
159
160								clearTimeout(obj.play);
161
162								rotate();
163
164								break;
165
166
167							case 37: // left arrow
168								clearTimeout(obj.play);
169								next = current - 1;
170								rotate();
171
172								break;
173						}
174
175					});
176				}
177
178
179			});
180		}
181	});
182})(jQuery);