1 /* <script type="text/javascript">
2 // -----------------------------------------------------------------------------------
3 // Roo lightbox - based on..
6 // by Lokesh Dhakar - http://www.lokeshdhakar.com
7 // Last Modification: 2/9/08
9 // For more information, visit:
10 // http://lokeshdhakar.com/projects/lightbox2/
12 // Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
13 // - Free for use in both personal and commercial projects
14 // - Attribution requires leaving author name, author link, and the license info intact.
16 // Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
17 // Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
19 // -----------------------------------------------------------------------------------
26 Lightbox Class Declaration
31 - resizeImageContainer()
36 - disableKeyboardNav()
38 - preloadNeighborImages()
45 Roo.namespace('Roo.ux');
47 Roo.ux.Lightbox = function(cfg) {
53 Roo.apply(Roo.ux.Lightbox.prototype,
57 * @cfg fileLoadingImage {string} loading image
59 fileLoadingImage: '/lightbox/images/loading.gif',
61 * @cfg fileBottomNavCloseImage {string} close image
63 fileBottomNavCloseImage: '/lightbox/images/closelabel.gif',
65 * @cfg overlayOpacity {number} controls transparency of shadow overlay
69 * @cfg fileLoadingImage {boolean} toggles resizing animations
73 * @cfg resizeSpeed {number} controls the speed of the image
74 * resizing animations (1=slowest and 10=fastest)
78 * @cfg borderSize {number} if you adjust the padding in the CSS,
79 * you will need to update this variable
83 * @cfg labelImage {string} When grouping images this is used to write: Image # of #.
84 * Change it for non-english localization
88 * @cfg labelOf {string} When grouping images this is used to write: Image # of #.
105 activeImage: undefined,
109 * Constructor runs on completion of the DOM loading. Calls updateImageList and then
110 * the function inserts html at the bottom of the page which is used to display the shadow
111 * overlay and the image container.
115 initialize: function() {
117 this.updateImageList();
119 // TBD this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
120 this.resizeSpeed = Math.min(this.resizeSpeed, 10);
121 this.resizeSpeed = Math.max(this.resizeSpeed, 1);
123 this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
124 this.overlayDuration = this.animate ? 0.2 : 0; // shadow fade in/out duration
126 // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
127 // If animations are turned off, it will be hidden as to prevent a flicker of a
128 // white 250 by 250 box.
129 var size = (this.animate ? 250 : 1) + 'px';
130 var dh = Roo.DomHelper;
131 this.el = dh.append(document.body, {
133 // '<div id="overlay"></div>' +
134 '<div id="lightbox">' +
135 ' <div id="outerImageContainer">' +
136 ' <div id="imageContainer">' +
137 ' <img id="lightboxImage">' +
138 ' <div style="" id="hoverNav">' +
139 ' <a href="#" id="prevLink"></a>' +
140 ' <a href="#" id="nextLink"></a>' +
142 ' <div id="loading">' +
143 ' <a href="#" id="loadingLink"> </a>' +
147 ' <div id="imageDataContainer">' +
148 ' <div id="imageData">' +
149 ' <div id="imageDetails">' +
150 ' <span id="caption"></span>' +
151 ' <span id="numberDisplay"></span>' +
153 ' <div id="bottomNav">' +
154 ' <div href="#" id="bottomNavClose"></div>' +
166 'lightbox outerImageContainer imageContainer ' +
167 'lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
168 'imageDataContainer imageData imageDetails caption numberDisplay '
169 'bottomNav bottomNavClose';
171 Roo.each(ids.split(' '),
174 th[id] = Roo.get(id);
178 th[id].setVisibilityMode(Roo.Element.DISPLAY);
182 //Roo.get('overlay').hide();
183 //Roo.get('overlay').on('click', this.end, this);
184 Roo.get('lightbox').hide();
185 Roo.get('lightbox').on('click', function(event) {
186 if (event.getTarget().id == 'lightbox') {
191 Roo.get('outerImageContainer').setStyle({ width: size, height: size });
193 Roo.get('prevLink').on('click',
196 this.changeImage(this.activeImage - 1);
199 Roo.get('nextLink').on('click',
202 this.changeImage(this.activeImage + 1);
205 Roo.get('loadingLink').on('click',
211 Roo.get('bottomNavClose').on('click',
220 initializeCSS: function() {
221 if (typeof(Roo.ux.Lightbox.css) != 'undefined') {
224 Roo.ux.Lightbox.css = Roo.util.CSS.createStyleSheet( {
226 position: 'absolute',
229 text-align: 'center',
233 /* #lightbox img{ width: auto; height: auto;} */
234 #lightbox a img{ border: none; }
236 #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
237 #imageContainer{ padding: 10px; }
250 background: url(../images/loading.gif) 0 0 no-repeat;
257 background: url(../images/close.gif) 0 0 no-repeat;
262 #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
263 #imageContainer>#hoverNav{ left: 0;}
264 #hoverNav a{ outline: none;}
266 #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
267 #prevLink { left: 0; float: left;}
268 #nextLink { right: 0; float: right;}
269 #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
270 #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
276 * Loops through anchor tags looking for 'lightbox' references and applies onclick
277 * events to appropriate links. You can rerun after dynamically adding images w/ajax.
280 updateImageList: function() {
281 this.updateImageList = Roo.emptyFn;
282 if (this.imageArray.length) {
285 Roo.each(Roo.DomQuery.select('a[rel^=lightbox]'), function(e) {
286 this.imageArray.push(Roo.get(e));
287 Roo.get(e).on('click', (function(event, tg, tga,tgb) {
292 }).createDelegate(this, [e], true));
299 * Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
301 start: function(imageLink) {
303 // hide all the objects that cause problems..
304 $$('select', 'object', 'embed').each(
306 node.style.visibility = 'hidden' }
309 // stretch overlay to fill page and fade in
310 //var arrayPageSize = this.getPageSize();
311 Roo.get(document.body).mask(false);
312 Roo.get(document.body)._mask.setHeight(Roo.lib.Dom.getDocumentHeight())
313 //new Effect.Appear(this.overlay,
314 // { duration: this.overlayDuration, from: 0.0, to: this.overlayOpacity });
316 //this.imageArray = [];
320 imageLink = Roo.get(imageLink);
321 //console.log(imageLink.id);
322 Roo.each(this.imageArray, function (e, i) {
323 // console.log(e.id);
324 if (e.id == imageLink.id) {
330 // let's assume the constructor sorts out the list of images..
332 if ((imageLink.rel == 'lightbox')){
333 // if image is NOT part of a set, add single image to imageArray
334 this.imageArray.push([imageLink.href, imageLink.title]);
336 // if image is part of a set..
338 $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
339 collect(function(anchor){ return [anchor.href, anchor.title]; }).
342 while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
345 var s = Roo.get(document).getScroll();
347 // calculate top and left offset for the lightbox
349 var lightboxTop = s.top + (Roo.lib.Dom.getViewHeight() / 10);
350 var lightboxLeft = s.left
351 this.lightbox.setStyle({
352 top: lightboxTop + 'px',
353 left: lightboxLeft + 'px' ,
354 zIndex : Roo.get(document.body)._mask.getStyle('zIndex') * 1.1
356 //console.log("show lightbox");
357 this.lightbox.show();
361 this.changeImage(imageNum);
366 // Hide most elements and preload image in preparation for resizing image container.
368 changeImage: function(imageNum) {
370 this.activeImage = imageNum; // update global var
372 // hide elements during transition
374 this.loading.setStyle({
375 zIndex : Roo.get(document.body)._mask.getStyle('zIndex') * 1.2
378 this.loadingLink.setX( (Roo.lib.Dom.getViewWidth() / 2) - 16);
379 //this.loadingLink.show();
380 // center the loading?
384 this.hoverNav.hide();
385 this.prevLink.hide();
386 this.nextLink.hide();
387 // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
388 this.imageDataContainer.setStyle({opacity: .0001});
389 this.numberDisplay.hide();
391 var imgPreloader = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
392 // once image is preloaded, resize image container
395 imgPreloader.on('load', function() {
397 this.lightboxImage.dom.src = this.imageArray[this.activeImage].dom.href;
399 this.resizeImageContainer(imgPreloader.getWidth(), imgPreloader.getHeight());
400 imgPreloader.remove();
402 imgPreloader.dom.src = this.imageArray[this.activeImage].dom.href;
406 // resizeImageContainer()
408 resizeImageContainer: function(imgWidth, imgHeight) {
410 // make sure we have some sensible sizes..
411 imgWidth = Math.max(50, imgWidth);
412 imgHeight = Math.max(50, imgHeight);
414 // get current width and height
415 var widthCurrent = this.outerImageContainer.getWidth();
416 var heightCurrent = this.outerImageContainer.getHeight();
418 //fixme need better calcs.
420 var ww = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
421 var wh = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
425 // get new width and height
426 var bs = this.borderSize * 2;
428 var widthNew = imgWidth + bs;
429 var heightNew = imgHeight + bs;
431 if (widthNew > ww || heightNew > wh) {
432 // bigger than window.
433 // scale here... - bit nasty..
434 var rescale = 1.1 * Math.max( widthNew / ww , heightNew / wh);
435 //console.log(rescale);
436 imgWidth = Math.floor(imgWidth / rescale);
437 imgHeight = Math.floor(imgHeight / rescale);
438 widthNew = imgWidth + bs;
439 heightNew = imgHeight + bs;
444 this.lightboxImage.set( { width : imgWidth, height : imgHeight });
447 // scalars based on change from old to new
448 var xScale = (widthNew / widthCurrent) * 100;
449 var yScale = (heightNew / heightCurrent) * 100;
451 // calculate size difference between new and old image, and resize if necessary
452 var wDiff = widthCurrent - widthNew;
453 var hDiff = heightCurrent - heightNew;
456 this.outerImageContainer.animate(
457 { width: {to: widthNew}, height: {to: heightNew} },
466 // if new and old image are same size and no scaling transition is necessary,
467 // do a quick pause to prevent image flicker.
469 if ((hDiff == 0) && (wDiff == 0)){
471 if (Roo.isIE) timeout = 250;
475 this.prevLink.setStyle({ height: imgHeight + 'px' });
476 this.nextLink.setStyle({ height: imgHeight + 'px' });
477 this.imageDataContainer.setStyle({ width: widthNew + 'px'}); // the text area..
479 }).defer(timeout / 1000, this);
484 // Display image and begin preloading neighbors.
486 showImage: function(){
489 //this.loadingLink.hide();
491 this.lightboxImage.animate(
493 opacity : { to: 1.0 }
497 _this.updateDetails();
501 this.preloadNeighborImages();
506 // Display caption, image number, and bottom nav.
508 updateDetails: function() {
510 // if caption is not null
511 if (this.imageArray[this.activeImage].dom.title != ""){
512 this.caption.update(this.imageArray[this.activeImage].dom.title);
516 // if image is part of set display 'Image x of x'
517 if (this.imageArray.length > 1){
518 this.numberDisplay.update(
519 this.labelImage + ' ' + (this.activeImage + 1) + ' ' + this.labelOf + ' ' + this.imageArray.length)
520 this.numberDisplay.show();
523 this.imageDataContainer.animate(
525 //slide down ?: , from: 0.0, to: 1.0
526 opacity : { to: 1.0 }
530 // update overlay size and update nav
531 //var arrayPageSize = this.getPageSize();
532 //this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
541 // Display appropriate previous and next hover navigation.
543 updateNav: function() {
545 this.hoverNav.show();
547 // if not first image in set, display prev image button
548 if (this.activeImage > 0) this.prevLink.show();
550 // if not last image in set, display next image button
551 if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
553 this.enableKeyboardNav();
557 // enableKeyboardNav()
559 enableKeyboardNav: function() {
560 Roo.get(document.body).on('keydown', this.keyboardAction, this);
564 // disableKeyboardNav()
566 disableKeyboardNav: function() {
567 Roo.get(document.body).un('keydown', this.keyboardAction, this);
573 keyboardAction: function(event) {
574 var keycode = event.keyCode;
577 if (event.DOM_VK_ESCAPE) { // mozilla
578 escapeKey = event.DOM_VK_ESCAPE;
583 var key = String.fromCharCode(keycode).toLowerCase();
585 if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
587 } else if ((key == 'p') || (keycode == 37)){ // display previous image
588 if (this.activeImage != 0){
589 this.disableKeyboardNav();
590 this.changeImage(this.activeImage - 1);
592 } else if ((key == 'n') || (keycode == 39)){ // display next image
593 if (this.activeImage != (this.imageArray.length - 1)){
594 this.disableKeyboardNav();
595 this.changeImage(this.activeImage + 1);
601 // preloadNeighborImages()
602 // Preload previous and next images.
604 preloadNeighborImages: function(){
605 var preloadNextImage, preloadPrevImage;
606 if (this.imageArray.length > this.activeImage + 1){
607 preloadNextImage = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
608 preloadNextImage.on('load', function() { preloadNextImage.remove() });
609 preloadNextImage.dom.src = this.imageArray[this.activeImage + 1].dom.href;
611 if (this.activeImage > 0){
612 preloadPrevImage = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
613 preloadPrevImage.on('load', function() { preloadPrevImage.remove() });
614 preloadPrevImage.dom.src = this.imageArray[this.activeImage - 1].dom.href;
623 this.disableKeyboardNav();
624 //console.log('lightbox hide');
625 this.lightbox.hide();
627 Roo.get(document.body).unmask();
628 // show all the objects that cause problems..
629 //$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });