source: extensions/Panoramas/js/jquery.panorama.js @ 21268

Last change on this file since 21268 was 19535, checked in by Klarsfeld, 11 years ago
File size: 9.1 KB
Line 
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                                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',
25                        };
26                        if(options) $.extend(settings, options);
27
28                        var elemWidth =  parseInt($(this).attr('width'));
29                        var elemHeight = parseInt($(this).attr('height'));
30                        // --------------------------------------------------
31                        // Récupération automatique de la taille de l'image :
32                        // Si un des attributs width ou height est absent,
33                        // on récupère la vrai taille de l'image :
34                        if (isNaN(elemWidth) || isNaN(elemHeight)) {
35                                var img = new Image();
36                                img.src = $(this).attr('src');
37                                if (isNaN(elemWidth)) elemWidth = img.width;
38                                if (isNaN(elemHeight)) elemHeight = img.height;
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);
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
51                        var currentElement = this;
52                        var panoramaViewport, panoramaContainer;
53                               
54                        $(this).css('position', 'relative')
55                                .css('margin', '0')
56                                .css('padding', '0')
57                                .css('border', 'none')
58                                .wrap("<div class='panorama-container'></div>");
59                        if (settings.mode_360) 
60                                $(this).clone().insertAfter(this);
61                       
62                        panoramaContainer = $(this).parent();
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'>&#9650;</a> <a href='#' class='panorama-control-decspeed'>&#9660;</a> <a href='#' class='panorama-control-left'>&#9668;</a> <a href='#' class='panorama-control-pause'>&#9632;</a> <a href='#' class='panorama-control-right'>&#9658;</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'>&#9650;</a><a href='#' class='panorama-control-decspeed'>&#9660;</a><a href='#' class='panorama-control-left'>&#9668;</a> <a href='#' class='panorama-control-pause'>&#9632;</a> <a href='#' class='panorama-control-right'>&#9658;</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() {
123                                $(panoramaContainer).stop();
124                                settings.direction = 'right';
125                                panorama_animate(panoramaContainer, elemWidth, settings);
126                                return false;
127                        });
128
129                        panoramaViewport.find('a.panorama-control-right').bind('click', function() {
130                                $(panoramaContainer).stop();
131                                settings.direction = 'left';
132                                panorama_animate(panoramaContainer, elemWidth, settings);
133                                return false;
134                        });
135
136                        panoramaViewport.find('a.panorama-control-pause').bind('click', function() {
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                        });     
154                       
155                        if (settings.control_display == 'yes') {
156                                panoramaViewport.find('.panorama-control').show();
157                        } else {
158                                panoramaViewport.bind('mouseover', function(){
159                                        $(this).find('.panorama-control').show();
160                                        return false;
161                                }).bind('mouseout', function(){
162                                        $(this).find('.panorama-control').hide();
163                                        return false;
164                                });
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               
172                function panorama_animate(element, elemWidth, settings) {
173                        currentPosition = 0-parseInt($(element).css('margin-left'));
174                        if (settings.footer_display == 'visible') $("#thumbFrame").hide();
175                        if (settings.direction == 'right') {
176                                $(element).animate({marginLeft: 0}, ((settings.speed / elemWidth) * (currentPosition)) , 'linear', function (){ 
177                                        if (settings.footer_display == 'visible') panorama_stop(element, elemWidth / 200);
178                                        if (settings.mode_360) {
179                                                $(element).css('marginLeft', '-'+(parseInt(parseInt(elemWidth))+'px'));
180                                                panorama_animate(element, elemWidth, settings);
181                                        } else if (settings.loop_180) {
182                                                settings.direction = 'left'; // changement de sens
183                                                panorama_animate(element, elemWidth, settings);
184                                        }
185                                });
186                        } else {
187                                var rightlimit;
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);
191                                        if (settings.mode_360) {
192                                                $(element).css('margin-left', 0); 
193                                                panorama_animate(element, elemWidth, settings);
194                                        } else if (settings.loop_180) {
195                                                settings.direction = 'right'; // changement de sens
196                                                panorama_animate(element, elemWidth, settings);
197                                        }
198                                });
199                        }
200                }
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                }
211        };
212
213$(document).ready(function(){
214        $("img.panorama").panorama();
215});
216})(jQuery);
Note: See TracBrowser for help on using the repository browser.