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