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

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

amélioration de la compatibilité avec MyPiwiShop

File size: 15.8 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                                                $height         = img.height,
67                                                $width          = img.width;
68                                               
69                                                if(typeof $descr === 'undefined'){     
70                                                        var divDescr    = ""
71                                                }else{
72                                                        var     divDescr        =[$('<div />').addClass('descr').html($descr)]
73                                                };
74                                               
75                                                if(typeof $url === 'undefined'){
76                                                        var blockImg    = [$('<div />').append(divDescr).append($('<img />').attr({'src':$imag , 'alt':$alt , 'title':$title }))]
77                                                }else{
78                                                        var     blockImg        = [$('<a />').attr({'href':$url , 'target':options.target}).append(divDescr).append($('<img />').attr({'src':$imag , 'alt':$alt , 'title':$title }))]
79                                                }
80                                               
81                                        $('ul',ele).append($('<li />').addClass('img-' + i).append($('<div />').addClass('contenerImg').width(options.width).height(cont_h).append(blockImg)));
82
83                                       
84                                _resizeSlideshowImag(ele, i, $height,$width);
85
86                                });
87                               
88       
89//slide_____________________________________________________________________________________________
90                                if(options.styleSlideshow == 'Slide'){
91                                        var $ul_w = (options.imgs.length + 1) * options.width;
92                                        $('ul', ele).wrap($('<div />').addClass('slideCont')).width($ul_w);
93                                        $('ul', ele).prepend($('ul li:last-child', ele).clone().css('margin-left','-'+ options.width +'px')); 
94                                        $('ul', ele).append($('ul li:nth-child(2)', ele).clone()); 
95                                        $('li:nth-child(2)',ele).addClass('activ');             
96                                };
97                               
98//fade___________________________________________________________________________________________________________
99                                if(options.styleSlideshow == 'Fade'){
100                                        $('li' ,ele).css('display','none')
101                                        $('li',ele).first().show().addClass('activ')
102                                };
103                       
104//bouton play/pause________________________________________________________________________________________________________________________
105                                if(options.displayPlayPause == true){
106                                        $('.control_slideshow', ele).append($('<div />').addClass('slideshow_control'))
107                                };
108
109//auto démarage____________________________________________________________________________________________________________
110                                if(options.autoPlay == true){
111                                                _start(ele)
112                                        $('.slideshow_control',ele).addClass('pause');
113                                        $(ele).data('e').playOn = true;
114                                        _navShow(ele)
115                                }else{
116                                        $('.slideshow_control',ele).addClass('play');
117                                        _pause(ele);
118                                        $(ele).data('e').playOn = false;
119                                }
120                               
121                        });     
122                       
123
124//lien/thumb de navigation__________________________________________________________________________________________________________________________
125                        if(options.navType == 'nav' || options.navType == 'thumb'){
126                                $('.control_slideshow', ele).append($('<div />').addClass('clt_thumb')).append($('<div/>').addClass('link'));
127                                if(options.navType == 'nav'){
128                                        $('.clt_thumb', ele).hide();
129                                        for(    var i = 0;
130                                                        i < options.imgs.length; 
131                                                        i++){
132                                                $('.link', ele).append($('<span />').attr({'id':i,'class':'slideshow-' + i + ' nav-link slideshow-link','imag':i}).html(i+1));
133                                                $('.nav-link',ele).first().addClass('selected');
134                                        }
135                                };
136                               
137                                if(options.navType == 'thumb'){
138                                        if(options.thumb_always == false){
139                                                $('.link', ele).hide();
140                                        }else{
141                                                $('.clt_thumb', ele).hide()
142                                        };
143                                        var $resize_thumb_w     = ((options.width-(n_thumb * 5))/n_thumb),
144                                                $r                                      = options.thumb_width/options.thumb_height,
145                                                $rezise_thumb_h         = $resize_thumb_w / $r,
146                                                $navThumb_w                     = options.imgs.length * ($resize_thumb_w + 6);
147                                        $(ele).data('e').$navThumb_w    = $navThumb_w;
148                                        $('.link', ele).width(options.width).height(options.thumb_height + 10);
149                                        $('.link', ele).append($('<div />').addClass('nav-thumb-content').height($rezise_thumb_h + 10).width($navThumb_w));
150                                        $.each(options.imgs, function(i, img){
151                                                var imag        = img.src;
152                                                $('.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})));
153                                        });
154                                        if($navThumb_w > options.width){
155                                                $('.nav-thumb-content', ele).wrap($('<div />').addClass('nav-thumb-slide').width( options.width));
156                                                $('.link', ele).append($('<div />').addClass('thumb_control thumb-left')).append($('<div />').addClass('thumb_control thumb-right'));
157                                        }
158                                }
159                        };
160                       
161//flèche next/previous_______________________________________________________________________________________________________________________
162                        if(options.displayNextPrev == true){
163                                $('.contener_slideshow', ele).append($('<div />').addClass('nav prev').height(cont_h)).append($('<div />').addClass('nav next').height(cont_h));
164                        };
165       
166//________________________________________action___________________________________________________________________________________________________________
167                       
168//click flèche de navigation___________________________________________________________________________________________________________________________
169                        $('.next', ele).on('click', function(){
170                                _rotate(ele);
171                                _thumbSlide(ele)
172                        });
173                       
174                        $('.prev',ele).on('click', function()   {
175                                if($(ele).data('e').i_img == 0){
176                                        $(ele).data('e').i_img = options.imgs.length - 2
177                                }else{
178                                        $(ele).data('e').i_img = $(ele).data('e').i_img - 2
179                                };
180                                if(options.styleSlideshow == 'Fade'){
181                                        _rotate(ele);
182                                        _thumbSlide(ele)
183                                }else{
184                                        $(ele).data('e').m_s = $(ele).data('e').m_s + (2 * options.width);
185                                        _rotate(ele);
186                                        _thumbSlide(ele)
187                                }
188                        });
189
190//click sur un lien/thumb_________________________________________________________________________________________________________________________________
191                        $('.nav-link',ele).on('click', function(){
192                                $(ele).data('e').playOnT = $(ele).data('e').playOn;
193                                if($(ele).data('e').playOn == true){
194                                        $(ele).data('e').playOn = false;
195                                        _pause(ele);
196                                }               
197                                var $new_i_img  = parseInt($(this).attr('imag')),
198                                        $r;
199                                        $r      = $new_i_img - ($(ele).data('e').i_img + 1)
200                                $(ele).data('e').m_s    = $(ele).data('e').m_s - ($r * options.width);
201                                $(ele).data('e').i_img  = $new_i_img - 1;
202                                _rotate(ele);
203                                if ($(ele).data('e').playOnT == true){
204                                        $(ele).data('e').playOn = true;
205                                        _start(ele)
206                                }
207                        });
208
209//ouvrir les thumb______________________________________________________________________________________________________________________________________________
210                        $('.clt_thumb',ele).on('click', function(){
211                                $(this).toggleClass('show');
212                                $('.link', ele).slideToggle('slow');
213                        });
214                       
215//bouton play/pause_____________________________________________________________________________________________________________________________________________
216                        $('.slideshow_control', ele).on('click',function() {
217                                $(this).toggleClass('play pause');
218                                if (($(ele).data('e').playOn) == true){
219                                        $(ele).data('e').playOn = false;
220                                        _pause(ele)
221                                }else{
222                                        $(ele).data('e').playOn = true;
223                                        _start(ele)
224                                }
225                        });
226                       
227//mouse over image_______________________________________________________________________________________________________________________________________________
228                $('.contener_slideshow', ele).find('img').hover(function() {
229                        $(ele).data('e').playOnT = $(ele).data('e').playOn;
230                        if($(ele).data('e').playOn == true){
231                                $(ele).data('e').playOn = false;
232                                _pause(ele);
233                        }
234                        $(this).parent().find('.descr').slideDown(200, function() {
235                                $(this).clearQueue();
236                        });     
237                }, function() {
238                        if ($(ele).data('e').playOnT == true){
239                                $(ele).data('e').playOn = true;
240                                _start(ele)
241                        }
242                        $(this).parent().find('.descr').slideUp(200, function() {
243                                $(this).clearQueue();
244                        });
245                });     
246               
247//mouse over nav
248                $('.nav', ele).hover(function() {
249                        $(ele).data('e').playOnT = $(ele).data('e').playOn;
250                        if($(ele).data('e').playOn == true){
251                                $(ele).data('e').playOn = false;
252                                _pause(ele);
253                        }
254                       
255                }, function() {
256                        if ($(ele).data('e').playOnT == true){
257                                $(ele).data('e').playOn = true;
258                                _start(ele)
259                        }
260                });
261
262               
263//nav thumb________________________________________________________________________________________________________________________________________________
264                        $('.thumb-right',ele).on('mousedown',function(){
265                                $('.nav-thumb-content', ele).animate({
266                                        left: (-($(ele).data('e').navThumb_w -  options.width))
267                                }, 1000)
268                        }).mouseup(function(){
269                                $('.nav-thumb-content', ele).stop()
270                        });
271                       
272                        $('.thumb-left',ele).on('mousedown',function(){
273                                $('.nav-thumb-content', ele).animate({
274                                        left:0 
275                                }, 1000)
276                        }).mouseup(function(){
277                                $('.nav-thumb-content', ele).stop()
278                        });
279
280//___________________________________________Fonctions_____________________________________________________________________________________
281//resize and center image__________________________________________________________________________________________________________________
282                               
283                                function _resizeSlideshowImag (ele, i, $img_h,$img_w){
284                                       
285                                                var $img                = $('ul li.img-' + i +' img ',ele),
286                                                        $descr          = $img.prev(),
287                                                        $img_r          = $img_h/$img_w,
288                                                        $box_h          = cont_h,
289                                                        $box_w          = options.width,
290                                                        $box_r          = $box_h/$box_w,
291                                                        $new_h,
292                                                        $new_w;
293                                                if(($img_h > $box_h) || ($img_w > $box_w)){
294                                                        if($box_r < $img_r){
295                                                                $new_h  = $box_h - 30;
296                                                                $new_w  = $box_h / $img_r
297                                                        }else{
298                                                                $new_h  = ($box_w * $img_r) - 30;
299                                                                $new_w  = $box_w
300                                                        };
301       
302                                                }else{
303                                                        $new_h  = $img_h;
304                                                        $new_w  = $img_w;
305                                                };
306                                                var $left       = ($(ele).data('e').s_w / 2)-($new_w / 2) + 'px',
307                                                        $top    = ($box_h / 2)-($new_h / 2) + 'px';
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 + 'px',
319                                                        bottom  : (($box_h / 2)-($new_h / 2)) + 'px',                                                   
320                                                })
321                                                                        console.debug($top);
322
323                                };
324                               
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.