Context Navigation

← Previous Revision
Next Revision →
Blame
Revision Log

source: extensions/Slide/js/slideshow.js

Last change on this file was 28049, checked in by Miklfe, 10 years ago
Bug quicksearch corrigé
File size: 15.8 KB

Line
1	/*
2	* Slideshow - v1.0 - 2013-10-01
3	* http://piwitheme.fr/
4	*
5	*/
6
7	(function($){
8	$.fn.slideshow = function(args){
9
10	// Variables
11	var defaults =
12	{
13	displayPlayPause : true,
14	autoPlay : false,
15	displayNextPrev : true,
16	thumb_always : true,
17	navType : 'nav', //thumb, nav or no
18	styleSlideshow : 'Fade', //Fade or Slide
19	target : '_self', //_blank or _self
20	speed : 200,
21	width : 400,
22	height : 300,
23	thumb_width : 60,
24	thumb_height : 60,
25	};
26
27	var options = $.extend(defaults, args);
28
29	this.each(function(){
30	var ele = this,
31	n_thumb = Math.floor((options.width) / options.thumb_width),
32	cont_h = options.height - 100;
33
34	if(options.navType == 'thumb'){
35	cont_h = options.height - (options.thumb_height + 60);
36	};
37
38	var v_ele =
39	{
40	playOn : false,
41	i_img : 0,
42	m_s : 0,
43	interval : '',
44	thumb_i : 1,
45	imgsLength : options.imgs.length,
46	speed : options.speed,
47	style : options.styleSlideshow,
48	s_w : options.width,
49	n_thumb : n_thumb,
50	playOnT : false,
51	navThumb_w : '',
52	};
53	$(ele).data('e',v_ele);
54	$(ele).width(options.width).height(options.height).addClass(options.styleSlideshow + ' slideshow').append($('<div />').addClass('slidecontent').append($('<div />').addClass('contener_slideshow').append($('<ul />').height(cont_h))).append($('<div/>').addClass('control_slideshow')));
55
56
57	//mise en place des images
58	$.each(options.imgs, function(i, img){
59	var $imag = img.src,
60	$alt = img.alt,
61	$title = img.title,
62	$url = img.url,
63	$descr = img.descr,
64	$height = img.height,
65	$width = img.width;
66
67	if(typeof $descr === 'undefined'){
68	var divDescr = ""
69	}else{
70	var divDescr =[$('<div />').addClass('descr').html($descr)]
71	};
72
73	if(typeof $url === 'undefined'){
74	var blockImg = [$('<div />').append(divDescr).append($('<img />').attr({'src':$imag , 'alt':$alt , 'title':$title }))]
75	}else{
76	var blockImg = [$('<a />').attr({'href':$url , 'target':options.target}).append(divDescr).append($('<img />').attr({'src':$imag , 'alt':$alt , 'title':$title }))]
77	}
78
79	$('ul',ele).append($('<li />').addClass('img-' + i).append($('<div />').addClass('contenerImg').width(options.width).height(cont_h).append(blockImg)));
80
81
82	_resizeSlideshowImag(ele, i, $height,$width);
83
84	});
85
86
87	//slide_____________________________________________________________________________________________
88	if(options.styleSlideshow == 'Slide'){
89	var $ul_w = (options.imgs.length + 1) * options.width;
90	$('ul', ele).wrap($('<div />').addClass('slideCont')).width($ul_w);
91	$('ul', ele).prepend($('ul li:last-child', ele).clone().css('margin-left','-'+ options.width +'px'));
92	$('ul', ele).append($('ul li:nth-child(2)', ele).clone());
93	$('li:nth-child(2)',ele).addClass('activ');
94	};
95
96	//fade___________________________________________________________________________________________________________
97	if(options.styleSlideshow == 'Fade'){
98	$('li' ,ele).css('display','none')
99	$('li',ele).first().show().addClass('activ')
100	};
101
102	//bouton play/pause________________________________________________________________________________________________________________________
103	if(options.displayPlayPause == true){
104	$('.control_slideshow', ele).append($('<div />').addClass('slideshow_control'))
105	};
106
107	//auto démarage____________________________________________________________________________________________________________
108	if(options.autoPlay == true){
109	_start(ele)
110	$('.slideshow_control',ele).addClass('pause');
111	$(ele).data('e').playOn = true;
112	_navShow(ele)
113	}else{
114	$('.slideshow_control',ele).addClass('play');
115	_pause(ele);
116	$(ele).data('e').playOn = false;
117	}
118
119
120
121	//lien/thumb de navigation__________________________________________________________________________________________________________________________
122	if(options.navType == 'nav' \|\| options.navType == 'thumb'){
123	$('.control_slideshow', ele).append($('<div />').addClass('clt_thumb')).append($('<div/>').addClass('link'));
124	if(options.navType == 'nav'){
125	$('.clt_thumb', ele).hide();
126	for( var i = 0;
127	i < options.imgs.length;
128	i++){
129	$('.link', ele).append($('<span />').attr({'id':i,'class':'slideshow-' + i + ' nav-link slideshow-link','imag':i}).html(i+1));
130	$('.nav-link',ele).first().addClass('selected');
131	}
132	};
133
134	if(options.navType == 'thumb'){
135	if(options.thumb_always == false){
136	$('.link', ele).hide();
137	}else{
138	$('.clt_thumb', ele).hide()
139	};
140	var $resize_thumb_w = ((options.width-(n_thumb * 5))/n_thumb),
141	$r = options.thumb_width/options.thumb_height,
142	$rezise_thumb_h = $resize_thumb_w / $r,
143	$navThumb_w = options.imgs.length * ($resize_thumb_w + 6);
144	$(ele).data('e').$navThumb_w = $navThumb_w;
145	$('.link', ele).width(options.width).height(options.thumb_height + 10);
146	$('.link', ele).append($('<div />').addClass('nav-thumb-content').height($rezise_thumb_h + 10).width($navThumb_w));
147	$.each(options.imgs, function(i, img){
148	var imag = img.src;
149	$('.nav-thumb-content', ele).append($('<span />').addClass('slideshow-' + i + ' nav-link slideshow-thumb').attr('imag', i).width($resize_thumb_w).height($rezise_thumb_h).append($('<img />').attr({'class':'thumb','src':imag})));
150	});
151	if($navThumb_w > options.width){
152	$('.nav-thumb-content', ele).wrap($('<div />').addClass('nav-thumb-slide').width( options.width));
153	$('.link', ele).append($('<div />').addClass('thumb_control thumb-left')).append($('<div />').addClass('thumb_control thumb-right'));
154	}
155	}
156	};
157
158	//flèche next/previous_______________________________________________________________________________________________________________________
159	if(options.displayNextPrev == true){
160	$('.contener_slideshow', ele).append($('<div />').addClass('nav prev').height(cont_h)).append($('<div />').addClass('nav next').height(cont_h));
161	};
162
163	//________________________________________action___________________________________________________________________________________________________________
164
165	//click flèche de navigation___________________________________________________________________________________________________________________________
166	$('.next', ele).on('click', function(){
167	_rotate(ele);
168	_thumbSlide(ele)
169	});
170
171	$('.prev',ele).on('click', function() {
172	if($(ele).data('e').i_img == 0){
173	$(ele).data('e').i_img = options.imgs.length - 2
174	}else{
175	$(ele).data('e').i_img = $(ele).data('e').i_img - 2
176	};
177	if(options.styleSlideshow == 'Fade'){
178	_rotate(ele);
179	_thumbSlide(ele)
180	}else{
181	$(ele).data('e').m_s = $(ele).data('e').m_s + (2 * options.width);
182	_rotate(ele);
183	_thumbSlide(ele)
184	}
185	});
186
187	//click sur un lien/thumb_________________________________________________________________________________________________________________________________
188	$('.nav-link',ele).on('click', function(){
189	$(ele).data('e').playOnT = $(ele).data('e').playOn;
190	if($(ele).data('e').playOn == true){
191	$(ele).data('e').playOn = false;
192	_pause(ele);
193	}
194	var $new_i_img = parseInt($(this).attr('imag')),
195	$r;
196	$r = $new_i_img - ($(ele).data('e').i_img + 1)
197	$(ele).data('e').m_s = $(ele).data('e').m_s - ($r * options.width);
198	$(ele).data('e').i_img = $new_i_img - 1;
199	_rotate(ele);
200	if ($(ele).data('e').playOnT == true){
201	$(ele).data('e').playOn = true;
202	_start(ele)
203	}
204	});
205
206	//ouvrir les thumb______________________________________________________________________________________________________________________________________________
207	$('.clt_thumb',ele).on('click', function(){
208	$(this).toggleClass('show');
209	$('.link', ele).slideToggle('slow');
210	});
211
212	//bouton play/pause_____________________________________________________________________________________________________________________________________________
213	$('.slideshow_control', ele).on('click',function() {
214	$(this).toggleClass('play pause');
215	if (($(ele).data('e').playOn) == true){
216	$(ele).data('e').playOn = false;
217	_pause(ele)
218	}else{
219	$(ele).data('e').playOn = true;
220	_start(ele)
221	}
222	});
223
224	//mouse over image_______________________________________________________________________________________________________________________________________________
225	$('.contener_slideshow', ele).find('img').hover(function() {
226	$(ele).data('e').playOnT = $(ele).data('e').playOn;
227	if($(ele).data('e').playOn == true){
228	$(ele).data('e').playOn = false;
229	_pause(ele);
230	}
231	$(this).parent().find('.descr').slideDown(200, function() {
232	$(this).clearQueue();
233	});
234	}, function() {
235	if ($(ele).data('e').playOnT == true){
236	$(ele).data('e').playOn = true;
237	_start(ele)
238	}
239	$(this).parent().find('.descr').slideUp(200, function() {
240	$(this).clearQueue();
241	});
242	});
243
244	//mouse over nav
245	$('.nav', ele).hover(function() {
246	$(ele).data('e').playOnT = $(ele).data('e').playOn;
247	if($(ele).data('e').playOn == true){
248	$(ele).data('e').playOn = false;
249	_pause(ele);
250	}
251
252	}, function() {
253	if ($(ele).data('e').playOnT == true){
254	$(ele).data('e').playOn = true;
255	_start(ele)
256	}
257	});
258
259
260	//nav thumb________________________________________________________________________________________________________________________________________________
261	$('.thumb-right',ele).on('mousedown',function(){
262	$('.nav-thumb-content', ele).animate({
263	left: (-($(ele).data('e').navThumb_w - options.width))
264	}, 1000)
265	}).mouseup(function(){
266	$('.nav-thumb-content', ele).stop()
267	});
268
269	$('.thumb-left',ele).on('mousedown',function(){
270	$('.nav-thumb-content', ele).animate({
271	left:0
272	}, 1000)
273	}).mouseup(function(){
274	$('.nav-thumb-content', ele).stop()
275	});
276
277	//___________________________________________Fonctions_____________________________________________________________________________________
278	//resize and center image__________________________________________________________________________________________________________________
279
280	function _resizeSlideshowImag (ele, i, $img_h,$img_w){
281
282	var $img = $('ul li.img-' + i +' img ',ele),
283	$descr = $img.prev(),
284	$img_r = $img_h/$img_w,
285	$box_h = cont_h,
286	$box_w = options.width,
287	$box_r = $box_h/$box_w,
288	$new_h,
289	$new_w;
290	if(($img_h > $box_h) \|\| ($img_w > $box_w)){
291	if($box_r < $img_r){
292	$new_h = $box_h - 30;
293	$new_w = $box_h / $img_r
294	}else{
295	$new_h = ($box_w * $img_r) - 30;
296	$new_w = $box_w
297	};
298
299	}else{
300	$new_h = $img_h;
301	$new_w = $img_w;
302	};
303	var $left = ($(ele).data('e').s_w / 2)-($new_w / 2) + 'px',
304	$top = ($box_h / 2)-($new_h / 2) + 'px';
305	$img.css({
306	width : $new_w + 'px',
307	height : $new_h + 'px',
308	left : $left,
309	top : $top,
310	});
311	$descr.css(
312	{
313	left : $left,
314	width : $new_w + 'px',
315	height : $new_h/4 + 'px',
316	bottom : (($box_h / 2)-($new_h / 2)) + 'px',
317	})
318	};
319
320	//animation________________________________________________________________________________________________________________________________
321	function _rotate(ele) {
322	var style = $(ele).data('e').style;
323	if(style == 'Fade'){
324	_fade(ele)
325	}else{
326	_slide(ele)
327	}
328	};
329
330	//start animation______________________________________________________________________________________________________________________________
331	function _start(ele) {
332	$(ele).data('e').interval = setTimeout(function(){
333	if($(ele).data('e').playOn == false){
334	_navShow(ele);
335	};
336	_rotate(ele);
337	_start(ele)
338	},$(ele).data('e').speed)
339	};
340
341	//fade animation_____________________________________________________________________________________________________________________________
342	function _fade(ele) {
343	if($(ele).data('e').i_img == ($(ele).data('e').imgsLength - 1)){
344	$(ele).data('e').i_img = -1
345	};
346	$('.activ',ele).removeClass('activ').fadeOut(1000);
347	$('.selected',ele).removeClass('selected');
348	$('.img-' + ($(ele).data('e').i_img + 1), ele).fadeIn(1500).addClass('activ');
349	$('.slideshow-' + ($(ele).data('e').i_img + 1), ele).addClass('selected');
350	$(ele).data('e').i_img++;
351	if(($(ele).data('e').playOn) == false){
352	_navShow(ele)
353	}else{
354	_thumbSlide(ele)
355	};
356	};
357
358	//slide animation_____________________________________________________________________________________________________________________________
359	function _slide(ele) {
360	if($(ele).data('e').i_img == $(ele).data('e').imgsLength - 1){
361	$(ele).data('e').i_img = -1
362	}
363	$(ele).data('e').m_s = $(ele).data('e').m_s - $(ele).data('e').s_w;
364	$('.slideCont ul',ele).animate({
365	marginLeft: $(ele).data('e').m_s
366	}, 800, function(){
367	$('.activ',ele).removeClass('activ');
368	$('.selected',ele).removeClass('selected');
369	$('.img-' + ($(ele).data('e').i_img + 1), ele).addClass('activ');
370	$('.slideshow-' + ($(ele).data('e').i_img + 1),ele).addClass('selected');
371	$(ele).data('e').i_img++;
372	if ($(ele).data('e').i_img == 0 ){
373	$('.slideCont ul',ele).css('margin-left','0px');
374	$(ele).data('e').m_s = 0
375	};
376	if(($(ele).data('e').playOn) == false){
377	_navShow(ele)
378	}else{
379	_thumbSlide(ele)
380	};
381	})
382	};
383
384
385	//stop animation______________________________________________________________________________________________________________________________
386	function _pause(ele) {
387	clearTimeout($(ele).data('e').interval );
388	_navShow(ele)
389	};
390	//navigation___________________________________________________________________________________________________________________________________
391	function _navShow(ele) {
392	$('.thumb_control',ele).each(function(){
393	if($(ele).data('e').playOn == true){
394	$(this).hide()
395	}else{
396	$(this).show()
397	}
398	});
399	$('.nav',ele).each(function(){
400	if($(ele).data('e').playOn == true){
401	$(this).hide()
402	}else{
403	if($(ele).data('e').i_img == 0){
404	$('.prev',ele).hide();
405	$('.next',ele).show()
406	}else if($(ele).data('e').i_img == $(ele).data('e').imgsLength - 1){
407	$('.next',ele).hide();
408	$('.prev',ele).show()
409	}else{
410	$(this).show()
411	}
412	}
413	})
414	};
415	//thumb slide_________________________________________________________________________________________________________________________________________
416	function _thumbSlide(ele) {
417	if(options.navType == 'thumb'){
418	var $a = ($(ele).data('e').i_img)/$(ele).data('e').n_thumb,
419	$thumbcontent = $('.nav-thumb-content', ele);
420	if($a < 0){
421	$a = 0
422	}
423	$(ele).data('e').thumb_i = Math.floor($a);
424	var m_r = ( $(ele).data('e').thumb_i)* $(ele).data('e').s_w;
425	if ( m_r > $thumbcontent.width() - $('.nav-thumb-slide', ele).width()){
426	m_r = $thumbcontent.width() - $('.nav-thumb-slide', ele).width();
427	};
428	var n_p = $thumbcontent.position();
429	if($('.link:hover', ele).length == 0){
430	if ( n_p.left != m_r ){
431	$('.nav-thumb-content', ele).animate({
432	left : - m_r
433	})
434	};
435	};
436	}
437	};
438	return $(this)
439	});
440	}
441	})(jQuery);

Note: See TracBrowser for help on using the repository browser.

Download in other formats: