Context Navigation

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

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

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

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

Download in other formats: