Context Navigation

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

Last change on this file since 4220 was 3700, checked in by repie38, 15 years ago
create paMOOramics extension for repie38
File size: 9.0 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	this.footer = new Element('div', {
88	'id': this.elid + '_footer',
89	'styles': {
90	'width' : this.options.width + 'px',
91	'height': (Math.floor(this.imageHeight / this.ratio) + 22) + 'px',
92	'background-color': this.options.footercolor
93	}
94	});
95
96	this.caption = new Element('div', {
97	'id': this.elid + '_caption',
98	'styles': {
99	'float': 'left',
100	'margin-top': '11px',
101	'padding-left': '8px',
102	'color' : this.options.captioncolor,
103	'font-family': "Trebuchet MS",
104	'text-align':'left',
105	'font-size': '13px'
106	}
107	});
108	this.caption.setHTML(this.options.caption);
109
110	this.thumb = new Element('div', {
111	'id': this.elid + '_thumb',
112	'styles': {
113	'float': 'right',
114	'margin': '10px 8px 0px 0px',
115	'overflow' : 'hidden',
116	'padding' : '0px',
117	'height': (Math.floor(this.imageHeight / this.ratio) + 1) +'px',
118	'width': '200px',
119	'text-align': 'left',
120	'border': '2px solid #fff',
121	'cursor': 'pointer'
122	},
123	'title': this.options.clickMessage
124	});
125
126	if(window.ie)
127	{
128	this.ieheightadjust = 0;
129	}
130	else
131	{
132	this.ieheightadjust = 3;
133	}
134	this.frame = new Element('div', {
135	'id': this.elid + '_frame',
136	'styles': {
137	'height': (Math.floor(this.imageHeight / this.ratio) + 1) +'px',
138	'width': (Math.floor(this.options.width / this.ratio) + 1) + 'px',
139	'position': 'relative',
140	'top': '-' + (Math.floor(this.imageHeight / this.ratio) + this.ieheightadjust +1) +'px',
141	'left' : '0px',
142	'padding' : '0px',
143	'margin' : '0px',
144	'background-color': 'lightblue',
145	'cursor': 'move',
146	'z-index': '1000',
147	'opacity': '0.4',
148	'-moz-opacity': '0.8',
149	'filter': 'alpha(opacity=80)'
150	},
151	'title': this.options.dragMessage
152	});
153
154	if(this.options.enableAutoscroll)
155	{
156	this.playpause = new Element('div', {
157	'id': this.elid + '_playpause',
158	'styles': {
159
160	'padding-left': '1px',
161	'color' : this.options.captioncolor,
162	'font-family': "Trebuchet MS",
163	'font-size': '11px',
164	'text-align':'left',
165	'cursor': 'pointer'
166	}
167	});
168	this.playpause.setHTML(this.options.startAutoscroll);
169	this.playpause.addEvent('click', this.playpauseClicked.bind(this));
170	}
171
172	this.halfFrame = (this.options.width / this.ratio) / 2;
173
174	this.image.setProperty('width', 200);
175	this.image.setProperty('height', Math.floor(this.imageHeight / this.ratio) + 1);
176	this.image.setStyle('left', '0px');
177	this.image.setStyle('border', '0px');
178	this.image.setStyle('padding', '0px');
179	this.image.setStyle('margin', '0px');
180
181	//Inject everything
182	this.outter.injectInside(this.el);
183	this.inner.injectInside(this.outter);
184	this.footer.injectInside(this.el);
185	this.caption.injectInside(this.footer);
186
187	if(this.options.enableAutoscroll)
188	{
189	this.playpause.injectInside(this.caption);
190	}
191	this.thumb.injectInside(this.footer);
192
193	this.image.injectInside(this.thumb);
194	this.frame.injectInside(this.thumb);
195
196
197	// reset the scroll
198	this.outter.scrollTo(0, 0);
199
200	//AutoScroll Effects
201	this.autoScrollFx = new Fx.Scroll(this.outter, {duration:this.options.autoscrollSpeed, onComplete: this.animCompleted.bind(this)});
202	this.autoSlideFx = new Fx.Style(this.frame, 'left', {duration: this.options.autoscrollSpeed});
203
204	//do the scrollthing!
205	if(this.options.activateSlider)
206	{
207	this.scroll = new Scroller(this.outter, {area: this.area, velocity: 0.3, onChange:function(x, y) {
208	newleft = (x / this.ratio);
209
210	this.outter.scrollTo(x, y);
211
212	if(x <= 0)
213	{
214	this.frame.setStyle('left', 0);
215	}
216	else if(x >= this.imageWidth)
217	{
218	this.frame.setStyle('left', 200 - this.frame.getStyle('width').toInt());
219	}
220	else
221	{
222	if( (newleft >= 0) && (newleft < 200 - this.frame.getStyle('width').toInt()) )
223	{
224	this.frame.setStyle('left', newleft);
225
226	}
227	}
228	}.bind(this)});
229
230	this.outter.addEvent('mouseover', this.scroll.start.bind(this.scroll));
231	this.outter.addEvent('mouseout', this.scroll.stop.bind(this.scroll));
232	}
233
234	this.createDraggable();
235
236	this.addImageEvent();
237
238	if(this.options.autoscrollOnLoad)
239	{
240	this.playpauseClicked();
241	}
242	this.skipInit = true;
243	}
244
245	},
246
247	startAnimRight: function() {
248	var limitRight = 200 - this.frame.getStyle('width').toInt();
249
250	this.outter.scrollTo(0, 0);
251	this.frame.setStyle('left', 0);
252
253	this.autoSlideFx.start(limitRight);
254	this.autoScrollFx.toRight();
255	this.direction = 'right';
256
257	//stop the scroller/drag etc..
258	this.outter.removeEvents('mouseover');
259	this.dragHandle.detach();
260	this.image.removeEvents('click');
261
262	},
263	startAnimLeft: function() {
264	this.autoSlideFx.start(0);
265	this.autoScrollFx.scrollTo(0);
266	this.direction = 'left';
267
268	},
269
270	stopAnim: function() {
271	this.autoSlideFx.stop();
272	this.autoScrollFx.stop();
273
274	//reconnect events
275	this.outter.addEvent('mouseover', this.scroll.start.bind(this.scroll));
276	this.createDraggable();
277	this.addImageEvent();
278	},
279
280	animCompleted: function() {
281	if(this.direction=='right')
282	{
283	this.startAnimLeft();
284	}
285	else
286	{
287	this.startAnimRight();
288	}
289	},
290
291	playpauseClicked: function() {
292	if(this.playpause.getText() == this.options.startAutoscroll)
293	{
294	this.playpause.setHTML(this.options.stopAutoscroll);
295	this.startAnimRight();
296	}
297	else
298	{
299	this.playpause.setHTML(this.options.startAutoscroll);
300	this.stopAnim();
301	}
302	},
303
304	createDraggable: function() {
305	this.dragHandle = this.frame.makeDraggable({
306	modifiers: {x : 'left', y : false},
307	limit: {x : [0, 200 - this.frame.getStyle('width').toInt() ]},
308	onDrag: function() {
309	frameleft = this.frame.getStyle('left').toInt();
310	newscroll = frameleft * this.ratio;
311
312	this.outter.scrollTo(newscroll, 0);
313
314	}.bind(this)
315	});
316	},
317
318	addImageEvent: function() {
319	this.image.addEvent('click', function(event){
320	var event = new Event(event);
321	var slideEffect = new Fx.Style(this.frame, 'left',{duration:1000, transition: Fx.Transitions.Sine.easeInOut});
322	var scrollEffect = new Fx.Scroll(this.outter, {duration:1000, transition: Fx.Transitions.Sine.easeInOut});
323
324	newleft = (event.page.x - this.thumb.getLeft().toInt()) - this.halfFrame;
325	if(newleft < 0)
326	{
327	newleft = 0;
328	}
329	else if(newleft > 200 - this.frame.getStyle('width').toInt())
330	{
331	newleft = 200 - this.frame.getStyle('width').toInt();
332	}
333
334	slideEffect.start(newleft);
335	scrollEffect.scrollTo(newleft * this.ratio);
336	}.bind(this));
337	}
338
339	});

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

Download in other formats: