Context Navigation

source: extensions/Slide/js/slideshow.js @ 27355

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

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

Download in other formats: