1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    8
    Vote Rating
    0
    tronlt is on a distinguished road

      0  

    Default Ext.ux.Lightbox?

    Ext.ux.Lightbox?


    Has anyone updated Ext.ux.Lightbox for Ext JS 4? Any help is appreciated.

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Location
    Knoxville, TN
    Posts
    133
    Vote Rating
    1
    Kcarpenter is on a distinguished road

      0  

    Default


    I've got one working that was modified from 3.0.
    Now, below is our version that had been pretty heavily modified to do a whole lot more than show a picture.
    I have taken out what I think was specific to us, but it should give you an idea of how to get started or this one may just work.
    that being said:
    Code:
    #include Disclaimer.h
    
    /*
    *The code below may not work, If it doesn't sorry. 
    *I do know that it works on our stuff fine. As you can see from the first line comment, I HATE THIS *FILE. HATE IT. Also, most of this code isn't written directly by me and is horribly formatted - I just *hacked the crap out of it to work with EXTJS4
    *  1-Post questions I will try to help.
    *  2-The code below also probably has some brackets in the wrong spots or missing from where I  *removed my code. Your a programmer and probably smart enough to figure out where they go :D 
    */
    Code:
    //Everytime you open this file a baby kitten is curb stomped. Please leave now.
    Ext.ux.Lightbox = (function () {
        var els = {},
            images = [],
            activeImage, 
            initialized = false,
            selectors = [];
            var myWidth;
            var myHeight;
            var leftPadding;
        return {
            overlayOpacity: 0.85,
            animate: true,
            resizeSpeed: 8,
            borderSize: 10,
            labelImage: "Image",
            labelOf: "of",
    
            init: function () {
                this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
                this.overlayDuration = this.animate ? 0.2 : 0;
    
                if (!initialized) {
                    Ext.apply(this, Ext.util.Observable.prototype);
                    Ext.util.Observable.constructor.call(this);
                    this.addEvents('open', 'close');
                    this.initMarkup();
                    this.initEvents();
                    initialized = true;
                }
            },
    
            
            initMarkup: function () {
                els.shim = Ext.core.DomHelper.append(document.body, {
                    tag: 'iframe',
                    id: 'ux-lightbox-shim'
                }, true);
                els.overlay = Ext.core.DomHelper.append(document.body, {
                    id: 'ux-lightbox-overlay',
                    style: 'z-index:1;opacity:0.85;filter:alpha(opacity=85)'
                }, true);
               
                var lightboxTpl = new Ext.Template(this.getTemplate());
                els.lightbox = lightboxTpl.append(document.body, {}, true);
                var ids = ['outerImageContainer', 'fotometaform', 'imageContainer', 'image', 'hoverNav', 'loading', 'loadingLink', 
                           'sliderdiv', 'overlay', 'dataform', 'dataform2', 'navpane', 'outerDataContainer', 'navClose', 'navDataview'];
    
                Ext.each(ids, function (id) {
                    els[id] = Ext.get('ux-lightbox-' + id);
                });
                Ext.each([els.overlay, els.lightbox, els.shim], function (el) {
                    el.setVisibilityMode(Ext.core.Element.DISPLAY);
                    el.hide();
                });
    
                var size = (this.animate ? 250 : 1) + 'px';
                els.outerImageContainer.setStyle({
                    width: size,
                    height: size
                });
            },
    
            getTemplate: function () {
                return [
                '<div id="ux-lightbox" >', 
                    '<div id="ux-lightbox-outerImageContainer" style="width:'+(Ext.getBody().getViewSize().width * .5)+'">', 
                        '<div id="ux-lightbox-imageContainer">', 
                            '<div id="CenterImage">',
                                '<img class="bigDrop" id="ux-lightbox-image" />',
                            '</div>',//closes center image
                            '<div id="ux-lightbox-hoverNav" style="height: 400px; : z-index-1;">','</div>', 
                            '<div id="ux-lightbox-loading">', 
                                    '<a id="ux-lightbox-loadingLink"></a>', 
                            '</div>', //closes lightbox loading
                        '</div>', //closes image container
                    '<div id="ux-lightbox-navpane>">',
                        '<div id="ux-lightbox-navClose" style="float: right"><a href="#" id="ux-lightbox-navClose"></a></div>',
                           '<div id="ux-lightbox-navDataview"></div>', 
                       '</div>',//closes navepane
                   '</div>', //closes outer image container
             '</div>']; //closes lightbox
            },
    
            initEvents: function () {
                var close = function (ev) {
                    hideStuff(leftPadding);
                    ev.preventDefault();
                    this.close();
                };
         
                els.overlay.on('click', close, this);
                els.loadingLink.on('click', close, this);
                els.navClose.on('click', close, this);
                els.lightbox.on('click', function (ev) {
                    if (ev.getTarget().id === 'ux-lightbox') {
                        this.close(); //I think this is if you click on the black it closes
                    }
                }, this);
            },
            //hits this before completely rendering index page
            register: function(sel, group){
                //if(selectors.indexOf(sel) === -1){
                    selectors.push(sel);
    
                    Ext.fly(document).on('click', function(ev){
                        var target = ev.getTarget(sel);
    
                        if (target) {
                            ev.preventDefault();
                            this.open(target, sel, group);
                        }
                    }, this);
                //}
            },
    
            open: function(image, sel, group){
                group = group || false;
                this.setViewSize();
                els.overlay.show();
               
                images = [];
    
                var index = 0;
                if (!group) { //we're using group so go to else
                    images.push([image.href, image.title, image.alt]);
                }else{
                    var setItems = Ext.query(sel);
                     Ext.each(setItems, function(item){
                         if (item.href){
                              images.push([item.href, item.title, item.alt]);
                         }
                     });
                     while (images[index][0] !== image.href) {
                         index++;
                     }
                 }
                // calculate top and left offset for the lightbox
                var pageScroll = Ext.fly(document).getScroll();
                var lightboxTop = pageScroll.top + (Ext.getBody().getViewSize().height / 100);
                var lightboxLeft = pageScroll.left;
                els.lightbox.setStyle({
                    //placement of image white box
                    top: lightboxTop + 'px',
                    left: lightboxLeft + 'px'
                }).show();
                this.setImage(index);
                this.fireEvent('open', images[index]);
    
                   
            },
    
            setViewSize: function(){
                var viewSize = this.getViewSize();
                els.overlay.setStyle({ //this is the black shroud
                    width: viewSize[0] + 'px',
                    height: viewSize[1] + 'px'
                });
                els.shim.setStyle({
                    width: viewSize[0] + 'px',
                    height: viewSize[1] + 'px'
                }).show();
            },
    
            setImage: function (index) {
                activeImage = index;
    
                if (this.animate) {
                    els.loading.show();
                }
    
                els.image.hide();
                els.hoverNav.hide();
                //els.dataContainer.setOpacity(0.0001);
    
                var preload = new Image();
                preload.onload = Ext.bind(function(){
                    els.image.dom.src = images[activeImage][0].substring(0, images[activeImage][0].length - 3) + 'JPG';
                    if(preload.width >= preload.height){
                        myHeight = (Ext.getBody().getViewSize().height * .7376);
                        myWidth = (Ext.getBody().getViewSize().width * .734375);//Odd number because I am odd. And it keeps a contrast ratio on all screen sizes
                        leftPadding = 53;
                    }else{
                        myHeight = (Ext.getBody().getViewSize().height * .7376);
                        myWidth = (Ext.getBody().getViewSize().width * .35625);
                        leftPadding = 253;
                    }
                    document.getElementById('CenterImage').style.paddingLeft = leftPadding + 'px';
                    
    })
    
    
                 els.myContent = Ext.core.DomHelper.append(document.getElementById('ux-lightbox-sliderdiv'), {
                    id: 'ux-lightbox-myContent'
                 }, true);
                 var slideshow;
    
                        var mybody = document.getElementById('myBody');
                        
                        var myDiv = document.getElementById('ux-lightbox-myContent');
                        
                        var wrapper = document.createElement('div');
                        myDiv.appendChild(wrapper);
                        wrapper.setAttribute('id', 'ux-lightbox-wrapper');
                        
                        var thumbnails = document.createElement('div');
                        wrapper.appendChild(thumbnails);
                        thumbnails.setAttribute('id', 'ux-lightbox-thumbnails');
                    
                    this.resizeImage(preload.width, preload.height);
    
                }, this);
    
                preload.src = images[activeImage][0].substring(0, images[activeImage][0].length - 3) + 'JPG';
            },
    
            resizeImage: function (w, h) {
                var wCur = els.outerImageContainer.getWidth();
                var hCur = els.outerImageContainer.getHeight();
    
                var wNew = (w + this.borderSize * 2);
                var hNew = (h + this.borderSize * 2);
    
                var wDiff = wCur - wNew;
                var hDiff = hCur - hNew;
    
                var queueLength = 0;
    
                if (hDiff !== 0 || wDiff !== 0) {
                    els.outerImageContainer.shift({
                        height: (Ext.getBody().getViewSize().height * .8783),
                        duration: this.resizeDuration
                    }).shift({
                        width: (Ext.getBody().getViewSize().width * .8203),
                        duration: this.resizeDuration
                    });
                    queueLength++;
                }
    
                var timeout = 0;
                if ((hDiff === 0) && (wDiff === 0)) {
                    timeout = (Ext.isIE) ? 250 : 100;
                }
    
                Ext.defer(Ext.bind(function () {
                    this.showImage();
                }, this), (this.resizeDuration * 1000) + timeout);
            },
    
            showImage: function () {
                els.image.setWidth(myWidth);
                els.image.setHeight(myHeight);
    
                els.loading.hide();
                els.image.fadeIn({
                    duration: this.resizeDuration,
                    scope: this,
                    callback: function () {
                        this.updateDetails();
                    }
                });
                this.preloadImages();
            },
    
            updateDetails: function () {
    
            },
    
            preloadImages: function () {
                var next, prev;
                if (images.length > activeImage + 1) {
                    next = new Image();
                    next.src = images[activeImage + 1][0];
                }
                if (activeImage > 0) {
                    prev = new Image();
                    prev.src = images[activeImage - 1][0];
                }
            },
            close: function () {
                els.lightbox.hide();
                els.overlay.hide();
                els.shim.hide();
                this.fireEvent('close', activeImage);
            },
    
            getViewSize: function () {
                //this is the black shaded area
                return [Ext.getBody().getViewSize().width, Ext.getBody().getViewSize().height];
            } 
              
        };
    })();
    Ext.Loader.onReady(Ext.ux.Lightbox.init, Ext.ux.Lightbox);

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2008
    Posts
    61
    Vote Rating
    0
    jeroenooms is on a distinguished road

      0  

    Default


    I need the same thing. Please report your experiences, ts.

  4. #4
    Sencha User
    Join Date
    Dec 2008
    Location
    France
    Posts
    13
    Vote Rating
    0
    Shn is on a distinguished road

      0  

    Lightbulb


    Hi,

    I couldn't get Kcarpenter's version to work (there are indeed a couple brackets to delete) as it seems to be very different from the version originally available there : "http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/"
    I took the original version, which worked with extjs 3 and tuned it a little to work with extjs 4. I couldn't get all the animations (fadeIn and fadeOut) to work, so if anyone wants to help out and make it better, they'd be welcome.
    I also had to modified the css to make it look exactly the same as before (only a couple places, just do a diff with the previous version to check what's new).
    I've only tested it with one image, so I can't guarantee it'll work with multiple images !

    Please check the licensing from the original version, which I didn't include in my code below.

    Here's the css code :
    Code:
    #ux-lightbox {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 15000;
        text-align: center;
        line-height: 0;
    }
    
    #ux-lightbox img {
        width: auto;
        height: auto;
    }
    
    #ux-lightbox a img {
        border: none;
    }
    
    #ux-lightbox-outerImageContainer {
        position: relative;
        background-color: #f3efec;
        width: 250px;
        height: 250px;
        margin: 0 auto;
    }
    
    #ux-lightbox-imageContainer {
        padding: 10px;
    }
    
    #ux-lightbox-loading{
        position: absolute;
        top: 40%;
        left: 0%;
        height: 25%;
        width: 100%;
        text-align: center;
        line-height: 0;
        background: url(images/lb-load.gif) no-repeat center 15%;
    }
    
    #ux-lightbox-hoverNav {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
    }
    
    #ux-lightbox-imageContainer > #ux-lightbox-hoverNav {
        left: 0;
    }
    
    #ux-lightbox-hoverNav a{
        outline: none;
    }
    
    #ux-lightbox-navPrev,
    #ux-lightbox-navNext {
        width: 49%;
        height: 100%;
        *background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover *//* the * is there to avoid errors in other browsers*/
        display: block;
    }
    
    #ux-lightbox-navPrev { left: 0; float: left;}
    #ux-lightbox-navNext { right: 0; float: right;}
    #ux-lightbox-navPrev:hover, #ux-lightbox-navPrev:visited:hover { background: url(images/lb-prev.png) left 33% no-repeat; }
    #ux-lightbox-navNext:hover, #ux-lightbox-navNext:visited:hover { background: url(images/lb-next.png) right 33% no-repeat; }
    
    #ux-lightbox-outerDataContainer {
        margin: 0 auto;
        width: 100%;
    }
    
    #ux-lightbox-dataContainer{
        font: 10px Verdana, Helvetica, sans-serif;
        background-color: #f3efec;
        overflow: auto;
        line-height: 1.4em;
    }
    
    #ux-lightbox-data{    padding:0 10px; color: #666; }
    #ux-lightbox-data #ux-lightbox-details{ width: 80%; float: left; text-align: left; }
    #ux-lightbox-data #ux-lightbox-caption{ font-weight: bold;    }
    #ux-lightbox-data #ux-lightbox-imageNumber{ display: block; clear: left; padding-bottom: 1.0em;    }
    #ux-lightbox-data #ux-lightbox-navClose{ background: url(images/lb-close.gif) no-repeat; width: 66px; height: 22px; float: right;  padding-bottom: 0.7em; outline: none;}
    #ux-lightbox-data #ux-lightbox-navClose:hover{ background-image: url(images/lb-close-over.gif);}
    
    #ux-lightbox-overlay,
    #ux-lightbox-shim{
        border: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 14999;
        width: 100%;
        height: 500px;
        background-color: #000;
        padding: 0;
        margin: 0;
    }
    
    #ux-lightbox-shim {
        z-index: 89;
        background-color: transparent;
        filter: alpha(opacity=0);
    }
    
    /* the box-sizing stuff is there to overload the .x-border-box modified by extjs' theme */
    #ux-lightbox-bottomNav, #ux-lightbox-bottomNav *{    box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-webkit-box-sizing:content-box }
    ... and the javascript code :
    Code:
    Ext.ns('Ext.ux');
    
    Ext.ux.Lightbox = (function(){
        var els = {},
            images = [],
            activeImage,
            initialized = false,
            selectors = [];
    
        return {
            overlayOpacity: 0.85,
            animate: true,
            resizeSpeed: 8,
            borderSize: 10,
            labelImage: "Image",
            labelOf: "of",
    
            init: function() {
                this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
                this.overlayDuration = this.animate ? 0.2 : 0;
    
                if(!initialized) {
                    Ext.apply(this, Ext.util.Observable.prototype);
                    Ext.util.Observable.constructor.call(this);
                    this.addEvents('open', 'close');
                    this.initMarkup();
                    this.initEvents();
                    initialized = true;
                }
            },
    
            initMarkup: function() {
                els.shim = Ext.core.DomHelper.append(document.body, {
                    tag: 'iframe',
                    id: 'ux-lightbox-shim'
                }, true);
                els.overlay = Ext.core.DomHelper.append(document.body, {
                    id: 'ux-lightbox-overlay',
                    style: 'opacity:'+this.overlayOpacity+';filter:alpha(opacity='+(this.overlayOpacity*100)+')'
                }, true);
                
                var lightboxTpl = new Ext.Template(this.getTemplate());
                els.lightbox = lightboxTpl.append(document.body, {}, true);
    
                var ids =
                    ['outerImageContainer', 'imageContainer', 'image', 'hoverNav', 'navPrev', 'navNext', 'loading', 'loadingLink',
                    'outerDataContainer', 'dataContainer', 'data', 'details', 'caption', 'imageNumber', 'bottomNav', 'navClose'];
    
                Ext.each(ids, function(id){
                    els[id] = Ext.get('ux-lightbox-' + id);
                });
    
                Ext.each([els.overlay, els.lightbox, els.shim], function(el){
                    el.setVisibilityMode(Ext.Element.DISPLAY)
                    el.hide();
                });
    
                var size = (this.animate ? 250 : 1) + 'px';
                els.outerImageContainer.setStyle({
                    width: size,
                    height: size
                });
            },
    
            getTemplate : function() {
                return [
                    '<div id="ux-lightbox">',
                        '<div id="ux-lightbox-outerImageContainer">',
                            '<div id="ux-lightbox-imageContainer">',
                                '<img id="ux-lightbox-image">',
                                '<div id="ux-lightbox-hoverNav">',
                                    '<a href="#" id="ux-lightbox-navPrev"></a>',
                                    '<a href="#" id="ux-lightbox-navNext"></a>',
                                '</div>',
                                '<div id="ux-lightbox-loading">',
                                    '<a id="ux-lightbox-loadingLink"></a>',
                                '</div>',
                            '</div>',
                        '</div>',
                        '<div id="ux-lightbox-outerDataContainer">',
                            '<div id="ux-lightbox-dataContainer">',
                                '<div id="ux-lightbox-data">',
                                    '<div id="ux-lightbox-details">',
                                        '<span id="ux-lightbox-caption"></span>',
                                        '<span id="ux-lightbox-imageNumber"></span>',
                                    '</div>',
                                    '<div id="ux-lightbox-bottomNav">',
                                        '<a href="#" id="ux-lightbox-navClose"></a>',
                                    '</div>',
                                '</div>',
                            '</div>',
                        '</div>',
                    '</div>'
                ];
            },
    
            initEvents: function() {
                var close = function(ev) {
                    ev.preventDefault();
                    this.close();
                };
    
                els.overlay.on('click', close, this);
                els.loadingLink.on('click', close, this);
                els.navClose.on('click', close, this);
    
                els.lightbox.on('click', function(ev) {
                    if(ev.getTarget().id == 'ux-lightbox') {
                        this.close();
                    }
                }, this);
    
                els.navPrev.on('click', function(ev) {
                    ev.preventDefault();
                    this.setImage(activeImage - 1);
                }, this);
    
                els.navNext.on('click', function(ev) {
                    ev.preventDefault();
                    this.setImage(activeImage + 1);
                }, this);
            },
    
            register: function(sel, group) {
                if(selectors.indexOf(sel) === -1) {
                    selectors.push(sel);
    
                    Ext.fly(document).on('click', function(ev){
                        var target = ev.getTarget(sel);
    
                        if (target) {
                            ev.preventDefault();
                            this.open(target, sel, group);
                        }
                    }, this);
                }
            },
    
            open: function(image, sel, group) {
                group = group || false;
                this.setViewSize();
                els.overlay.show();
                
                images = [];
    
                var index = 0;
                if(!group) {
                    images.push([image.href, image.title]);
                }
                else {
                    var setItems = Ext.query(sel);
                    Ext.each(setItems, function(item) {
                        if(item.href) {
                            images.push([item.href, item.title]);
                        }
                    });
    
                    while (images[index][0] != image.href) {
                        index++;
                    }
                }
    
                // calculate top and left offset for the lightbox
                var pageScroll = Ext.fly(document).getScroll();
    
                var lightboxTop = pageScroll.top + (Ext.Element.getViewportHeight() / 10);
                var lightboxLeft = pageScroll.left;
                els.lightbox.setStyle({
                    top: lightboxTop + 'px',
                    left: lightboxLeft + 'px'
                }).show();
    
                this.setImage(index);
                
                this.fireEvent('open', images[index]);
            },
            
            setViewSize: function(){
                var viewSize = this.getViewSize();
                els.overlay.setStyle({
                    width: viewSize[0] + 'px',
                    height: viewSize[1] + 'px'
                });
                els.shim.setStyle({
                    width: viewSize[0] + 'px',
                    height: viewSize[1] + 'px'
                }).show();
            },
    
            setImage: function(index){
                activeImage = index;
                          
                this.disableKeyNav();            
                if (this.animate) {
                    els.loading.show();
                }
    
                els.image.hide();
                els.hoverNav.hide();
                els.navPrev.hide();
                els.navNext.hide();
                els.dataContainer.setOpacity(0.0001);
                els.imageNumber.hide();
    
                var preload = new Image();
                preload.onload = Ext.bind(function(){
                    els.image.dom.src = images[activeImage][0];
                    this.resizeImage(preload.width, preload.height);
                }, this);
                preload.src = images[activeImage][0];
            },
    
            resizeImage: function(w, h){
                var wCur = els.outerImageContainer.getWidth();
                var hCur = els.outerImageContainer.getHeight();
    
                var wNew = (w + this.borderSize * 2);
                var hNew = (h + this.borderSize * 2);
    
                var wDiff = wCur - wNew;
                var hDiff = hCur - hNew;
    
                var afterResize = function(){
                    els.hoverNav.setWidth(els.imageContainer.getWidth() + 'px');
    
                    els.navPrev.setHeight(h + 'px');
                    els.navNext.setHeight(h + 'px');
    
                    els.outerDataContainer.setWidth(wNew + 'px');
    
                    this.showImage();
                };
                
                if (hDiff != 0 || wDiff != 0) {
                    els.outerImageContainer.shift({
                        height: hNew,
                        width: wNew,
                        duration: this.resizeDuration,
                        scope: this,
                        callback: afterResize,
                        delay: 50
                    });
                }
                else {
                    afterResize.call(this);
                }
            },
    
            showImage: function(){
                els.loading.hide();
                els.image.show({
                    duration: this.resizeDuration,
                    easing: 'easeIn'
                });
                this.updateDetails();
                this.preloadImages();
            },
    
            updateDetails: function(){
                var detailsWidth = els.data.getWidth(true) - els.navClose.getWidth() - 10;
                els.details.setWidth((detailsWidth > 0 ? detailsWidth : 0) + 'px');
                
                els.caption.update(images[activeImage][1]);
    
                els.caption.show();
                if (images.length > 1) {
                    els.imageNumber.update(this.labelImage + ' ' + (activeImage + 1) + ' ' + this.labelOf + '  ' + images.length);
                    els.imageNumber.show();
                }
    
                els.dataContainer.fadeIn({
                    duration: this.resizeDuration/2,
                    scope: this,
                    callback: function() {
                        var viewSize = this.getViewSize();
                        els.overlay.setHeight(viewSize[1] + 'px');
                        this.updateNav();
                    }
                });
            },
    
            updateNav: function(){
                this.enableKeyNav();
    
                els.hoverNav.show();
    
                // if not first image in set, display prev image button
                if (activeImage > 0)
                    els.navPrev.show();
    
                // if not last image in set, display next image button
                if (activeImage < (images.length - 1))
                    els.navNext.show();
            },
    
            enableKeyNav: function() {
                Ext.fly(document).on('keydown', this.keyNavAction, this);
            },
    
            disableKeyNav: function() {
                Ext.fly(document).un('keydown', this.keyNavAction, this);
            },
    
            keyNavAction: function(ev) {
                var keyCode = ev.getKey();
    
                if (
                    keyCode == 88 || // x
                    keyCode == 67 || // c
                    keyCode == 27
                ) {
                    this.close();
                }
                else if (keyCode == 80 || keyCode == 37){ // display previous image
                    if (activeImage != 0){
                        this.setImage(activeImage - 1);
                    }
                }
                else if (keyCode == 78 || keyCode == 39){ // display next image
                    if (activeImage != (images.length - 1)){
                        this.setImage(activeImage + 1);
                    }
                }
            },
    
            preloadImages: function(){
                var next, prev;
                if (images.length > activeImage + 1) {
                    next = new Image();
                    next.src = images[activeImage + 1][0];
                }
                if (activeImage > 0) {
                    prev = new Image();
                    prev.src = images[activeImage - 1][0];
                }
            },
    
            close: function(){
                this.disableKeyNav();
                els.lightbox.hide();
                els.overlay.hide();
                els.shim.hide();
                this.fireEvent('close', activeImage);
            },
    
            getViewSize: function() {
                return [Ext.Element.getViewWidth(), Ext.Element.getViewHeight()];
            }
        }
    })();
    
    Ext.onReady(Ext.ux.Lightbox.init, Ext.ux.Lightbox);
    I'm aware of the imperfection of my workarounds so please let me know if it doesn't work or if things could be done differently.

    Edit: There are problems with the z-index's not being correctly set (it's in the css and should be dynamic). I'll either work on that and use ExtJS' z-index manager or do a new plugin from scratch
    Last edited by Shn; 3 Nov 2011 at 4:04 AM. Reason: added info about zindex

  5. #5
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    260
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default Lightbox for ExtJS 4

    Lightbox for ExtJS 4


    This implementation is created on the bones of the lightbox in ExtJS 3.1.0 core. It's implemented as a component (extends Ext.component) so it can be used this way.

    Changes

    The implementation is a little different in order to:

    allow the render target to be set programmatically;
    for the render target to be changed;
    for the click handlers to be removed from all images; and
    to make it possible to close a show programmatically.

    Demo

    A demo is available here. This is also the source of the code. The html file includes the code and css in-line. The version of ExtJS used is 4.0.7 (by referencing the Sencha CDN).

    Using

    The steps to use the lightbox are similar to the steps when using the 3.1 example. The main difference is that unlike the 3.1 example the lightbox is not created at page load time. Instead the component is instantiated when needed and removed when not needed.

    // Tear down an existing lightbox if one exists
    if (Ext.Lightbox) Ext.Lightbox.remove();

    // The component will use the default render target (body) if one is not provided
    Ext.Lightbox = Ext.create('Ext.ux.Lightbox', Ext.get('lightboxdisplay'));


    // Finally add all the images. Each one will become clickable. 'content' is the id of a tag in which to look for the images. This is optional as will default to the whole DOM.
    Ext.Lightbox.register('a[rel^=lightbox]', false, content);

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    SCHERPOntwikkeling is on a distinguished road

      0  

    Default This is a working version

    This is a working version


    We hacked the v3 version to work with v4.

    Code:
    /*!
     * Original lightbox script was made for ext3 SCHERP Ontwikkeling (scherpontwikkeling.nl) changed it to work on ext4
     */
    Ext.ns('Ext.ux');
    
    Ext.ux.Lightbox = (function(){
        var els = {},
            images = [],
            activeImage,
            initialized = false,
            selectors = [];
    
        return {
            overlayOpacity: 0.85,
            animate: true,
            resizeSpeed: 8,
            borderSize: 10,
            labelImage: "Image",
            labelOf: "of",
    
            init: function() {
                this.resizeDuration = this.animate ? 500 : 0;
                this.overlayDuration = this.animate ? 500 : 0;
    
                if(!initialized) {
                    Ext.apply(this, Ext.util.Observable.prototype);
                    Ext.util.Observable.constructor.call(this);
                    this.addEvents('open', 'close');
                    this.initMarkup();
                    this.initEvents();
                    initialized = true;
                }
            },
    
            initMarkup: function() {
                els.shim = Ext.getBody().createChild({
                    tag: 'iframe',
                    id: 'ux-lightbox-shim'
                }, null, true);
                els.overlay = Ext.getBody().createChild({
                    id: 'ux-lightbox-overlay'
                }, null, true);
                
                els.shim = Ext.get(els.shim);
                els.overlay = Ext.get(els.overlay);
                
                var lightboxTpl = new Ext.Template(this.getTemplate());
                els.lightbox = lightboxTpl.append(document.body, {}, true);
    
                var ids =
                    ['outerImageContainer', 'imageContainer', 'image', 'hoverNav', 'navPrev', 'navNext', 'loading', 'loadingLink',
                    'outerDataContainer', 'dataContainer', 'data', 'details', 'caption', 'imageNumber', 'bottomNav', 'navClose'];
    
                Ext.each(ids, function(id){
                    els[id] = Ext.get('ux-lightbox-' + id);
                });
    
                Ext.each([els.overlay, els.lightbox, els.shim], function(el){
                    Ext.get(el).setStyle('display', 'block');
                    //el.setVisibilityMode(Ext.Element.DISPLAY)
                    Ext.get(el).hide();
                });
    
                var size = (this.animate ? 250 : 1) + 'px';
                els.outerImageContainer.setStyle({
                    width: size,
                    height: size
                });
            },
    
            getTemplate : function() {
                return [
                    '<div id="ux-lightbox">',
                        '<div id="ux-lightbox-outerImageContainer">',
                            '<div id="ux-lightbox-imageContainer">',
                                '<img id="ux-lightbox-image">',
                                '<div id="ux-lightbox-hoverNav">',
                                    '<a href="#" id="ux-lightbox-navPrev"></a>',
                                    '<a href="#" id="ux-lightbox-navNext"></a>',
                                '</div>',
                                '<div id="ux-lightbox-loading">',
                                    '<a id="ux-lightbox-loadingLink"></a>',
                                '</div>',
                            '</div>',
                        '</div>',
                        '<div id="ux-lightbox-outerDataContainer">',
                            '<div id="ux-lightbox-dataContainer">',
                                '<div id="ux-lightbox-data">',
                                    '<div id="ux-lightbox-details">',
                                        '<span id="ux-lightbox-caption"></span>',
                                        '<span id="ux-lightbox-imageNumber"></span>',
                                    '</div>',
                                    '<div id="ux-lightbox-bottomNav">',
                                        '<a href="#" id="ux-lightbox-navClose"></a>',
                                    '</div>',
                                '</div>',
                            '</div>',
                        '</div>',
                    '</div>'
                ];
            },
    
            initEvents: function() {
                var close = function(ev) {
                    ev.preventDefault();
                    this.close();
                };
    
                els.overlay.on('click', close, this);
                els.loadingLink.on('click', close, this);
                els.navClose.on('click', close, this);
    
                els.lightbox.on('click', function(ev) {
                    if(ev.getTarget().id == 'ux-lightbox') {
                        this.close();
                    }
                }, this);
    
                els.navPrev.on('click', function(ev) {
                    ev.preventDefault();
                    this.setImage(activeImage - 1);
                }, this);
    
                els.navNext.on('click', function(ev) {
                    ev.preventDefault();
                    this.setImage(activeImage + 1);
                }, this);
            },
    
            register: function(sel, group) {
                if(selectors.indexOf(sel) === -1) {
                    selectors.push(sel);
    
                    Ext.fly(document).on('click', function(ev){
                        var target = ev.getTarget(sel);
    
                        if (target) {
                            ev.preventDefault();
                            this.open(target, sel, group);
                        }
                    }, this);
                }
            },
    
            open: function(image, sel, group) {
                group = group || false;
                this.setViewSize();
                els.overlay.fadeIn({
                    duration: this.overlayDuration,
                    endOpacity: this.overlayOpacity,
                    callback: function() {
                        images = [];
    
                        var index = 0;
                        if(!group) {
                            images.push([image.href, image.title]);
                        }
                        else {
                            var setItems = Ext.query(sel);
                            Ext.each(setItems, function(item) {
                                if(item.href) {
                                    images.push([item.href, item.title]);
                                }
                            });
    
                            while (images[index][0] != image.href) {
                                index++;
                            }
                        }
    
                        // calculate top and left offset for the lightbox
                        var pageScroll = Ext.fly(document).getScroll();
    
                        var lightboxTop = pageScroll.top + (Ext.Element.getViewportHeight() / 10);
                        var lightboxLeft = pageScroll.left;
                        els.lightbox.setStyle({
                            top: lightboxTop + 'px',
                            left: lightboxLeft + 'px'
                        }).show();
    
                        this.setImage(index);
                        
                        this.fireEvent('open', images[index]);           
    
                    },
                    scope: this
                });
            },
            
            setViewSize: function(){
                var viewSize = this.getViewSize();
                Ext.get(els.overlay).setStyle({
                    width: viewSize[0] + 'px',
                    height: viewSize[1] + 'px'
                });
                Ext.get(els.shim).setStyle({
                    width: viewSize[0] + 'px',
                    height: viewSize[1] + 'px'
                }).show();
            },
    
            setImage: function(index){
                activeImage = index;
                          
                this.disableKeyNav();            
                if (this.animate) {
                    els.loading.show();
                }
    
                els.image.hide();
                els.hoverNav.hide();
                els.navPrev.hide();
                els.navNext.hide();
                els.dataContainer.setOpacity(0.0001);
                els.imageNumber.hide();
    
                var preload = new Image();
                preload.onload = Ext.bind(function(){
                    els.image.dom.src = images[activeImage][0];
                    this.resizeImage(preload.width, preload.height);
                },this);
                preload.src = images[activeImage][0];
            },
    
            resizeImage: function(w, h){
                var wCur = els.outerImageContainer.getWidth();
                var hCur = els.outerImageContainer.getHeight();
    
                var wNew = (w + this.borderSize * 2);
                var hNew = (h + this.borderSize * 2);
    
                var wDiff = wCur - wNew;
                var hDiff = hCur - hNew;
    
                var afterResize = function(){
                    els.hoverNav.setWidth(els.imageContainer.getWidth() + 'px');
    
                    els.navPrev.setHeight(h + 'px');
                    els.navNext.setHeight(h + 'px');
    
                    els.outerDataContainer.setWidth(wNew + 'px');
    
                    this.showImage();
                };
                
                if (hDiff != 0 || wDiff != 0) {
                    els.outerImageContainer.shift({
                        height: hNew,
                        width: wNew,
                        duration: this.resizeDuration,
                        scope: this,
                        callback: afterResize,
                        delay: 50
                    });
                }
                else {
                    afterResize.call(this);
                }
            },
    
            showImage: function(){
                els.loading.hide();
                
                Ext.get(els.image).setStyle('visibility', 'visible');
                Ext.get(els.image).setStyle('opacity', 0);
                els.image.fadeIn({
                    opacity: 1,
                    duration: this.resizeDuration,
                    scope: this,
                    callback: function(){
                        this.updateDetails();
                    }
                });
                this.preloadImages();
            },
    
            updateDetails: function(){
                var detailsWidth = els.data.getWidth(true) - els.navClose.getWidth() - 10;
                els.details.setWidth((detailsWidth > 0 ? detailsWidth : 0) + 'px');
                
                els.caption.update(images[activeImage][1]);
    
                els.caption.show();
                if (images.length > 1) {
                    els.imageNumber.update(this.labelImage + ' ' + (activeImage + 1) + ' ' + this.labelOf + '  ' + images.length);
                    els.imageNumber.show();
                }
    
                els.dataContainer.fadeIn({
                    duration: this.resizeDuration/2,
                    scope: this,
                    callback: function() {
                        var viewSize = this.getViewSize();
                        els.overlay.setHeight(viewSize[1] + 'px');
                        this.updateNav();
                    }
                });
            },
    
            updateNav: function(){
                this.enableKeyNav();
    
                els.hoverNav.show();
    
                // if not first image in set, display prev image button
                if (activeImage > 0)
                    els.navPrev.show();
    
                // if not last image in set, display next image button
                if (activeImage < (images.length - 1))
                    els.navNext.show();
            },
    
            enableKeyNav: function() {
                Ext.fly(document).on('keydown', this.keyNavAction, this);
            },
    
            disableKeyNav: function() {
                Ext.fly(document).un('keydown', this.keyNavAction, this);
            },
    
            keyNavAction: function(ev) {
                var keyCode = ev.getKey();
    
                if (
                    keyCode == 88 || // x
                    keyCode == 67 || // c
                    keyCode == 27
                ) {
                    this.close();
                }
                else if (keyCode == 80 || keyCode == 37){ // display previous image
                    if (activeImage != 0){
                        this.setImage(activeImage - 1);
                    }
                }
                else if (keyCode == 78 || keyCode == 39){ // display next image
                    if (activeImage != (images.length - 1)){
                        this.setImage(activeImage + 1);
                    }
                }
            },
    
            preloadImages: function(){
                var next, prev;
                if (images.length > activeImage + 1) {
                    next = new Image();
                    next.src = images[activeImage + 1][0];
                }
                if (activeImage > 0) {
                    prev = new Image();
                    prev.src = images[activeImage - 1][0];
                }
            },
    
            close: function(){
                this.disableKeyNav();
                els.lightbox.hide();
                els.overlay.fadeOut({
                    duration: this.overlayDuration
                });
                els.image.setStyle('display', 'none');
                els.shim.hide();
                this.fireEvent('close', activeImage);
            },
    
            getViewSize: function() {
                return [Ext.Element.getViewportWidth(), Ext.Element.getViewportHeight()];
            }
        }
    })();
    
    Ext.onReady(Ext.ux.Lightbox.init, Ext.ux.Lightbox);
    Greets Dimitri
    SCHERP Ontwikkeling

  7. #7
    Sencha User fabio.policeno's Avatar
    Join Date
    Sep 2010
    Location
    Curitiba - PR / Brasil
    Posts
    305
    Vote Rating
    5
    fabio.policeno is on a distinguished road

      0  

    Default Remove animate

    Remove animate


    animate: false no remove animate. Any ideas?

    Thank's