1. #21
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Default


    two things:

    1) "," on beginning of new lines looks terrible

    2) you should avoid property chaining and store more object references in variables. this will speeden up thinks a bit.
    for example, instead of:

    PHP Code:
    onImagePinchStart: function(ev) {
        var 
    scroller this.getScrollable().getScroller();

        
    // disable scrolling during pinch
        
    scroller.stopAnimation();
        
    scroller.setDisabled(true);

        
    // store beginning scale
        
    this.startScale this.scale;

        
    // calculate touch midpoint relative to image viewport
        
    this.originViewportX = (ev.touches[0].pageX ev.touches[1].pageX) / this.element.getX();
        
    this.originViewportY = (ev.touches[0].pageY ev.touches[1].pageY) / this.element.getY();

        
    // translate viewport origin to position on scaled image
        
    this.originScaledImgX this.originViewportX scroller.position.this.translateX;
        
    this.originScaledImgY this.originViewportY scroller.position.this.translateY;

        
    // unscale to find origin on full size image
        
    this.originFullImgX this.originScaledImgX this.scale;
        
    this.originFullImgY this.originScaledImgY this.scale;

        
    // calculate translation needed to counteract new origin and keep image in same position on screen
        
    this.translateX += (-* ((this.imgWidth*(1-this.scale)) * (this.originFullImgX/this.imgWidth)));
        
    this.translateY += (-* ((this.imgHeight*(1-this.scale)) * (this.originFullImgY/this.imgHeight)))

        
    // apply new origin
        
    this.setOrigin(this.originFullImgXthis.originFullImgY);

        
    // apply translate and scale CSS
        
    this.applyTransform();

    you should write:

    PHP Code:
    onImagePinchStart: function(ev) {
        var 
    me this,
            
    scroller me.getScrollable().getScroller(),
            
    scrollPosition scroller.position,
            
    touches ev.touches,
            
    element me.element,
            
    scale me.scale;

        
    // disable scrolling during pinch
        
    scroller.stopAnimation();
        
    scroller.setDisabled(true);

        
    // store beginning scale
        
    me.startScale scale;

        
    // calculate touch midpoint relative to image viewport
        
    me.originViewportX = (touches[0].pageX touches[1].pageX) / element.getX();
        
    me.originViewportY = (touches[0].pageY touches[1].pageY) / element.getY();

        
    // translate viewport origin to position on scaled image
        
    me.originScaledImgX me.originViewportX scrollPosition.me.translateX;
        
    me.originScaledImgY me.originViewportY scrollPosition.me.translateY;

        
    // unscale to find origin on full size image
        
    me.originFullImgX me.originScaledImgX scale;
        
    me.originFullImgY me.originScaledImgY scale;

        
    // calculate translation needed to counteract new origin and keep image in same position on screen
        
    me.translateX += (-* ((me.imgWidth  * (scale)) * (me.originFullImgX me.imgWidth)));
        
    me.translateY += (-* ((me.imgHeight * (scale)) * (me.originFullImgY me.imgHeight)))

        
    // apply new origin
        
    me.setOrigin(me.originFullImgXme.originFullImgY);

        
    // apply translate and scale CSS
        
    me.applyTransform();

    greetings Sunny

  2. #22
    Sencha User
    Join Date
    Dec 2011
    Location
    Brazil
    Posts
    106
    Vote Rating
    0
    Perdiga is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by demon222 View Post
    he,

    please add to config (for translation):
    PHP Code:
    ...
            
    loadingMmessage'Loading ...'
            
    ,
    ... 
    and in initViewer


    PHP Code:
    ...
                
    this.setMasked({
                    
    xtype'loadmask',
                    
    message:this.getLoadingMmessage()
                });

    ... 
    I added this code

    Quote Originally Posted by SunboX View Post
    two things:

    1) "," on beginning of new lines looks terrible

    2) you should avoid property chaining and store more object references in variables. this will speeden up thinks a bit.
    for example, instead of:

    PHP Code:
    onImagePinchStart: function(ev) {
        var 
    scroller this.getScrollable().getScroller();

        
    // disable scrolling during pinch
        
    scroller.stopAnimation();
        
    scroller.setDisabled(true);

        
    // store beginning scale
        
    this.startScale this.scale;

        
    // calculate touch midpoint relative to image viewport
        
    this.originViewportX = (ev.touches[0].pageX ev.touches[1].pageX) / this.element.getX();
        
    this.originViewportY = (ev.touches[0].pageY ev.touches[1].pageY) / this.element.getY();

        
    // translate viewport origin to position on scaled image
        
    this.originScaledImgX this.originViewportX scroller.position.this.translateX;
        
    this.originScaledImgY this.originViewportY scroller.position.this.translateY;

        
    // unscale to find origin on full size image
        
    this.originFullImgX this.originScaledImgX this.scale;
        
    this.originFullImgY this.originScaledImgY this.scale;

        
    // calculate translation needed to counteract new origin and keep image in same position on screen
        
    this.translateX += (-* ((this.imgWidth*(1-this.scale)) * (this.originFullImgX/this.imgWidth)));
        
    this.translateY += (-* ((this.imgHeight*(1-this.scale)) * (this.originFullImgY/this.imgHeight)))

        
    // apply new origin
        
    this.setOrigin(this.originFullImgXthis.originFullImgY);

        
    // apply translate and scale CSS
        
    this.applyTransform();

    you should write:

    PHP Code:
    onImagePinchStart: function(ev) {
        var 
    me this,
            
    scroller me.getScrollable().getScroller(),
            
    scrollPosition scroller.position,
            
    touches ev.touches,
            
    element me.element,
            
    scale me.scale;

        
    // disable scrolling during pinch
        
    scroller.stopAnimation();
        
    scroller.setDisabled(true);

        
    // store beginning scale
        
    me.startScale scale;

        
    // calculate touch midpoint relative to image viewport
        
    me.originViewportX = (touches[0].pageX touches[1].pageX) / element.getX();
        
    me.originViewportY = (touches[0].pageY touches[1].pageY) / element.getY();

        
    // translate viewport origin to position on scaled image
        
    me.originScaledImgX me.originViewportX scrollPosition.me.translateX;
        
    me.originScaledImgY me.originViewportY scrollPosition.me.translateY;

        
    // unscale to find origin on full size image
        
    me.originFullImgX me.originScaledImgX scale;
        
    me.originFullImgY me.originScaledImgY scale;

        
    // calculate translation needed to counteract new origin and keep image in same position on screen
        
    me.translateX += (-* ((me.imgWidth  * (scale)) * (me.originFullImgX me.imgWidth)));
        
    me.translateY += (-* ((me.imgHeight * (scale)) * (me.originFullImgY me.imgHeight)))

        
    // apply new origin
        
    me.setOrigin(me.originFullImgXme.originFullImgY);

        
    // apply translate and scale CSS
        
    me.applyTransform();

    greetings Sunny
    ok, I updated the code

    ImageViewer.js
    Code:
    Ext.define('App.Arkivus.ImageViewer',{
            
        extend: 'Ext.Container',
        config: {
                doubleTapScale: 1,
                maxScale: 4,
                loadingMask: true,
                previewSrc: false,
                resizeOnLoad:true,
                imageSrc: false,
                initOnActivate: false,
                cls: 'imageBox',
                scrollable: 'both' ,   
                loadingMessage:'Loading...',
                html: '<figure><img></figure>',
        },
        xtype: 'imageviewer',
        initialize: function() {
            if(this.initOnActivate)
                this.addListener('activate', this.initViewer, this, {delay: 10, single: true});
            else
                this.addListener('painted', this.initViewer, this, {delay: 10, single: true});        
        },
        
        initViewer: function() {
            var me = this,
                scroller = me.getScrollable().getScroller(),
                element = me.element;
                
            //disable scroller
            scroller.setDisabled(true);
            
            // mask image viewer
            if(me.getLoadingMask())
                me.setMasked({
                       xtype: 'loadmask',
                       message:me.getLoadingMessage()
                });
    
    
    
    
            // retrieve DOM els
            me.figEl = element.down('figure');
            me.imgEl = me.figEl.down('img');
    
    
    
    
            // apply required styles
            me.figEl.setStyle({
                overflow: 'hidden',
                display: 'block',
                margin: 0,
            });
    
    
    
    
            me.imgEl.setStyle({
                '-webkit-user-drag': 'none',
                '-webkit-transform-origin': '0 0',
                'visibility': 'hidden',
            });
    
    
    
    
            // show preview
            if(me.getPreviewSrc())
            {
                element.setStyle({
                    backgroundImage: 'url('+me.getPreviewSrc()+')',
                    backgroundPosition: 'center center',
                    backgroundRepeat: 'no-repeat',
                    webkitBackgroundSize: 'contain',
                });
            }
    
    
    
    
            // attach event listeners
            me.on('load', me.onImageLoad, me);
            me.imgEl.addListener({
                scope: me,
                doubletap: me.onDoubleTap,
                pinchstart: me.onImagePinchStart,
                pinch: me.onImagePinch,
                pinchend: me.onImagePinchEnd,
            });    
    
    
    
    
            // load image
            if(me.getImageSrc())
                me.loadImage(me.getImageSrc());
        },
        
        loadImage: function(src) {  
            var me = this;
            if(me.imgEl){
                me.imgEl.dom.src = src;
                me.imgEl.dom.onload = Ext.Function.bind(me.onLoad, me, me.imgEl, 0);
            }
            else
                me.getImageSrc() = src;
        },
    
    
    
    
        onLoad : function(el, e) {
            var me = this;
            me.fireEvent('load', me, el, e);
        },
        
        onImageLoad: function() {
            var me = this,
                parentElement = me.parent.element;
                
            // get viewport size
            me.viewportWidth = me.viewportWidth || me.getWidth() || parentElement.getWidth();
            me.viewportHeight = me.viewportHeight || me.getHeight() || parentElement.getHeight();
                
            // grab image size
            me.imgWidth = me.imgEl.dom.width;
            me.imgHeight = me.imgEl.dom.height;
                    
            // calculate and apply initial scale to fit image to screen
            if(me.getResizeOnLoad()){
                me.scale = me.baseScale = Math.min(me.viewportWidth/me.imgWidth, me.viewportHeight/me.imgHeight);
                me.setMaxScale(me.scale*4);
            }else{
                me.scale = me.baseScale = 1;
            }
            
            // set initial translation to center
            me.translateX = me.translateBaseX = (me.viewportWidth - me.baseScale * me.imgWidth) / 2;
            me.translateY = me.translateBaseY = (me.viewportHeight - me.baseScale * me.imgHeight) / 2;
            
            // apply initial scale and translation
            me.applyTransform();
            
            // initialize scroller configuration
            me.adjustScroller();
    
    
    
    
            // show image and remove mask
            me.imgEl.setStyle({ visibility: 'visible' });
    
    
    
    
            // remove preview
            if(me.getPreviewSrc())
            {
                me.element.setStyle({
                    backgroundImage: 'none',
                });
            }
    
    
    
    
            if(me.getLoadingMask())
                me.setMasked(false);
    
    
    
    
            me.fireEvent('imageLoaded', me);
        },
        
        onImagePinchStart: function(ev) {
            var me = this,
                scroller = me.getScrollable().getScroller(),
                scrollPosition = scroller.position,
                touches = ev.touches,
                element = me.element,
                scale = me.scale;
    
    
            // disable scrolling during pinch
            scroller.stopAnimation();
            scroller.setDisabled(true);
            
            // store beginning scale
            me.startScale = scale;
            
            // calculate touch midpoint relative to image viewport
            me.originViewportX = (touches[0].pageX + touches[1].pageX) / 2 - element.getX();
            me.originViewportY = (touches[0].pageY + touches[1].pageY) / 2 - element.getY();
            
            // translate viewport origin to position on scaled image
            me.originScaledImgX = me.originViewportX + scrollPosition.x - me.translateX;
            me.originScaledImgY = me.originViewportY + scrollPosition.y - me.translateY;
            
            // unscale to find origin on full size image
            me.originFullImgX = me.originScaledImgX / scale;
            me.originFullImgY = me.originScaledImgY / scale;
            
            // calculate translation needed to counteract new origin and keep image in same position on screen
            me.translateX += (-1 * ((me.imgWidth*(1-scale)) * (me.originFullImgX/me.imgWidth)));
            me.translateY += (-1 * ((me.imgHeight*(1-scale)) * (me.originFullImgY/me.imgHeight)));
        
            // apply new origin
            me.setOrigin(me.originFullImgX, me.originFullImgY);
        
            // apply translate and scale CSS
            me.applyTransform();
        },
        
        onImagePinch: function(ev) {
            var me = this;
            // prevent scaling to smaller than screen size
            me.scale = Ext.Number.constrain(ev.scale * me.startScale, me.baseScale-2, me.getMaxScale());
            me.applyTransform();
        },
        
        onImagePinchEnd: function(ev) {
            var me = this;
                
            // set new translation
            if(me.scale == me.baseScale)
            {
                // move to center
                me.setTranslation(me.translateBaseX, me.translateBaseY);
            }
            else
            {    
                //Resize to init size like ios
                if(me.scale < me.baseScale && me.getResizeOnLoad()){
                    me.resetZoom();
                    return;
                }
                // calculate rescaled origin
                me.originReScaledImgX = me.originScaledImgX * (me.scale / me.startScale);
                me.originReScaledImgY = me.originScaledImgY * (me.scale / me.startScale);
                
                // maintain zoom position
                me.setTranslation(me.originViewportX - me.originReScaledImgX, me.originViewportY - me.originReScaledImgY);            
            }
            // reset origin and update transform with new translation
            me.setOrigin(0, 0);
            me.applyTransform();
    
    
    
    
            // adjust scroll container
            me.adjustScroller();
        },
    
    
        onZoomIn: function(){
            var me = this,
                ev = {pageX : 0, pageY: 0},
                myScale = me.scale;
            if (myScale < me.getMaxScale())
                  myScale = me.scale + 0.05;
            if (myScale >= me.getMaxScale())
                  myScale = me.getMaxScale();
                  
            ev.pageX = me.viewportWidth / 2;
            ev.pageY = me.viewportHeight / 2;
            me.zoomImage(ev,myScale);
        },
        
        onZoomOut: function(){
            var me = this,
                ev = {pageX : 0, pageY: 0},
                myScale = me.scale;
            if (myScale > me.baseScale)
                    myScale = me.scale - 0.05;
            if (myScale <= me.baseScale)
                    myScale = me.baseScale;
    
    
            ev.pageX = me.viewportWidth / 2;
            ev.pageY = me.viewportHeight / 2;
            me.zoomImage(ev,myScale);
        },
        
        zoomImage: function (ev, scale, scope) {
            var me = this,
                scroller = me.getScrollable().getScroller(),
                scrollPosition = scroller.position,
                element = me.element;
                
            // zoom in toward tap position
            var oldScale = this.scale,
                newScale = scale,
                originViewportX = ev ? (ev.pageX - element.getX()) : 0,
                originViewportY = ev ? (ev.pageY - element.getY()) : 0,
                originScaledImgX = originViewportX + scrollPosition.x - this.translateX,
                originScaledImgY = originViewportY + scrollPosition.y - this.translateY,
                originReScaledImgX = originScaledImgX * (newScale / oldScale),
                originReScaledImgY = originScaledImgY * (newScale / oldScale);
            
            this.scale = newScale;
            setTimeout(function(){
                me.setTranslation(originViewportX - originReScaledImgX, originViewportY - originReScaledImgY);
                // reset origin and update transform with new translation
                //that.setOrigin(0, 0);
    
    
                // reset origin and update transform with new translation
                me.applyTransform();
    
    
                // adjust scroll container
                me.adjustScroller();
            
                // force repaint to solve occasional iOS rendering delay
                Ext.repaint();
            },50)
        },
        
        onDoubleTap: function(ev, t) {
            var me = this,
                scroller = me.getScrollable().getScroller(),
                scrollPosition = scroller.position,
                element = me.element;
    
    
            if(!me.getDoubleTapScale())
                return false;
            
            // set scale and translation
            if(me.scale > me.baseScale)
            {
                // zoom out to base view
                me.scale = me.baseScale;
                me.setTranslation(me.translateBaseX, me.translateBaseY);
                // reset origin and update transform with new translation
                me.applyTransform();
    
    
    
    
                // adjust scroll container
                me.adjustScroller();
                
                // force repaint to solve occasional iOS rendering delay
                Ext.repaint();
            }else{
                // zoom in toward tap position
                var oldScale = me.scale,
                    newScale = me.baseScale*4,
                    originViewportX = ev ? (ev.pageX - element.getX()) : 0,
                    originViewportY = ev ? (ev.pageY - element.getY()) : 0,
                    originScaledImgX = originViewportX + scrollPosition.x - me.translateX,
                    originScaledImgY = originViewportY + scrollPosition.y - me.translateY,
                    originReScaledImgX = originScaledImgX * (newScale / oldScale),
                    originReScaledImgY = originScaledImgY * (newScale / oldScale);
                
                me.scale = newScale;
                
                //smoothes the transition
                setTimeout(function(){
                    me.setTranslation(originViewportX - originReScaledImgX, originViewportY - originReScaledImgY);
                    // reset origin and update transform with new translation
                    me.applyTransform();
    
    
    
    
                    // adjust scroll container
                    me.adjustScroller();
                    
                    // force repaint to solve occasional iOS rendering delay
                    Ext.repaint();
                },50)
                
            }
                
            
        },
        
        setOrigin: function(x, y) {
            this.imgEl.dom.style.webkitTransformOrigin = x+'px '+y+'px';
        },
        
        setTranslation:  function(translateX, translateY) {
            var me = this;
            me.translateX = translateX;
            me.translateY = translateY;
                
            // transfer negative translations to scroll offset
            me.scrollX = me.scrollY = 0;
            
            if(me.translateX < 0)
            {
                me.scrollX = me.translateX;
                me.translateX = 0;
            }
            if(me.translateY < 0)
            {
                me.scrollY = me.translateY;
                me.translateY = 0;
            }
        },
        
        resetZoom:function(){
            var me = this;
            //Resize to init size like ios
            me.scale = me.baseScale;
            
            me.setTranslation(me.translateBaseX, me.translateBaseY);
            
            // reset origin and update transform with new translation
            me.setOrigin(0, 0);
            me.applyTransform();
    
    
            // adjust scroll container
            me.adjustScroller();
            
        },
        resize:function(){
            var me = this;
            // get viewport size
            me.viewportWidth = me.parent.element.getWidth() ||me.viewportWidth || me.getWidth();
            me.viewportHeight = me.parent.element.getHeight() || me.viewportHeight || me.getHeight();
    
    
    
    
            // grab image size
            if(typeof(me.imgEl) != 'undefined'){
                me.imgWidth = me.imgEl.dom.width;
                me.imgHeight = me.imgEl.dom.height;
            }else{
                return;
            }       
            // calculate and apply initial scale to fit image to screen
            if(me.getResizeOnLoad()){
                me.scale = me.baseScale = Math.min(me.viewportWidth/me.imgWidth, me.viewportHeight/me.imgHeight);
                me.setMaxScale(me.scale*4);
            }else{
                me.scale = me.baseScale = 1;
            }
            
            // set initial translation to center
            me.translateX = me.translateBaseX = (me.viewportWidth - me.baseScale * me.imgWidth) / 2;
            me.translateY = me.translateBaseY = (me.viewportHeight - me.baseScale * me.imgHeight) / 2;
            
            // apply initial scale and translation
            me.applyTransform();
            
            // initialize scroller configuration
            me.adjustScroller();
             
        },
    
    
    
    
        applyTransform: function() {
            var me = this,
                fixedX = Ext.Number.toFixed(me.translateX,5),
                fixedY = Ext.Number.toFixed(me.translateY,5),
                fixedScale = Ext.Number.toFixed(me.scale, 8);
            
            if(Ext.os.is.Android)
            {
                me.imgEl.dom.style.webkitTransform = 
                    //'translate('+fixedX+'px, '+fixedY+'px)'
                    //+' scale('+fixedScale+','+fixedScale+')';
                    'matrix('+fixedScale+',0,0,'+fixedScale+','+fixedX+','+fixedY+')'
            }
            else
            {
                me.imgEl.dom.style.webkitTransform =
                    'translate3d('+fixedX+'px, '+fixedY+'px, 0)'
                    +' scale3d('+fixedScale+','+fixedScale+',1)';
            }
        },
    
    
        adjustScroller: function() {
            var me = this,
                scroller = me.getScrollable().getScroller(),
                scale = me.scale;  
            
            // disable scrolling if zoomed out completely, else enable it
            if(scale == me.baseScale)
                scroller.setDisabled(true);
            else
                scroller.setDisabled(false);
            
            // size container to final image size
            var boundWidth = Math.max(me.imgWidth * scale, me.viewportWidth);
            var boundHeight = Math.max(me.imgHeight * scale, me.viewportHeight);
    
    
    
    
            me.figEl.setStyle({
                width: boundWidth + 'px',
                height: boundHeight + 'px',
            });
            
            // update scroller to new content size
            scroller.refresh();
    
    
    
    
            // apply scroll
            var x = 0;
            if(me.scrollX){
                x = me.scrollX
            }
            var y = 0;
            if(me.scrollY){
                y = me.scrollY
            }
            scroller.scrollTo(x*-1,y*-1)
        },        
        });
    the sample
    code result in Sencha Fiddle
    http://www.senchafiddle.com/#opdT7
    full screen result
    http://www.senchafiddle.com/full/!opdT7/

  3. #23
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Default


    looks much better, really nice now. :o)

  4. #24
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    248
    Vote Rating
    25
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    Some attribution would be cool if you're going to rename my component
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  5. #25
    Sencha User
    Join Date
    Apr 2012
    Posts
    103
    Vote Rating
    10
    pepperseb is on a distinguished road

      0  

    Default Little improvement

    Little improvement


    I had an issue when I got a src but the image didn't exist on the server so an endless loading mask was displayed, which didn't meet my goal.

    Indeed, I prefer displaying an image 'No image available' rather than an endless loading that makes users think the connection is lost

    So, I dived into this code and added this single line:

    Code:
    if(me.imgEl){
                me.imgEl.dom.src = src;
                me.imgEl.dom.onload = Ext.Function.bind(me.onLoad, me, me.imgEl, 0);
                me.imgEl.dom.onerror = function() {
                    this.src = 'http://yourdomain/no-image.png';
                };
    }
    Hope this helps

  6. #26
    Sencha User armode's Avatar
    Join Date
    Nov 2011
    Location
    Germany / Darmstadt
    Posts
    64
    Vote Rating
    4
    armode is on a distinguished road

      0  

    Default


    That's a good idea, pepperseb, I added that...

    There's another issue in the resize function for orientationchange; if you first zoom a liitle bit and after that do the orientationchange, the image is not at the right postion!
    I just added the resetZoom() at the end and now it works fine for me:

    Code:
        resize: function () {
            var me = this;
            // get viewport size
            me.viewportWidth = me.parent.element.getWidth() || me.viewportWidth || me.getWidth();
            me.viewportHeight = me.parent.element.getHeight() || me.viewportHeight || me.getHeight();
    
            // grab image size
            if (typeof (me.imgEl) != 'undefined') {
                me.imgWidth = me.imgEl.dom.width;
                me.imgHeight = me.imgEl.dom.height;
            } else {
                return;
            }
            // calculate and apply initial scale to fit image to screen
            if (me.getResizeOnLoad()) {
                me.scale = me.baseScale = Math.min(me.viewportWidth / me.imgWidth, me.viewportHeight / me.imgHeight);
                me.setMaxScale(me.scale * 4);
            } else {
                me.scale = me.baseScale = 1;
            }
    
            // set initial translation to center
            me.translateX = me.translateBaseX = (me.viewportWidth - me.baseScale * me.imgWidth) / 2;
            me.translateY = me.translateBaseY = (me.viewportHeight - me.baseScale * me.imgHeight) / 2;
    
            me.resetZoom();
    
        },

  7. #27
    Sencha User
    Join Date
    Dec 2011
    Location
    Brazil
    Posts
    106
    Vote Rating
    0
    Perdiga is an unknown quantity at this point

      0  

    Default


    nice ..


    I did two methods one for load and another to unload the image.
    i did this to optimize memory in carousel.

    Code:
    loadImage: function(src) {  
    		var me = this;
            if(me.imgEl){
                me.imgEl.dom.src = src;
                me.imgEl.dom.onload = Ext.Function.bind(me.onLoad, me, me.imgEl, 0);
    //            me.imgEl.dom.onerror = function() {
    //                this.src = '../../../resources/images/noimage.jpg';
    //            };
            }
    
    
            else
                me.setImageSrc(src);
        },
    
    
        unloadImage: function() {  
    		var me = this;
    
    
            // mask image viewer
            if(me.getLoadingMask())
                me.setMasked({
                       xtype: 'loadmask',
    				   message:me.getLoadingMessage()
                });
    
    
            if(me.imgEl){
                me.imgEl.dom.src = '';
                me.imgEl.setStyle({ visibility: 'hidden' });
            }
            else{
                me.setImageSrc('');
                me.imgEl.setStyle({ visibility: 'hidden' });
            }
        },


  8. #28
    Sencha User
    Join Date
    Apr 2012
    Posts
    103
    Vote Rating
    10
    pepperseb is on a distinguished road

      0  

    Default


    Do you guys know how to disable image switching when current image is zommed in?

    I'm having a huge headache

  9. #29
    Sencha User
    Join Date
    Dec 2011
    Location
    Brazil
    Posts
    106
    Vote Rating
    0
    Perdiga is an unknown quantity at this point

      0  

    Default


    i think that you you can use
    me.imgEl.setStyle({ visibility: 'hidden' });
    or
    me.imgEl.setStyle({ disabled: 'true' });

  10. #30
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    134
    Vote Rating
    4
    demon222 is on a distinguished road

      0  

    Default


    Pretty please - do the update in one place and overall

    R