Context Navigation

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

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

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

Download in other formats: