[3700] | 1 | // Pamoorama 0.3 |
---|
| 2 | // By: Jean-Nicolas Jolivet |
---|
| 3 | // www.silverscripting.com/pamoorama/ |
---|
| 4 | // Feel free to do whatever you want with the script! Give credits if you like it |
---|
| 5 | // if you don't like it, don't use it ;) |
---|
| 6 | var pamoorama = new Class({ |
---|
| 7 | |
---|
| 8 | initialize: function(element, options) { |
---|
| 9 | this.options = Object.extend({ |
---|
| 10 | activateSlider: true, |
---|
| 11 | footercolor: '#000', |
---|
| 12 | captioncolor: '#fff', |
---|
| 13 | caption: '', |
---|
| 14 | width: 650, |
---|
| 15 | enableAutoscroll: true, |
---|
| 16 | autoscrollSpeed: 10000, |
---|
| 17 | autoscrollOnLoad: false, |
---|
| 18 | startAutoscroll: 'Start Autoscroll', |
---|
| 19 | stopAutoscroll: 'Stop Autoscroll', |
---|
| 20 | loadingMessage: 'Loading Panorama...', |
---|
| 21 | clickMessage: 'Click to move the frame!', |
---|
| 22 | dragMessage: 'Drag me to move the panorama!' |
---|
| 23 | }, options || {}); |
---|
| 24 | |
---|
| 25 | this.el = $(element); |
---|
| 26 | this.elid = element; |
---|
| 27 | this.el.setStyle('width', this.options.width + 'px'); |
---|
| 28 | this.el.setStyle('font-family', 'sans-serif'); |
---|
| 29 | this.skipInit = false; |
---|
| 30 | |
---|
| 31 | |
---|
| 32 | |
---|
| 33 | this.loading = new Element('div', { |
---|
| 34 | 'id': this.elid + '_footer' |
---|
| 35 | }); |
---|
| 36 | this.loading.setHTML(this.options.loadingMessage); |
---|
| 37 | this.loading.injectInside(this.el); |
---|
| 38 | |
---|
| 39 | this.picturename = this.el.getProperty('alt'); |
---|
| 40 | if(this.options.caption == '') |
---|
| 41 | { |
---|
| 42 | this.options.caption = this.picturename; |
---|
| 43 | } |
---|
| 44 | |
---|
| 45 | this.area = Math.floor(this.options.width / 2) - 20; |
---|
| 46 | |
---|
| 47 | |
---|
| 48 | this.image = new Asset.image(this.picturename, { |
---|
| 49 | onload: this.continueInit.bind(this) |
---|
| 50 | }); |
---|
| 51 | this.image.setStyles({'left': '-10000px', 'position': 'relative'}); |
---|
| 52 | |
---|
| 53 | this.image.injectInside(document.body); |
---|
| 54 | |
---|
| 55 | }, |
---|
| 56 | |
---|
| 57 | continueInit: function() |
---|
| 58 | { |
---|
| 59 | if(! this.skipInit) |
---|
| 60 | { |
---|
| 61 | |
---|
| 62 | this.imageWidth = this.image.getSize().size.x; |
---|
| 63 | this.imageHeight = this.image.getSize().size.y; |
---|
| 64 | this.ratio = this.imageWidth / 200; |
---|
| 65 | this.image.remove(); |
---|
| 66 | this.loading.remove(); |
---|
| 67 | |
---|
| 68 | |
---|
| 69 | this.outter = new Element('div', { |
---|
| 70 | 'id': this.elid + '_outter', |
---|
| 71 | 'styles': { |
---|
| 72 | 'width' : this.options.width + 'px', |
---|
| 73 | 'height': this.imageHeight + 'px', |
---|
| 74 | 'overflow': 'hidden' |
---|
| 75 | } |
---|
| 76 | }); |
---|
| 77 | |
---|
| 78 | this.inner = new Element('div', { |
---|
| 79 | 'id': this.elid + '_inner', |
---|
| 80 | 'styles' : { |
---|
| 81 | 'width': this.imageWidth + 'px', |
---|
| 82 | 'height': this.imageHeight + 'px', |
---|
| 83 | 'background': 'transparent url(' + this.picturename + ') no-repeat top left' |
---|
| 84 | } |
---|
| 85 | }); |
---|
| 86 | |
---|
[7581] | 87 | if((Math.floor(this.imageHeight / this.ratio) + 22) < 50){ |
---|
| 88 | this.newFooterHeight = 50; |
---|
| 89 | }else{ |
---|
| 90 | this.newFooterHeight = (Math.floor(this.imageHeight / this.ratio) + 22); |
---|
| 91 | } |
---|
| 92 | |
---|
[3700] | 93 | this.footer = new Element('div', { |
---|
| 94 | 'id': this.elid + '_footer', |
---|
| 95 | 'styles': { |
---|
| 96 | 'width' : this.options.width + 'px', |
---|
[7581] | 97 | 'height': this.newFooterHeight + 'px', |
---|
[3700] | 98 | 'background-color': this.options.footercolor |
---|
| 99 | } |
---|
| 100 | }); |
---|
| 101 | |
---|
| 102 | this.caption = new Element('div', { |
---|
| 103 | 'id': this.elid + '_caption', |
---|
| 104 | 'styles': { |
---|
| 105 | 'float': 'left', |
---|
| 106 | 'margin-top': '11px', |
---|
| 107 | 'padding-left': '8px', |
---|
| 108 | 'color' : this.options.captioncolor, |
---|
| 109 | 'font-family': "Trebuchet MS", |
---|
| 110 | 'text-align':'left', |
---|
| 111 | 'font-size': '13px' |
---|
| 112 | } |
---|
| 113 | }); |
---|
| 114 | this.caption.setHTML(this.options.caption); |
---|
| 115 | |
---|
| 116 | this.thumb = new Element('div', { |
---|
| 117 | 'id': this.elid + '_thumb', |
---|
| 118 | 'styles': { |
---|
| 119 | 'float': 'right', |
---|
| 120 | 'margin': '10px 8px 0px 0px', |
---|
| 121 | 'overflow' : 'hidden', |
---|
| 122 | 'padding' : '0px', |
---|
| 123 | 'height': (Math.floor(this.imageHeight / this.ratio) + 1) +'px', |
---|
| 124 | 'width': '200px', |
---|
| 125 | 'text-align': 'left', |
---|
| 126 | 'border': '2px solid #fff', |
---|
| 127 | 'cursor': 'pointer' |
---|
| 128 | }, |
---|
| 129 | 'title': this.options.clickMessage |
---|
| 130 | }); |
---|
| 131 | |
---|
| 132 | if(window.ie) |
---|
| 133 | { |
---|
| 134 | this.ieheightadjust = 0; |
---|
| 135 | } |
---|
| 136 | else |
---|
| 137 | { |
---|
| 138 | this.ieheightadjust = 3; |
---|
| 139 | } |
---|
| 140 | this.frame = new Element('div', { |
---|
| 141 | 'id': this.elid + '_frame', |
---|
| 142 | 'styles': { |
---|
| 143 | 'height': (Math.floor(this.imageHeight / this.ratio) + 1) +'px', |
---|
| 144 | 'width': (Math.floor(this.options.width / this.ratio) + 1) + 'px', |
---|
| 145 | 'position': 'relative', |
---|
| 146 | 'top': '-' + (Math.floor(this.imageHeight / this.ratio) + this.ieheightadjust +1) +'px', |
---|
| 147 | 'left' : '0px', |
---|
| 148 | 'padding' : '0px', |
---|
| 149 | 'margin' : '0px', |
---|
| 150 | 'background-color': 'lightblue', |
---|
| 151 | 'cursor': 'move', |
---|
| 152 | 'z-index': '1000', |
---|
| 153 | 'opacity': '0.4', |
---|
| 154 | '-moz-opacity': '0.8', |
---|
| 155 | 'filter': 'alpha(opacity=80)' |
---|
| 156 | }, |
---|
| 157 | 'title': this.options.dragMessage |
---|
| 158 | }); |
---|
| 159 | |
---|
| 160 | if(this.options.enableAutoscroll) |
---|
| 161 | { |
---|
| 162 | this.playpause = new Element('div', { |
---|
| 163 | 'id': this.elid + '_playpause', |
---|
| 164 | 'styles': { |
---|
| 165 | |
---|
| 166 | 'padding-left': '1px', |
---|
| 167 | 'color' : this.options.captioncolor, |
---|
| 168 | 'font-family': "Trebuchet MS", |
---|
| 169 | 'font-size': '11px', |
---|
| 170 | 'text-align':'left', |
---|
| 171 | 'cursor': 'pointer' |
---|
| 172 | } |
---|
| 173 | }); |
---|
| 174 | this.playpause.setHTML(this.options.startAutoscroll); |
---|
| 175 | this.playpause.addEvent('click', this.playpauseClicked.bind(this)); |
---|
| 176 | } |
---|
| 177 | |
---|
| 178 | this.halfFrame = (this.options.width / this.ratio) / 2; |
---|
| 179 | |
---|
| 180 | this.image.setProperty('width', 200); |
---|
| 181 | this.image.setProperty('height', Math.floor(this.imageHeight / this.ratio) + 1); |
---|
| 182 | this.image.setStyle('left', '0px'); |
---|
| 183 | this.image.setStyle('border', '0px'); |
---|
| 184 | this.image.setStyle('padding', '0px'); |
---|
| 185 | this.image.setStyle('margin', '0px'); |
---|
| 186 | |
---|
| 187 | //Inject everything |
---|
| 188 | this.outter.injectInside(this.el); |
---|
| 189 | this.inner.injectInside(this.outter); |
---|
| 190 | this.footer.injectInside(this.el); |
---|
| 191 | this.caption.injectInside(this.footer); |
---|
| 192 | |
---|
| 193 | if(this.options.enableAutoscroll) |
---|
| 194 | { |
---|
| 195 | this.playpause.injectInside(this.caption); |
---|
| 196 | } |
---|
| 197 | this.thumb.injectInside(this.footer); |
---|
| 198 | |
---|
| 199 | this.image.injectInside(this.thumb); |
---|
| 200 | this.frame.injectInside(this.thumb); |
---|
| 201 | |
---|
| 202 | |
---|
| 203 | // reset the scroll |
---|
| 204 | this.outter.scrollTo(0, 0); |
---|
| 205 | |
---|
| 206 | //AutoScroll Effects |
---|
| 207 | this.autoScrollFx = new Fx.Scroll(this.outter, {duration:this.options.autoscrollSpeed, onComplete: this.animCompleted.bind(this)}); |
---|
| 208 | this.autoSlideFx = new Fx.Style(this.frame, 'left', {duration: this.options.autoscrollSpeed}); |
---|
| 209 | |
---|
| 210 | //do the scrollthing! |
---|
| 211 | if(this.options.activateSlider) |
---|
| 212 | { |
---|
| 213 | this.scroll = new Scroller(this.outter, {area: this.area, velocity: 0.3, onChange:function(x, y) { |
---|
| 214 | newleft = (x / this.ratio); |
---|
| 215 | |
---|
| 216 | this.outter.scrollTo(x, y); |
---|
| 217 | |
---|
| 218 | if(x <= 0) |
---|
| 219 | { |
---|
| 220 | this.frame.setStyle('left', 0); |
---|
| 221 | } |
---|
| 222 | else if(x >= this.imageWidth) |
---|
| 223 | { |
---|
| 224 | this.frame.setStyle('left', 200 - this.frame.getStyle('width').toInt()); |
---|
| 225 | } |
---|
| 226 | else |
---|
| 227 | { |
---|
| 228 | if( (newleft >= 0) && (newleft < 200 - this.frame.getStyle('width').toInt()) ) |
---|
| 229 | { |
---|
| 230 | this.frame.setStyle('left', newleft); |
---|
| 231 | |
---|
| 232 | } |
---|
| 233 | } |
---|
| 234 | }.bind(this)}); |
---|
| 235 | |
---|
| 236 | this.outter.addEvent('mouseover', this.scroll.start.bind(this.scroll)); |
---|
| 237 | this.outter.addEvent('mouseout', this.scroll.stop.bind(this.scroll)); |
---|
| 238 | } |
---|
| 239 | |
---|
| 240 | this.createDraggable(); |
---|
| 241 | |
---|
| 242 | this.addImageEvent(); |
---|
| 243 | |
---|
| 244 | if(this.options.autoscrollOnLoad) |
---|
| 245 | { |
---|
| 246 | this.playpauseClicked(); |
---|
| 247 | } |
---|
| 248 | this.skipInit = true; |
---|
| 249 | } |
---|
| 250 | |
---|
| 251 | }, |
---|
| 252 | |
---|
| 253 | startAnimRight: function() { |
---|
| 254 | var limitRight = 200 - this.frame.getStyle('width').toInt(); |
---|
| 255 | |
---|
| 256 | this.outter.scrollTo(0, 0); |
---|
| 257 | this.frame.setStyle('left', 0); |
---|
| 258 | |
---|
| 259 | this.autoSlideFx.start(limitRight); |
---|
| 260 | this.autoScrollFx.toRight(); |
---|
| 261 | this.direction = 'right'; |
---|
| 262 | |
---|
| 263 | //stop the scroller/drag etc.. |
---|
| 264 | this.outter.removeEvents('mouseover'); |
---|
| 265 | this.dragHandle.detach(); |
---|
| 266 | this.image.removeEvents('click'); |
---|
| 267 | |
---|
| 268 | }, |
---|
| 269 | startAnimLeft: function() { |
---|
| 270 | this.autoSlideFx.start(0); |
---|
| 271 | this.autoScrollFx.scrollTo(0); |
---|
| 272 | this.direction = 'left'; |
---|
| 273 | |
---|
| 274 | }, |
---|
| 275 | |
---|
| 276 | stopAnim: function() { |
---|
| 277 | this.autoSlideFx.stop(); |
---|
| 278 | this.autoScrollFx.stop(); |
---|
| 279 | |
---|
| 280 | //reconnect events |
---|
| 281 | this.outter.addEvent('mouseover', this.scroll.start.bind(this.scroll)); |
---|
| 282 | this.createDraggable(); |
---|
| 283 | this.addImageEvent(); |
---|
| 284 | }, |
---|
| 285 | |
---|
| 286 | animCompleted: function() { |
---|
| 287 | if(this.direction=='right') |
---|
| 288 | { |
---|
| 289 | this.startAnimLeft(); |
---|
| 290 | } |
---|
| 291 | else |
---|
| 292 | { |
---|
| 293 | this.startAnimRight(); |
---|
| 294 | } |
---|
| 295 | }, |
---|
| 296 | |
---|
| 297 | playpauseClicked: function() { |
---|
| 298 | if(this.playpause.getText() == this.options.startAutoscroll) |
---|
| 299 | { |
---|
| 300 | this.playpause.setHTML(this.options.stopAutoscroll); |
---|
| 301 | this.startAnimRight(); |
---|
| 302 | } |
---|
| 303 | else |
---|
| 304 | { |
---|
| 305 | this.playpause.setHTML(this.options.startAutoscroll); |
---|
| 306 | this.stopAnim(); |
---|
| 307 | } |
---|
| 308 | }, |
---|
| 309 | |
---|
| 310 | createDraggable: function() { |
---|
| 311 | this.dragHandle = this.frame.makeDraggable({ |
---|
| 312 | modifiers: {x : 'left', y : false}, |
---|
| 313 | limit: {x : [0, 200 - this.frame.getStyle('width').toInt() ]}, |
---|
| 314 | onDrag: function() { |
---|
| 315 | frameleft = this.frame.getStyle('left').toInt(); |
---|
| 316 | newscroll = frameleft * this.ratio; |
---|
| 317 | |
---|
| 318 | this.outter.scrollTo(newscroll, 0); |
---|
| 319 | |
---|
| 320 | }.bind(this) |
---|
| 321 | }); |
---|
| 322 | }, |
---|
| 323 | |
---|
| 324 | addImageEvent: function() { |
---|
| 325 | this.image.addEvent('click', function(event){ |
---|
| 326 | var event = new Event(event); |
---|
| 327 | var slideEffect = new Fx.Style(this.frame, 'left',{duration:1000, transition: Fx.Transitions.Sine.easeInOut}); |
---|
| 328 | var scrollEffect = new Fx.Scroll(this.outter, {duration:1000, transition: Fx.Transitions.Sine.easeInOut}); |
---|
| 329 | |
---|
| 330 | newleft = (event.page.x - this.thumb.getLeft().toInt()) - this.halfFrame; |
---|
| 331 | if(newleft < 0) |
---|
| 332 | { |
---|
| 333 | newleft = 0; |
---|
| 334 | } |
---|
| 335 | else if(newleft > 200 - this.frame.getStyle('width').toInt()) |
---|
| 336 | { |
---|
| 337 | newleft = 200 - this.frame.getStyle('width').toInt(); |
---|
| 338 | } |
---|
| 339 | |
---|
| 340 | slideEffect.start(newleft); |
---|
| 341 | scrollEffect.scrollTo(newleft * this.ratio); |
---|
| 342 | }.bind(this)); |
---|
| 343 | } |
---|
| 344 | |
---|
| 345 | }); |
---|