Changeset 19535 for extensions/Panoramas/js/jquery.panorama.js
- Timestamp:
- Dec 23, 2012, 2:40:24 PM (11 years ago)
- File:
-
- 1 edited
-
extensions/Panoramas/js/jquery.panorama.js (modified) (8 diffs)
Legend:
- Unmodified
- Added
- Removed
-
extensions/Panoramas/js/jquery.panorama.js
r6527 r19535 16 16 auto_start: true, 17 17 mode_360: true, 18 loop_180: true 18 loop_180: true, 19 footer_display: 'visible', 20 cont_border: 2, 21 cont_border_color: '#000000', 22 footer_color: '#000000', 23 caption_color: '#CCCCCC', 24 footer_control_color: '#000000', 19 25 }; 20 26 if(options) $.extend(settings, options); 21 22 27 23 28 var elemWidth = parseInt($(this).attr('width')); … … 33 38 if (isNaN(elemHeight)) elemHeight = img.height; 34 39 } 40 41 var ratio = elemWidth / 200; 42 if((Math.floor(elemHeight / ratio) + 22) < 50){ 43 var FooterHeight = 50; 44 }else{ 45 var FooterHeight = (Math.floor(elemHeight / ratio) + 22); 46 } 47 var halfFrame = Math.floor((settings.viewport_width / ratio) / 2); 35 48 // -------------------------------------------------- 49 $("#Panorama").css('border', settings.cont_border + 'px solid ' + settings.cont_border_color).css('width', (settings.cont_border) * 2 + settings.viewport_width + 'px'); 50 36 51 var currentElement = this; 37 52 var panoramaViewport, panoramaContainer; 38 39 53 40 54 $(this).css('position', 'relative') 41 55 .css('margin', '0') … … 47 61 48 62 panoramaContainer = $(this).parent(); 49 panoramaContainer.wrap("<div class='panorama-viewport'></div>").parent().css('width',settings.viewport_width+'px') 50 .append("<div class='panorama-control'><a href='#' class='panorama-control-left'><<</a> <a href='#' class='panorama-control-pause'>x</a> <a href='#' class='panorama-control-right'>>></a> </div>"); 51 52 panoramaViewport = panoramaContainer.parent(); 53 54 panoramaViewport.css('height', elemHeight+'px').find('a.panorama-control-left').bind('click', function() { 63 panoramaContainer.wrap("<div class='panorama-viewport'></div>").parent().css('width',settings.viewport_width + 'px').css('height', elemHeight+'px'); 64 65 if (settings.footer_display == 'invisible') { 66 $("div.panorama-viewport").append("<div class='panorama-control'><a href='#' class='panorama-control-incspeed'>▲</a> <a href='#' class='panorama-control-decspeed'>▼</a> <a href='#' class='panorama-control-left'>◄</a> <a href='#' class='panorama-control-pause'>■</a> <a href='#' class='panorama-control-right'>►</a> </div>"); 67 $("div.panorama-control").css('margin-left', ((settings.viewport_width - $("div.panorama-control").width()) / 2) + 'px'); 68 } 69 70 /**************************************************************/ 71 // Gestion du "Footer du panorama" 72 if (settings.footer_display == 'visible') { 73 $("#Panorama").append("<div id='panoramaFooter' class='panorama-footer'><div class='footer-control'><a href='#' class='panorama-control-incspeed'>▲</a><a href='#' class='panorama-control-decspeed'>▼</a><a href='#' class='panorama-control-left'>◄</a> <a href='#' class='panorama-control-pause'>■</a> <a href='#' class='panorama-control-right'>►</a></div><div id='panoramaCaption'></div><div id='panoramaThumb'></div></div>"); 74 75 $("#panoramaFooter").css('padding','0px') 76 .css('height',FooterHeight) 77 .css('background-color', settings.footer_color); 78 $("#panoramaFooter a").css('color', settings.footer_control_color).css('border-color', settings.footer_control_color); 79 $("#panoramaCaption").css('color', settings.caption_color).html(settings.img_name); 80 $("#panoramaThumb").css('height', (Math.floor(elemHeight / ratio) + 1)).css('width', '200').append("<img src='" + $(this).attr('src') + "' width=200 height=" + (Math.floor(elemHeight / ratio) + 1) + "></img><div id='thumbFrame'></div>"); 81 82 if(window.ie) { var ieheightadjust = 1; } else { var ieheightadjust = 3; } 83 $("#thumbFrame").css('position','relative') 84 .css('width', (Math.floor(settings.viewport_width / ratio) + 1)) 85 .css('height', (Math.floor(elemHeight / ratio) + 2)) 86 .css('top', -(Math.floor(elemHeight / ratio) + ieheightadjust + 1)); 87 88 $("#thumbFrame" ).draggable({ 89 axis : "x", 90 containment: "#panoramaThumb", 91 drag: function( event, ui ) { 92 var x = Math.floor(ui.position.left * ratio); 93 $(".panorama-container").css('margin-left', - x); 94 } 95 }); 96 97 98 $("#panoramaThumb").bind('click', function(e) { 99 var x = Math.floor((e.pageX - this.offsetLeft) - halfFrame); 100 if(x < 0) { 101 x = 0; 102 } 103 else if (x > 200 - $("#thumbFrame").width()) { 104 x = 200 - $("#thumbFrame").width(); 105 } 106 $("#thumbFrame").animate({left: x}, 2000 , 'swing'); 107 x = - Math.floor(x * ratio); 108 $("div.panorama-container").animate({marginLeft: x}, 2000 , 'swing'); 109 return false; 110 }); 111 } 112 113 /**********************************************************/ 114 // Gestion des boutons de contrôle du panorama 115 $("div.panorama-viewport").bind('click', function() { 116 panorama_stop(panoramaContainer, ratio); 117 return false; 118 }); 119 120 if (settings.footer_display == 'visible') panoramaViewport = $("#panoramaFooter"); else panoramaViewport = panoramaContainer.parent(); 121 122 panoramaViewport.find('a.panorama-control-left').bind('click', function() { 55 123 $(panoramaContainer).stop(); 56 124 settings.direction = 'right'; … … 58 126 return false; 59 127 }); 60 panoramaViewport.bind('click', function() { 61 $(panoramaContainer).stop(); 62 }); 128 63 129 panoramaViewport.find('a.panorama-control-right').bind('click', function() { 64 130 $(panoramaContainer).stop(); … … 67 133 return false; 68 134 }); 135 69 136 panoramaViewport.find('a.panorama-control-pause').bind('click', function() { 70 $(panoramaContainer).stop(); 71 return false; 72 }); 137 panorama_stop(panoramaContainer, ratio); 138 return false; 139 }); 140 141 panoramaViewport.find('a.panorama-control-incspeed').bind('click', function() { 142 panoramaContainer.stop().clearQueue(); 143 if (settings.speed > 5000) settings.speed -= 2500; 144 panorama_animate(panoramaContainer, elemWidth, settings); 145 return false; 146 }); 147 148 panoramaViewport.find('a.panorama-control-decspeed').bind('click', function() { 149 panoramaContainer.stop().clearQueue(); 150 if (settings.speed < 130000) settings.speed += 2500; 151 panorama_animate(panoramaContainer, elemWidth, settings); 152 return false; 153 }); 73 154 74 155 if (settings.control_display == 'yes') { … … 82 163 return false; 83 164 }); 84 85 } 86 87 $(this).parent().css('margin-left', '-'+settings.start_position+'px'); 88 89 if (settings.auto_start) 90 panorama_animate(panoramaContainer, elemWidth, settings); 91 92 }); 165 } 166 $(this).parent().css('margin-left', '-'+settings.start_position+'px'); 167 if (settings.auto_start) panorama_animate(panoramaContainer, elemWidth, settings); 168 }); 169 170 /**************************************************************/ 171 // Scroll horizontal du panorama 93 172 function panorama_animate(element, elemWidth, settings) { 94 173 currentPosition = 0-parseInt($(element).css('margin-left')); 174 if (settings.footer_display == 'visible') $("#thumbFrame").hide(); 95 175 if (settings.direction == 'right') { 96 97 176 $(element).animate({marginLeft: 0}, ((settings.speed / elemWidth) * (currentPosition)) , 'linear', function (){ 177 if (settings.footer_display == 'visible') panorama_stop(element, elemWidth / 200); 98 178 if (settings.mode_360) { 99 179 $(element).css('marginLeft', '-'+(parseInt(parseInt(elemWidth))+'px')); … … 106 186 } else { 107 187 var rightlimit; 108 if (settings.mode_360) 109 rightlimit = elemWidth; 110 else 111 rightlimit = elemWidth-settings.viewport_width; 112 113 $(element).animate({marginLeft: -rightlimit}, ((settings.speed / rightlimit) * (rightlimit - currentPosition)), 'linear', function (){ 188 if (settings.mode_360) rightlimit = elemWidth; else rightlimit = elemWidth - settings.viewport_width; 189 $(element).animate({marginLeft: -rightlimit}, (settings.speed / elemWidth) * (rightlimit - currentPosition), 'linear', function (){ 190 if (settings.footer_display == 'visible') panorama_stop(element, elemWidth / 200); 114 191 if (settings.mode_360) { 115 192 $(element).css('margin-left', 0); … … 121 198 }); 122 199 } 123 124 125 200 } 126 201 202 /**************************************************************/ 203 // Arrêt du défilement et repositionnement de l'index 204 function panorama_stop(element, rapport) { 205 $(element).stop(); 206 $("#thumbFrame").show(); 207 var x = -Math.floor(parseInt($("div.panorama-container").css('margin-left')) / rapport); 208 $("#thumbFrame").css('left', x); 209 return false; 210 } 127 211 }; 128 212
Note: See TracChangeset
for help on using the changeset viewer.
