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,
58 * @cfg overlayOpacity {number} controls transparency of shadow overlay
62 * @cfg animate {boolean} toggles resizing animations
66 * @cfg resizeSpeed {number} controls the speed of the image
67 * resizing animations (1=slowest and 10=fastest)
71 * @cfg borderSize {number} if you adjust the padding in the CSS,
72 * you will need to update this variable
76 * @cfg labelImage {string} When grouping images this is used to write: Image # of #.
77 * Change it for non-english localization
81 * @cfg labelOf {string} When grouping images this is used to write: Image # of #.
89 * Array of images Roo.Elements (which should be images)
99 activeImage: undefined,
103 * Constructor runs on completion of the DOM loading. Calls updateImageList and then
104 * the function inserts html at the bottom of the page which is used to display the shadow
105 * overlay and the image container.
109 initialize: function() {
111 this.updateImageList();
112 this.initializeCSS();
113 // TBD this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
114 this.resizeSpeed = Math.min(this.resizeSpeed, 10);
115 this.resizeSpeed = Math.max(this.resizeSpeed, 1);
117 this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
118 this.overlayDuration = this.animate ? 0.2 : 0; // shadow fade in/out duration
120 // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
121 // If animations are turned off, it will be hidden as to prevent a flicker of a
122 // white 250 by 250 box.
123 var size = (this.animate ? 250 : 1) + 'px';
124 var dh = Roo.DomHelper;
125 this.el = Roo.DomHelper.append(document.body, {
127 '<div class="roo-lightbox-overlay"></div>' +
128 '<div class="roo-lightbox">' +
129 ' <div class="outer-image-container">' +
130 ' <div class="image-container">' +
131 ' <img class="lightbox-image">' +
132 ' <div style="" class="hover-nav">' +
133 ' <a href="#" class="prev-link"></a>' +
134 ' <a href="#" class="next-link"></a>' +
136 ' <div class="loading">' +
137 ' <a href="#" class="loading-link"> </a>' +
141 ' <div class="image-data-container">' +
142 ' <div class="image-data">' +
143 ' <div class="image-details">' +
144 ' <span class="caption"></span>' +
145 ' <span class="number-display"></span>' +
147 ' <div class="bottom-nav">' +
148 ' <div href="#" class="bottom-nav-close"></div>' +
159 var ids = 'roo-lightbox outer-image-container image-container ' +
160 'lightbox-image hover-nav prev-link next-link loading loading-link ' +
161 'image-data-container image-data image-details caption number-display ' +
162 'bottom-nav bottom-nav-close roo-lightbox-overlay';
164 Roo.each(ids.split(' '),
166 var vid = id.replace(/\-/g,'');
167 th[vid] = th.el.child('.'+id);
172 th[vid].setVisibilityMode(Roo.Element.DISPLAY);
174 this.lightbox = this.roolightbox;
176 this.overlay = this.roolightboxoverlay;
179 this.lightbox.hide();
180 this.lightbox.on('click', function(event) {
181 if (Roo.get(event.getTarget()).hasClass('roo-lightbox')) {
186 this.outerimagecontainer.setStyle({ width: size, height: size });
188 this.prevlink.on('click',
191 this.changeImage(this.activeImage - 1);
194 this.nextlink.on('click',
197 this.changeImage(this.activeImage + 1);
200 this.loadinglink.on('click',
206 this.bottomnavclose.on('click',
212 this.overlay.on('click',
220 initializeCSS: function() {
221 if (typeof(Roo.ux.Lightbox.css) != 'undefined') {
224 var rootURL = Roo.BLANK_IMAGE_URL.replace(/\/gray\/s\.gif$/, '');
226 Roo.ux.Lightbox.css = Roo.util.CSS.createStyleSheet( {
228 position: 'absolute',
231 'text-align': 'center',
234 '.roo-lightbox a img' : { border: 'none' },
235 '.roo-lightbox .outer-image-container' : {
236 position: 'relative',
237 'background-color': '#fff',
243 '.roo-lightbox image-container' :{ padding: '10px' },
245 '.roo-lightbox .loading' : {
251 'text-align':'center',
255 '.roo-lightbox .loading a' : {
256 background:'url('+ rootURL + '/ux/lightbox/loading.gif) 0 0 no-repeat',
262 '.roo-lightbox .bottom-nav-close' : {
263 background:'url('+ rootURL + '/ux/lightbox/close.gif) 0 0 no-repeat',
268 '.roo-lightbox .hover-nav' :{
276 '.roo-lightbox .image-container>.hover-nav' :{ left:'0' },
277 '.roo-lightbox .hover-nav a' :{ outline:'none'},
279 '.roo-lightbox .prev-link, .roo-lightbox .next-link' : {
282 'background-image':'url(data:image/gif;base64,AAAA)',
285 '.roo-lightbox .prev-link' : { left:'0','float':'left'},
286 '.roo-lightbox .next-link' : { right:'0','float':'right'},
287 '.roo-lightbox .prev-link:hover, .roo-lightbox .prev-link:visited:hover ' :{
288 background:'url('+ rootURL + '/ux/lightbox/prevlabel.gif) left 15% no-repeat'
290 '.roo-lightbox .next-link:hover, .roo-lightbox .next-link:visited:hover ' :{
291 background:'url('+ rootURL + '/ux/lightbox/nextlabel.gif) right 15% no-repeat'
294 '.roo-lightbox .image-data-container' : {
295 font: '10px Verdana, Helvetica, sans-serif',
296 'background-color': '#fff',
298 'line-height': '1.4em',
303 '.roo-lightbox .image-data' : { padding:'0 10px', color: '#666' },
304 '.roo-lightbox .image-data .image-details ' : { width: '70%', 'float': 'left', 'text-align': 'left'} ,
305 '.roo-lightbox .image-data .caption' : { 'font-weight': 'bold' },
306 '.roo-lightbox .image-data .number-display' : { 'display': 'block', clear: 'left', 'padding-bottom': '1.0em' } ,
307 '.roo-lightbox .image-data .bottom-nav-close' : { 'float': 'right', 'padding-bottom': '0.7em','outline': 'none'} ,
308 '.roo-lightbox-overlay' : {
309 'background-color': 'black',
312 position: 'absolute',
324 * Loops through anchor tags looking for 'lightbox' references and applies onclick
325 * events to appropriate links. You can rerun after dynamically adding images w/ajax.
328 updateImageList: function() {
329 this.updateImageList = Roo.emptyFn;
330 if (this.imageArray.length) {
333 Roo.each(Roo.DomQuery.select('a[rel^=lightbox]'), function(e) {
334 this.imageArray.push(Roo.get(e));
335 Roo.get(e).on('click', (function(event, tg, tga,tgb) {
340 }).createDelegate(this, [e], true));
347 * Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
349 start: function(imageLink) {
351 // hide all the objects that cause problems..
352 $$('select', 'object', 'embed').each(
354 node.style.visibility = 'hidden' }
357 // stretch overlay to fill page and fade in
358 //var arrayPageSize = this.getPageSize();
362 this.resizer = Roo.EventManager.onWindowResize(this.onResize, this, true);;
366 this.overlay.fadeIn({
367 endOpacity: this.overlayOpacity,
369 duration: this.overlayDuration
372 //this.imageArray = [];
376 imageLink = Roo.get(imageLink);
377 //console.log(imageLink.id);
378 Roo.each(this.imageArray, function (e, i) {
379 // console.log(e.id);
380 if (e.id == imageLink.id) {
386 this.imageArray.push(imageLink);
387 imageNum = this.imageArray.length-1;
391 // let's assume the constructor sorts out the list of images..
393 if ((imageLink.rel == 'lightbox')){
394 // if image is NOT part of a set, add single image to imageArray
395 this.imageArray.push([imageLink.href, imageLink.title]);
397 // if image is part of a set..
399 $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
400 collect(function(anchor){ return [anchor.href, anchor.title]; }).
403 while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
406 var s = Roo.get(document).getScroll();
407 // calculate top and left offset for the lightbox
410 //var lightboxTop = s.top + (Roo.lib.Dom.getViewHeight() / 10);
411 var lightboxTop = (Roo.lib.Dom.getViewHeight() / 10) + document.body.scrollTop;
412 var lightboxLeft = s.left;
413 this.lightbox.setStyle({
414 top: lightboxTop + 'px',
415 left: lightboxLeft + 'px' ,
418 //console.log("show lightbox");
419 this.lightbox.show();
422 this.changeImage(imageNum);
425 onResize : function()
427 this.overlay.setHeight(Roo.lib.Dom.getDocumentHeight()) ;
428 this.overlay.setWidth(Roo.lib.Dom.getDocumentWidth());
432 // Hide most elements and preload image in preparation for resizing image container.
434 changeImage: function(imageNum) {
436 this.activeImage = imageNum; // update global var
438 // hide elements during transition
440 this.loading.setStyle({
444 this.loadinglink.setX( (Roo.lib.Dom.getViewWidth() / 2) - 16);
445 //this.loadingLink.show();
446 // center the loading?
450 this.hovernav.hide();
451 this.prevlink.hide();
452 this.nextlink.hide();
453 // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
454 this.imagedatacontainer.setStyle({opacity: .0001});
455 this.numberdisplay.hide();
457 var imgPreloader = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
458 // once image is preloaded, resize image container
460 imgPreloader.on('load', function() {
462 this.lightboximage.dom.src = this.imageArray[this.activeImage].srcfull || this.imageArray[this.activeImage].href ||
463 this.imageArray[this.activeImage].dom.href || this.imageArray[this.activeImage].dom.src;
465 this.resizeImageContainer(this.imageArray[this.activeImage].dom.lwidth || imgPreloader.getWidth(),
466 this.imageArray[this.activeImage].dom.lheight || imgPreloader.getHeight());
467 imgPreloader.remove();
469 Roo.log(this.imageArray[this.activeImage]);
470 imgPreloader.dom.src = this.imageArray[this.activeImage].srcfull || this.imageArray[this.activeImage].href ||
471 this.imageArray[this.activeImage].dom.href || this.imageArray[this.activeImage].dom.src;
477 // resizeImageContainer()
479 resizeImageContainer: function(imgWidth, imgHeight) {
481 // make sure we have some sensible sizes..
482 imgWidth = Math.max(50, imgWidth);
483 imgHeight = Math.max(50, imgHeight);
485 // get current width and height
486 var widthCurrent = this.outerimagecontainer.getWidth();
487 var heightCurrent = this.outerimagecontainer.getHeight();
489 //fixme need better calcs.
491 var ww = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
492 var wh = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
497 // get new width and height
498 var bs = this.borderSize * 2;
500 var widthNew = imgWidth + bs;
501 var heightNew = imgHeight + bs;
503 if (widthNew > ww || heightNew > wh) {
504 // bigger than window.
505 // scale here... - bit nasty..
506 var rescale = 1.1 * Math.max( widthNew / ww , heightNew / wh);
507 //console.log(rescale);
508 imgWidth = Math.floor(imgWidth / rescale);
509 imgHeight = Math.floor(imgHeight / rescale);
510 widthNew = imgWidth + bs;
511 heightNew = imgHeight + bs;
516 this.lightboximage.set( { width : imgWidth, height : imgHeight });
519 // scalars based on change from old to new
520 var xScale = (widthNew / widthCurrent) * 100;
521 var yScale = (heightNew / heightCurrent) * 100;
523 // calculate size difference between new and old image, and resize if necessary
524 var wDiff = widthCurrent - widthNew;
525 var hDiff = heightCurrent - heightNew;
528 this.outerimagecontainer.animate(
529 { width: {to: widthNew}, height: {to: heightNew} },
538 // if new and old image are same size and no scaling transition is necessary,
539 // do a quick pause to prevent image flicker.
541 if ((hDiff == 0) && (wDiff == 0)){
549 this.prevlink.setStyle({ height: imgHeight + 'px' });
550 this.nextlink.setStyle({ height: imgHeight + 'px' });
551 this.imagedatacontainer.setStyle({ width: widthNew + 'px'}); // the text area..
553 }).defer(timeout / 1000, this);
558 // Display image and begin preloading neighbors.
560 showImage: function(){
563 //this.loadingLink.hide();
565 this.lightboximage.animate(
567 opacity : { to: 1.0 }
571 _this.updateDetails();
575 this.preloadNeighborImages();
580 // Display caption, image number, and bottom nav.
582 updateDetails: function() {
584 // if caption is not null
585 if (this.imageArray[this.activeImage].dom.title != ""){
586 this.caption.update(this.imageArray[this.activeImage].dom.title);
590 // if image is part of set display 'Image x of x'
591 if (this.imageArray.length > 1){
592 this.numberdisplay.update(
593 this.labelImage + ' ' + (this.activeImage + 1) + ' ' + this.labelOf + ' ' + this.imageArray.length);
594 this.numberdisplay.show();
597 this.imagedatacontainer.animate(
599 //slide down ?: , from: 0.0, to: 1.0
600 opacity : { to: 1.0 }
604 // update overlay size and update nav
605 //var arrayPageSize = this.getPageSize();
606 //this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
615 // Display appropriate previous and next hover navigation.
617 updateNav: function() {
619 this.hovernav.show();
621 // if not first image in set, display prev image button
622 if (this.activeImage > 0) {
623 this.prevlink.show();
626 // if not last image in set, display next image button
627 if (this.activeImage < (this.imageArray.length - 1)) {
628 this.nextlink.show();
631 this.enableKeyboardNav();
635 // enableKeyboardNav()
637 enableKeyboardNav: function() {
638 Roo.get(document.body).on('keydown', this.keyboardAction, this);
642 // disableKeyboardNav()
644 disableKeyboardNav: function() {
645 Roo.get(document.body).un('keydown', this.keyboardAction, this);
651 keyboardAction: function(event)
653 var keycode = event.keyCode;
656 if (event.DOM_VK_ESCAPE) { // mozilla
657 escapeKey = event.DOM_VK_ESCAPE;
662 var key = String.fromCharCode(keycode).toLowerCase();
664 if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
666 } else if ((key == 'p') || (keycode == 37)){ // display previous image
667 if (this.activeImage != 0){
668 this.disableKeyboardNav();
669 this.changeImage(this.activeImage - 1);
671 } else if ((key == 'n') || (keycode == 39)){ // display next image
672 if (this.activeImage != (this.imageArray.length - 1)){
673 this.disableKeyboardNav();
674 this.changeImage(this.activeImage + 1);
680 // preloadNeighborImages()
681 // Preload previous and next images.
683 preloadNeighborImages: function(){
684 var preloadNextImage, preloadPrevImage;
685 if (this.imageArray.length > this.activeImage + 1){
686 preloadNextImage = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
687 preloadNextImage.on('load', function() { preloadNextImage.remove() });
688 preloadNextImage.dom.src = this.imageArray[this.activeImage + 1].href ||
689 this.imageArray[this.activeImage + 1].dom.href || this.imageArray[this.activeImage + 1 ].dom.src;;
691 if (this.activeImage > 0){
692 preloadPrevImage = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
693 preloadPrevImage.on('load', function() { preloadPrevImage.remove() });
694 preloadPrevImage.dom.src = this.imageArray[this.activeImage - 1].href ||
695 this.imageArray[this.activeImage - 1].dom.href || this.imageArray[this.activeImage - 1].dom.src;
704 this.disableKeyboardNav();
705 //console.log('lightbox hide');
706 this.lightbox.hide();
709 Roo.get(document.body).unmask();
710 // show all the objects that cause problems..
711 //$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });