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); |
---|