source: trunk/spip/esqueleto-redcta/plugins/magusine/javascript/slightbox.js @ 133

Last change on this file since 133 was 80, checked in by guille, 16 years ago

el plugin completo
  • Property svn:executable set to *
File size: 16.3 KB
Line 
1/* All code copyright 2007 Taras Mankovski */
2/* email: tarasm@gmail.com */
3/* website: http://www.oscandy.com/author/taras */
4
5// This class adds lightbox functionality to smoothgallery
6gallery = gallery.extend({
7        initialize: function(element, options) {
8                this.parent(element, options);
9                this.addEvent('onPopulated', this.makeLink.bind(this));
10                if (options.lightbox) this.lightbox = new lightboxforsmoothgallery(this.galleryData, {});
11        },
12        populateData: function() {
13                currentArrayPlace = this.galleryData.length;
14                options = this.options;
15                data = this.galleryData;
16                this.galleryElement.getElements(options.elementSelector).each(function(el) {
17                        elementDict = {
18                                imagepath: el.getElement(options.linkSelector).getProperty('href'),
19                                image: el.getElement(options.imageSelector).getProperty('src'),
20                                number: currentArrayPlace
21                        };
22                        if ((options.showInfopane) | (options.showCarousel))
23                                Object.extend(elementDict, {
24                                        title: el.getElement(options.titleSelector).innerHTML,
25                                        description: el.getElement(options.subtitleSelector).innerHTML
26                                });
27                        if (options.embedLinks)
28                                Object.extend(elementDict, {
29                                        link: el.getElement(options.linkSelector).href||false,
30                                        linkTitle: el.getElement(options.linkSelector).title||false
31                                });
32                        if ((!options.useThumbGenerator) && (options.showCarousel))
33                                Object.extend(elementDict, {
34                                        thumbnail: el.getElement(options.thumbnailSelector).src
35                                });
36                        else if (options.useThumbGenerator)
37                                Object.extend(elementDict, {
38                                        thumbnail: 'resizer.php?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
39                                });
40                       
41                        data[currentArrayPlace] = elementDict;
42                        currentArrayPlace++;
43                        if (this.options.destroyAfterPopulate)
44                                el.remove();
45                });
46                this.galleryData = data;
47                this.fireEvent('onPopulated');
48        },
49        makeLink: function (num) {
50                this.currentLink.setProperties({
51                        href: this.galleryData[num].link,
52                        title: this.galleryData[num].linkTitle
53                })
54                if (options.lightbox) this.currentLink.onclick = this.lightbox.open.pass(num, this.lightbox);
55                if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
56                        this.currentLink.setStyle('display', 'block'); 
57        }
58});
59
60/*
61        Slimbox v1.22 - The ultimate lightweight Lightbox clone
62        by Christophe Beyls (http://www.digitalia.be) - MIT-style license.
63        Inspired by the original Lightbox v2 by Lokesh Dhakar.
64*/
65
66var Lightbox = new Class({
67       
68        initialize: function(options) {
69                this.options = Object.extend({
70                        resizeDuration: 400,            // Duration of height and width resizing (ms)
71                        initialWidth: 250,              // Initial width of the box (px)
72                        initialHeight: 250,             // Initial height of the box (px)
73                        animateCaption: true            // Enable/Disable caption animation
74                }, options || {});
75                this.anchors = [];
76                $A(document.getElementsByTagName('a')).each(function(el){
77                        if(el.rel && el.href && el.rel.test('^lightbox', 'i')) {
78                                el.onclick = this.click.pass(el, this);
79                                this.anchors.push(el);
80                        }
81                }, this);
82
83                this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
84                this.eventPosition = this.position.bind(this);
85
86                this.buildbox();
87
88                var nextEffect = this.nextEffect.bind(this);
89                this.fx = {
90                        overlay: this.overlay.effect('opacity', { duration: 500 }).hide(),
91                        resize: this.center.effects({ duration: this.options.resizeDuration, onComplete: nextEffect }),
92                        image: this.image.effect('opacity', { duration: 500, onComplete: nextEffect }),
93                        bottom: this.bottom.effects({ duration: 400, onComplete: nextEffect })
94                };
95               
96                this.preloadPrev = new Image();
97                this.preloadNext = new Image();
98        },
99        buildbox : function () {
100                this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);   
101                this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);
102                this.image = new Element('div').setProperty('id', 'lbImage').injectInside(this.center);
103                this.prevLink = new Element('a').setProperties({id: 'lbPrevLink', href: '#'}).setStyle('display', 'none').injectInside(this.image);
104                this.nextLink = this.prevLink.clone().setProperty('id', 'lbNextLink').injectInside(this.image);
105                this.prevLink.onclick = this.previous.bind(this);
106                this.nextLink.onclick = this.next.bind(this);
107       
108                this.bottom = new Element('div').setProperty('id', 'lbBottom').setStyle('display', 'none').injectInside(document.body);
109                new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
110                this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
111                this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom);
112                new Element('div').setStyle('clear', 'both').injectInside(this.bottom);
113        },
114        click: function(link) {
115                if(link.rel.length == 8) {
116                        return this.show(link.href, link.title);
117                }
118                var j, imageNum, images = [];
119                this.anchors.each(function(el){
120                        if(el.rel == link.rel) {
121                                for(j = 0; j < images.length; j++)
122                                        if(images[j][0] == el.href) break;
123                                if(j == images.length) {                       
124                                        images.push([el.href, el.title]);
125                                        if(el.href == link.href) imageNum = j;
126                                }
127                        }
128                }, this);
129                return this.open(images, imageNum);
130        },
131
132        show: function(url, title) {
133                return this.open([[url, title]], 0);
134        },
135
136        open: function(images, imageNum) {
137                this.images = images;
138                this.position();
139                this.setup(true);
140                this.top = Window.getScrollTop() + (Window.getHeight() / 15);
141                this.center.setStyles({top: this.top+'px', display: ''});
142                this.fx.overlay.custom(0.8);
143                return this.changeImage(imageNum);
144        },
145
146        position: function() {
147                this.overlay.setStyles({top: Window.getScrollTop()+'px', height: Window.getHeight()+'px'});
148        },
149
150        setup: function(open) {
151                var elements = $A(document.getElementsByTagName('object'));
152                elements.extend(document.getElementsByTagName(window.ActiveXObject ? 'select' : 'embed'));
153                elements.each(function(el){ el.style.visibility = open ? 'hidden' : ''; });
154                var fn = open ? 'addEvent' : 'removeEvent';
155                window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
156                document[fn]('keydown', this.eventKeyDown);
157                this.step = 0;
158        },
159
160        keyboardListener: function(event) {
161                switch(event.keyCode) {
162                        case 27: case 88: case 67: this.close(); break;
163                        case 37: case 80: this.previous(); break;       
164                        case 39: case 78: this.next();
165                }
166        },
167
168        previous: function() {
169                return this.changeImage(this.activeImage-1);
170        },
171
172        next: function() {
173                return this.changeImage(this.activeImage+1);
174        },
175
176        changeImage: function(imageNum) {               
177                if(this.step || (imageNum < 0) || (imageNum >= this.images.length)) return false;
178                this.step = 1;
179                this.activeImage = imageNum;
180               
181                this.prevLink.style.display = this.nextLink.style.display = 'none';
182                this.bottom.setStyles({opacity: '0', height: '0px', display: 'none'});
183                this.fx.image.hide();
184                this.center.className = 'lbLoading';
185               
186                this.preload = new Image();
187                this.preload.onload = this.nextEffect.bind(this);
188                this.preload.src = this.images[imageNum][0];
189                return false;
190        },
191
192        nextEffect: function() {
193                switch(this.step++) {
194                case 1:
195                        this.center.className = '';
196                        this.image.setStyles({backgroundImage: 'url('+this.images[this.activeImage][0]+')', width: this.preload.width+'px'});
197                        this.image.style.height = this.prevLink.style.height = this.nextLink.style.height = this.preload.height+'px';
198                       
199                        this.caption.setHTML(this.images[this.activeImage][1] || '');
200                        this.number.setHTML((this.images.length == 1) ? '' : 'Image '+(this.activeImage+1)+' of '+this.images.length);
201                       
202                        if(this.activeImage != 0) this.preloadPrev.src = this.images[this.activeImage - 1][0];
203                        if(this.activeImage != (this.images.length - 1)) this.preloadNext.src = this.images[this.activeImage + 1][0];
204                        if(this.center.clientHeight != this.image.offsetHeight+20) {
205                                this.fx.resize.custom({height: [this.center.clientHeight, this.image.offsetHeight]});
206                                break;
207                        }
208                        this.step++;
209                case 2:
210                        if(this.center.clientWidth != this.image.offsetWidth+20) {
211                                this.fx.resize.custom({width: [this.center.clientWidth, this.image.offsetWidth], marginLeft: [-this.center.clientWidth/2, -this.image.offsetWidth/2]});
212                                break;
213                        }
214                        this.step++;
215                case 3:
216                        this.bottom.setStyles({top: (this.top + this.center.clientHeight)+'px', width: this.image.style.width, marginLeft: this.center.style.marginLeft, display: ''});
217                        this.fx.image.custom(0, 1);
218                        break;
219                case 4:
220                        if(this.options.animateCaption) {
221                                this.fx.bottom.custom({opacity: [0, 1], height: [0, this.bottom.scrollHeight]});
222                                break;
223                        }
224                        this.bottom.setStyles({opacity: '1', height: this.bottom.scrollHeight+'px'});
225                case 5:
226                        if(this.activeImage != 0) this.prevLink.style.display = '';
227                        if(this.activeImage != (this.images.length - 1)) this.nextLink.style.display = '';
228                        this.step = 0;
229                }
230        },
231
232        close: function() {
233                if(this.step < 0) return;
234                this.step = -1;
235                if(this.preload) {
236                        this.preload.onload = Class.empty;
237                        this.preload = null;
238                }
239                for(var f in this.fx) this.fx[f].clearTimer();
240                this.center.style.display = this.bottom.style.display = 'none';
241                this.fx.overlay.chain(this.setup.pass(false, this)).custom(0);
242                return false;
243        }
244});
245
246/* All code copyright 2007 Taras Mankovski */
247/* email: tarasm@gmail.com */
248/* website: http://www.oscandy.com/author/taras */
249
250// This class extends lightbox class and makes the lightbox compatible with smoothgallery
251var lightboxforsmoothgallery = Lightbox.extend({
252        initialize: function(galleryData, options) {
253                this.options = Object.extend({
254                        resizeDuration: 400,    // Duration of height and width resizing (ms)
255                        initialWidth: 250,              // Initial width of the box (px)
256                        initialHeight: 250,             // Initial height of the box (px)
257                        animateCaption: true    // Enable/Disable caption animation
258                }, options || {});
259               
260                this.images = galleryData;
261               
262                this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
263                this.eventPosition = this.position.bind(this);
264               
265                this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);
266               
267                this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);
268                this.image = new Element('div').setProperty('id', 'lbImage').injectInside(this.center);
269                this.prevLink = new Element('a').setProperties({id: 'lbPrevLink', href: '#'}).setStyle('display', 'none').injectInside(this.image);
270                this.nextLink = this.prevLink.clone().setProperty('id', 'lbNextLink').injectInside(this.image);
271                this.prevLink.onclick = this.previous.bind(this);
272                this.nextLink.onclick = this.next.bind(this);
273               
274                this.bottom = new Element('div').setProperty('id', 'lbBottom').setStyle('display', 'none').injectInside(document.body);
275                this.close = new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
276                this.number = new Element('div').setProperty('id', 'lbNumber').addClass('gallery').injectInside(this.bottom);
277                this.description = new Element('div').setProperty('id', 'lbDescription').injectInside(this.bottom);
278                this.title = new Element('div').setProperty('id', 'lbTitle').injectInside(this.description);
279                new Element('div').setStyle('clear', 'both').injectInside(this.description);
280                this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.description);
281                new Element('div').setStyle('clear', 'both').injectInside(this.bottom);
282               
283                var nextEffect = this.nextEffect.bind(this);
284                this.fx = {
285                        overlay: this.overlay.effect('opacity', { duration: 500 }).hide(),
286                        resize: this.center.effects({ duration: this.options.resizeDuration, onComplete: nextEffect }),
287                        image: this.image.effect('opacity', { duration: 500, onComplete: nextEffect }),
288                        bottom: this.bottom.effects({ duration: 400, onComplete: nextEffect })
289                };
290               
291                this.preloadPrev = new Image();
292                this.preloadNext = new Image();
293               
294                this.open.bind(this);
295                this.changeImage.bind(this);           
296        },
297        buildbox : function () {
298                this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);   
299                this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);
300                this.image = new Element('div').setProperty('id', 'lbImage').injectInside(this.center);
301                this.prevLink = new Element('a').setProperties({id: 'lbPrevLink', href: '#'}).setStyle('display', 'none').injectInside(this.image);
302                this.nextLink = this.prevLink.clone().setProperty('id', 'lbNextLink').injectInside(this.image);
303                this.prevLink.onclick = this.previous.bind(this);
304                this.nextLink.onclick = this.next.bind(this);
305       
306                this.bottom = new Element('div').setProperty('id', 'lbBottom').setStyle('display', 'none').injectInside(document.body);
307                new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
308                new Element('div').setProperty('id', 'lbDescription').injectInside(this.bottom);
309                this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
310                this.title = new Element('div').setProperty('id', 'lbTitle').injectInside(this.description);
311                this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.description);
312                new Element('div').setStyle('clear', 'both').injectInside(this.bottom);
313        },
314        open: function(num) {
315                this.position();
316                this.setup(true);
317                this.top = Window.getScrollTop() + (Window.getHeight() / 15);
318                this.center.setStyles({top: this.top+'px', display: ''});
319                this.fx.overlay.custom(0.8);
320                return this.changeImage(num);
321        },
322        changeImage: function(num) {           
323                if(this.step || (num < 0) || (num >= this.images.length)) return false;
324                this.step = 1;
325                this.activeImage = num;
326               
327                this.prevLink.style.display = this.nextLink.style.display = 'none';
328                this.bottom.setStyles({opacity: '0', height: '0px', display: 'none'});
329                this.fx.image.hide();
330                this.center.className = 'lbLoading';
331               
332                this.preload = new Image();
333                this.preload.onload = this.nextEffect.bind(this);
334                this.preload.src = this.images[num].imagepath;
335                return false;
336        },
337        nextEffect: function() {
338                switch(this.step++) {
339                case 1:
340                        this.center.className = '';
341                        this.image.setStyles({backgroundImage: 'url('+this.images[this.activeImage].imagepath+')', width: this.preload.width+'px'});
342                        this.image.style.height = this.prevLink.style.height = this.nextLink.style.height = this.preload.height+'px';
343                       
344                        this.title.setHTML(this.images[this.activeImage].title || '');
345                        this.caption.setHTML(this.images[this.activeImage].description || '');
346                        this.number.setHTML((this.images.length == 1) ? '' : 'Image '+(this.activeImage+1)+' of '+this.images.length);
347       
348                        if(this.activeImage != 0) this.preloadPrev.src = this.images[this.activeImage - 1].imagepath;
349                        if(this.activeImage != (this.images.length - 1)) this.preloadNext.src = this.images[this.activeImage + 1].imagepath;
350                        if(this.center.clientHeight != this.image.offsetHeight+20) {
351                                this.fx.resize.custom({height: [this.center.clientHeight, this.image.offsetHeight]});
352                                break;
353                        }
354                        this.step++;
355                case 2:
356                        if(this.center.clientWidth != this.image.offsetWidth+20) {
357                                this.fx.resize.custom({width: [this.center.clientWidth, this.image.offsetWidth], marginLeft: [-this.center.clientWidth/2, -this.image.offsetWidth/2]});
358                                break;
359                        }
360                        this.step++;
361                case 3:
362                        this.bottom.setStyles({top: (this.top + this.center.clientHeight)+'px', width: this.image.style.width, marginLeft: this.center.style.marginLeft, display: ''});
363                        this.fx.image.custom(0, 1);
364                        break;
365                case 4:
366                        if(this.options.animateCaption) {
367                                this.fx.bottom.custom({opacity: [0, 1], height: [0, this.bottom.scrollHeight]});
368                                break;
369                        }
370                        this.bottom.setStyles({opacity: '1', height: this.bottom.scrollHeight+'px'});
371                case 5:
372                        if(this.activeImage != 0) this.prevLink.style.display = '';
373                        if(this.activeImage != (this.images.length - 1)) this.nextLink.style.display = '';
374                        this.step = 0;
375                }
376        }
377});
Note: See TracBrowser for help on using the repository browser.