4 This is a part of mkgallery.pl suite
5 http://www.average.org/mkgallery/
7 Uses mootools (1.2) http://www.mootools.net/
8 Inspired by slideshow http://www.phatfusion.net/slideshow/
14 - On show image: find this and next urls; put in place
15 those that are already here; free unneeded; initiate download of
16 the rest; if needed image is ready then initiate "transitioning", else
18 - On load complete: if this is the target image, initiate "transitioning".
19 - On "loading": show "loading" image
20 - On "transitioning": hide "loading" image; initiate FX animation to the
22 - On animation complete: blank previous image; if "playing" then schedule
23 autoswitch to next image in the future.
24 - On autoswitch to next image: if "playing" then switch to next image.
25 - On switch to next image: if next exists, show next image, else show
27 - On switch to prev image: if prev exists, show prev image, else show
28 "first image" message.
29 - On "play": make "playing"; switch to next image.
30 - On "stop": if "playing" cancel autoswitch; break "playing".
31 - On "start show": set up things; set "playing" state; show needed image.
32 - On "stop show": cancel any schedules, hide things.
33 - On resize: recalculate existing image size and position; determine
34 what image is needed; if it is not the one on display then request
35 "show image" for the new image.
38 var Show = new Class({
40 getOptions: function(){
42 cbStart: function(){ alert('show start undefined'); },
43 cbExit: function(){ alert('show exit undefined'); },
50 initialize: function(vimgs, container, controls, options){
51 this.setOptions(this.getOptions(), options);
53 this.container = container;
54 this.controls = controls;
55 this.controls.registershow(this);
57 this.delay = this.options.delay;
64 * thescripts.com/forum/thread170365.html
66 var hashpos = document.URL.search(/#/);
68 this.baseurl = document.URL.slice(0,hashpos);
70 this.baseurl = document.URL
74 this.prevdisplay = new Element('img').
75 setStyle('opacity', 0);
76 this.container.grab(this.prevdisplay);
77 this.ondisplay = this.prevdisplay.clone();
78 this.container.grab(this.ondisplay);
79 this.loadingdiv = new Element('div').
80 addClass('loading').setStyles({
86 width: this.coords.width,
87 height: this.coords.height
89 this.container.grab(this.loadingdiv);
91 window.addEvent('resize', this.resizer.bind(this))
94 /* event handler for window resize */
98 var newstyle = this.calcsize(this.cache.curr);
99 this.ondisplay.setStyles(newstyle);
100 /* check if we need reload */
103 /* prev, play, stop, next, exit, comm are methods for button presses */
108 if (this.currentid > 0) {
109 this.show(this.currentid-1);
111 /* alert('show.prev called beyond first element'); */
117 this.isplaying = false;
118 this.controls.running(0);
122 this.isplaying = true;
123 this.timer = this.autonext.delay(this.delay,this);
124 this.controls.running(1);
127 toggleplay: function(){
128 if (this.isplaying) { this.stop(); }
129 else { this.play(); }
135 if (this.currentid < this.vimgs.length-1) {
136 this.show(this.currentid+1);
138 /* alert('show.next called beyond last element'); */
145 this.prevdisplay.setStyle('display', 'none');
146 this.ondisplay.setStyle('display', 'none');
147 document.location.href = this.baseurl;
148 this.options.cbExit();
152 /* alert('show.comm called, do nothing'); */
155 /* Entry point: called to start doing things */
157 start: function(id, play){
158 this.options.cbStart();
159 this.isplaying = play;
160 this.controls.running(this.isplaying);
163 return false; /* to make it usable from href links */
166 /* "Private" methods to do the real job */
169 /* alert('called show.show('+id+')'); */
172 prev: (id > 0)?this.prepare(id-1):{},
173 curr: this.prepare(id),
174 next: (id < (this.vimgs.length-1))?this.prepare(id+1):{}
177 this.cache = newcache;
178 if (this.cache.curr.ready) {
179 this.display(this.cache.curr);
181 this.pendingload = true;
184 document.location.href = this.baseurl+'#'+this.vimgs[id][0];
185 this.controls.info(id,this.vimgs.length,
186 '#'+this.vimgs[id][0],
190 prepare: function(id){
192 for (vi=0;vi<this.vimgs[id][2].length-1;vi++) {
193 if ((this.vimgs[id][2][vi][0] >= this.target.width) ||
194 (this.vimgs[id][2][vi][1] >= this.target.height)) {
198 /* alert('prepare id='+id+', selected '+vi+' at '+
199 this.vimgs[id][2][vi][0]+'x'+
200 this.vimgs[id][2][vi][1]); */
202 ['prev', 'curr', 'next'].each(function(el){
203 if (this.cache[el] &&
204 this.cache[el].id == id &&
205 this.cache[el].vi == vi) {
206 cachel = this.cache[el];
214 url: this.vimgs[id][2][vi][2]
216 cachel.img = this.bgload(cachel);
221 bgload: function(cachel){
222 /* alert('bgload: id='+cachel.id+' vi='+cachel.vi+
223 ' url='+cachel.url); */
224 return new Asset.image(this.vimgs[cachel.id][2][cachel.vi][2],{
225 id: this.vimgs[cachel.id][0],
226 title: this.vimgs[cachel.id][1],
227 onload: this.loadcomplete.bind(this,[cachel])
231 loadcomplete: function(cachel){
232 /* alert('loadcomplete '+cachel.url+' id='+cachel.id+
233 ' vi='+cachel.vi); */
235 if (cachel.id == this.currentid &&
237 this.pendingload = false;
239 this.display(cachel);
243 display: function(cachel){
244 var newimg = cachel.img.clone().
245 set('class', 'mainformat').
246 setProperty('alt', 'Current Image').
247 setStyles(this.calcsize(cachel)).
252 this.ondisplay.replaces(this.prevdisplay).
253 setProperty('alt', 'Previous Image').
254 setStyle('zIndex', 2);
255 this.prevdisplay = this.ondisplay;
256 this.ondisplay = newimg;
257 this.container.grab(this.ondisplay);
262 this.fx = new Fx.Tween(this.ondisplay, {
263 duration: this.options.fxduration
265 this.fx.addEvent('complete',this.displaycomplete.bind(this));
266 this.fx.start('opacity', 0, 1);
269 displaycomplete: function(){
270 this.prevdisplay.setStyle('display', 'none');
271 if (this.isplaying) {
272 this.timer = this.autonext.delay(this.delay,this);
276 autonext: function(){
277 if (this.isplaying) {
278 if (this.currentid < this.vimgs.length-1) {
279 this.show(this.currentid+1);
286 calcsize: function(cachel){
289 position: 'absolute',
292 width: this.coords.width,
293 height: this.coords.height
298 candidate = this.target.width /
299 this.vimgs[cachel.id][2][cachel.vi][0];
300 if (factor > candidate) { factor = candidate; }
301 candidate = this.target.height /
302 this.vimgs[cachel.id][2][cachel.vi][1];
303 if (factor > candidate) { factor = candidate; }
304 var w = Math.round(this.vimgs[cachel.id][2][cachel.vi][0] *
306 var h = Math.round(this.vimgs[cachel.id][2][cachel.vi][1] *
308 var t = Math.round((this.coords.height-h)/2);
309 var l = Math.round((this.coords.width-w)/2);
310 /* alert('new size: '+w+'x'+h+'+'+l+'+'+t); */
312 position: 'absolute',
320 showloading: function(){
321 this.loadingdiv.setStyles({
323 width: this.coords.width,
324 height: this.coords.height
328 hideloading: function(){
329 this.loadingdiv.setStyle('display', 'none');
332 cleartimer: function(){
333 if (this.isplaying) { $clear(this.timer); }
337 if (this.fx) this.fx.cancel();
340 updatecoords: function(){
341 this.coords = this.container.getCoordinates();
343 width: Math.round(this.coords.width *
344 this.options.percentage / 100),
345 height: Math.round(this.coords.height *
346 this.options.percentage / 100)
348 /* alert('coords: '+this.coords.width+'x'+this.coords.height+
349 ', target: '+this.target.width+'x'+this.target.height); */
354 Show.implement(new Options);
355 Show.implement(new Events);