Changeset 26915 for extensions/Slide/js/slideshow.js
- Timestamp:
- Jan 23, 2014, 10:50:23 AM (10 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
extensions/Slide/js/slideshow.js
r26889 r26915 53 53 54 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 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 66 58 //mise en place des images 67 59 $(document).ready(function(){ 68 60 $.each(options.imgs, function(i, img){ 69 var imag = img. image,61 var imag = img.src, 70 62 alt = img.alt, 71 63 title = img.title, … … 73 65 descr = img.descr; 74 66 75 if(typeof descr === 'undefined'){ 76 var divDescr = "" 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 77 114 }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))) 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 }) 89 134 }) 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 }; 135 136 //slide_____________________________________________________________________________________________ 136 137 if(options.styleSlideshow == 'Slide'){ … … 149 150 150 151 //bouton play/pause________________________________________________________________________________________________________________________ 151 if(options.displayPlayPause == true){152 $('.control_slideshow', ele).append($('<div />').addClass('slideshow_control'))153 };152 if(options.displayPlayPause == true){ 153 $('.control_slideshow', ele).append($('<div />').addClass('slideshow_control')) 154 }; 154 155 155 156 //auto démarage____________________________________________________________________________________________________________ … … 187 188 $('.clt_thumb', ele).hide() 188 189 }; 189 var resize_thumb_w = ((options.width-(n_thumb * 6))/n_thumb),190 var resize_thumb_w = ((options.width-(n_thumb * 5))/n_thumb), 190 191 r = options.thumb_width/options.thumb_height, 191 192 rezise_thumb_h = resize_thumb_w / r, … … 195 196 $('.link', ele).append($('<div />').addClass('nav-thumb-content').height(rezise_thumb_h + 10).width(navThumb_w)); 196 197 $.each(options.imgs, function(i, img){ 197 var imag = img. image;198 var imag = img.src; 198 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}))); 199 200 }); … … 271 272 }); 272 273 273 //mouse over _______________________________________________________________________________________________________________________________________________274 $('.contener_slideshow', ele). hover(function() {275 $(ele).data('e').playOnT = $(ele).data('e').playOn;274 //mouse over image_______________________________________________________________________________________________________________________________________________ 275 $('.contener_slideshow', ele).find('img').hover(function() { 276 $(ele).data('e').playOnT = $(ele).data('e').playOn; 276 277 if($(ele).data('e').playOn == true){ 277 278 $(ele).data('e').playOn = false; 278 279 _pause(ele); 279 280 } 280 $(this). find('.descr').slideDown(200, function() {281 $(this).parent().find('.descr').slideDown(200, function() { 281 282 $(this).clearQueue(); 282 283 }); 283 284 }, 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 }); 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 292 310 //nav thumb________________________________________________________________________________________________________________________________________________ 293 311 $('.thumb-right',ele).on('mousedown',function(){ … … 372 390 }; 373 391 374 392 375 393 //stop animation______________________________________________________________________________________________________________________________ 376 394 function _pause(ele) { … … 406 424 function _thumbSlide(ele) { 407 425 if(options.navType == 'thumb'){ 408 var a = ($(ele).data('e').i_img)/$(ele).data('e').n_thumb; 426 var a = ($(ele).data('e').i_img)/$(ele).data('e').n_thumb, 427 thumbcontent = $('.nav-thumb-content', ele); 409 428 if(a < 0){ 410 429 a = 0 … … 412 431 $(ele).data('e').thumb_i = Math.floor(a); 413 432 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 } 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 }; 423 444 } 424 445 };
Note: See TracChangeset
for help on using the changeset viewer.