| 1 | /* ========================================================= |
|---|
| 2 | // jquery.panorama.js |
|---|
| 3 | // Author: Arnault PACHOT & Frédéric Martini |
|---|
| 4 | // Copyright (c) 2009 |
|---|
| 5 | // licence : GPL |
|---|
| 6 | ========================================================= */ |
|---|
| 7 | (function($) { |
|---|
| 8 | $.fn.panorama = function(options) { |
|---|
| 9 | this.each(function(){ |
|---|
| 10 | var settings = { |
|---|
| 11 | viewport_width: 600, |
|---|
| 12 | speed: 20000, |
|---|
| 13 | direction: 'left', |
|---|
| 14 | control_display: 'auto', |
|---|
| 15 | start_position: 0, |
|---|
| 16 | auto_start: true, |
|---|
| 17 | mode_360: true, |
|---|
| 18 | loop_180: true |
|---|
| 19 | }; |
|---|
| 20 | if(options) $.extend(settings, options); |
|---|
| 21 | |
|---|
| 22 | |
|---|
| 23 | var elemWidth = parseInt($(this).attr('width')); |
|---|
| 24 | var elemHeight = parseInt($(this).attr('height')); |
|---|
| 25 | // -------------------------------------------------- |
|---|
| 26 | // Récupération automatique de la taille de l'image : |
|---|
| 27 | // Si un des attributs width ou height est absent, |
|---|
| 28 | // on récupère la vrai taille de l'image : |
|---|
| 29 | if (isNaN(elemWidth) || isNaN(elemHeight)) { |
|---|
| 30 | var img = new Image(); |
|---|
| 31 | img.src = $(this).attr('src'); |
|---|
| 32 | if (isNaN(elemWidth)) elemWidth = img.width; |
|---|
| 33 | if (isNaN(elemHeight)) elemHeight = img.height; |
|---|
| 34 | } |
|---|
| 35 | // -------------------------------------------------- |
|---|
| 36 | var currentElement = this; |
|---|
| 37 | var panoramaViewport, panoramaContainer; |
|---|
| 38 | |
|---|
| 39 | |
|---|
| 40 | $(this).css('position', 'relative') |
|---|
| 41 | .css('margin', '0') |
|---|
| 42 | .css('padding', '0') |
|---|
| 43 | .css('border', 'none') |
|---|
| 44 | .wrap("<div class='panorama-container'></div>"); |
|---|
| 45 | if (settings.mode_360) |
|---|
| 46 | $(this).clone().insertAfter(this); |
|---|
| 47 | |
|---|
| 48 | 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() { |
|---|
| 55 | $(panoramaContainer).stop(); |
|---|
| 56 | settings.direction = 'right'; |
|---|
| 57 | panorama_animate(panoramaContainer, elemWidth, settings); |
|---|
| 58 | return false; |
|---|
| 59 | }); |
|---|
| 60 | panoramaViewport.bind('click', function() { |
|---|
| 61 | $(panoramaContainer).stop(); |
|---|
| 62 | }); |
|---|
| 63 | panoramaViewport.find('a.panorama-control-right').bind('click', function() { |
|---|
| 64 | $(panoramaContainer).stop(); |
|---|
| 65 | settings.direction = 'left'; |
|---|
| 66 | panorama_animate(panoramaContainer, elemWidth, settings); |
|---|
| 67 | return false; |
|---|
| 68 | }); |
|---|
| 69 | panoramaViewport.find('a.panorama-control-pause').bind('click', function() { |
|---|
| 70 | $(panoramaContainer).stop(); |
|---|
| 71 | return false; |
|---|
| 72 | }); |
|---|
| 73 | |
|---|
| 74 | if (settings.control_display == 'yes') { |
|---|
| 75 | panoramaViewport.find('.panorama-control').show(); |
|---|
| 76 | } else { |
|---|
| 77 | panoramaViewport.bind('mouseover', function(){ |
|---|
| 78 | $(this).find('.panorama-control').show(); |
|---|
| 79 | return false; |
|---|
| 80 | }).bind('mouseout', function(){ |
|---|
| 81 | $(this).find('.panorama-control').hide(); |
|---|
| 82 | return false; |
|---|
| 83 | }); |
|---|
| 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 | }); |
|---|
| 93 | function panorama_animate(element, elemWidth, settings) { |
|---|
| 94 | currentPosition = 0-parseInt($(element).css('margin-left')); |
|---|
| 95 | if (settings.direction == 'right') { |
|---|
| 96 | |
|---|
| 97 | $(element).animate({marginLeft: 0}, ((settings.speed / elemWidth) * (currentPosition)) , 'linear', function (){ |
|---|
| 98 | if (settings.mode_360) { |
|---|
| 99 | $(element).css('marginLeft', '-'+(parseInt(parseInt(elemWidth))+'px')); |
|---|
| 100 | panorama_animate(element, elemWidth, settings); |
|---|
| 101 | } else if (settings.loop_180) { |
|---|
| 102 | settings.direction = 'left'; // changement de sens |
|---|
| 103 | panorama_animate(element, elemWidth, settings); |
|---|
| 104 | } |
|---|
| 105 | }); |
|---|
| 106 | } else { |
|---|
| 107 | 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 (){ |
|---|
| 114 | if (settings.mode_360) { |
|---|
| 115 | $(element).css('margin-left', 0); |
|---|
| 116 | panorama_animate(element, elemWidth, settings); |
|---|
| 117 | } else if (settings.loop_180) { |
|---|
| 118 | settings.direction = 'right'; // changement de sens |
|---|
| 119 | panorama_animate(element, elemWidth, settings); |
|---|
| 120 | } |
|---|
| 121 | }); |
|---|
| 122 | } |
|---|
| 123 | |
|---|
| 124 | |
|---|
| 125 | } |
|---|
| 126 | |
|---|
| 127 | }; |
|---|
| 128 | |
|---|
| 129 | $(document).ready(function(){ |
|---|
| 130 | $("img.panorama").panorama(); |
|---|
| 131 | }); |
|---|
| 132 | })(jQuery); |
|---|
