Context Navigation

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

Last change on this file since 27100 was 26915, checked in by Miklfe, 10 years ago

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

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

Download in other formats: