Context Navigation

source: extensions/paMOOramics/js/pamoorama0.3.js @ 9752

Last change on this file since 9752 was 7581, checked in by repie38, 14 years ago
bug:1095 js fix for footer div height (now minimum 50px) thanks to mistic100
File size: 9.2 KB

Line
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
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
93	this.footer = new Element('div', {
94	'id': this.elid + '_footer',
95	'styles': {
96	'width' : this.options.width + 'px',
97	'height': this.newFooterHeight + 'px',
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	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: