Context Navigation

source: extensions/paMOOramics/js/Copie de pamoorama0.3.js @ 4540

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

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

Download in other formats: