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

      0  

    Default


    Ok guys, this is my improvement to prevent switching between images when active image is zoomed in.

    Thanks umbro77 for giving me some hints.

    In the imageviewer:

    Add
    Code:
    config: {
    ...,
    isZoomed: false
    ...
    }
    Add two lines in onDoubleTap function:
    Code:
    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.setIsZoomed(false);
                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
                me.setIsZoomed(true);
                var oldScale = me.scale,
                    newScale = me.baseScale * me.getZoomRatio(),
                    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)
            }
        },
    In your carousel, you should have a onDragStart function (line 343 for me), just add:
    Code:
    onDragStart: function(e) {
            // if current image is zoomed in, stop switching
            if (this.getActiveItem().getIsZoomed()) {  
                e.stopPropagation();
                return;
            }
            var direction = this.getDirection(),
                absDeltaX = e.absDeltaX,
                absDeltaY = e.absDeltaY,
                directionLock = this.getDirectionLock();
    
    ....
    Hope this helps!!!

  2. #42
    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


    Could someone please put all those "I optimized this" and "I fixed that" code togehter in one slideshow class? And maybe, host that class somewhere togehter with an example?

    thx Sunny

  3. #43
    Sencha User
    Join Date
    Apr 2012
    Posts
    1
    Vote Rating
    0
    michelerota77 is on a distinguished road

      0  

    Default


    If you put the carousel inside a nestedList as a detailCard, it works only the first time.

    To fix, i changed the ImageCarousel activeitemchange and the activate listeners.
    Note the "container.getScrollable()" in "activeitemchange" and "component.setActiveItem(0)" in "activate"

    Code:
    listeners : {
          activeitemchange: function(container, value, oldValue, eOpts){
            if(container.getScrollable() && oldValue){
              oldValue.resetZoom();
              this.getActiveItem().resize();
            }
          },
          
          resize: function(component, eOpts){
            this.getActiveItem().resize();
          },
          
          activate: function(component){
            component.setActiveItem(0);
          }
        }

  4. #44
    Sencha User
    Join Date
    Oct 2011
    Location
    Paris
    Posts
    2
    Vote Rating
    0
    phimaur is on a distinguished road

      0  

    Default


    Nice work.
    On my ipad, at the end of a pinch/zoom gesture, the image disappears and reappears very fast.
    Is there a way to avoid that?
    Thanks

  5. #45
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    Jamesaya is on a distinguished road

      0  

    Default Amazing

    Amazing


    You did amazing images component.

    Is there any possibility let the HTML contents can be zoom in/out like images?

  6. #46
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    contech is on a distinguished road

      0  

    Default Bugfix as a suggestion

    Bugfix as a suggestion


    Hey,

    ImageViewer#onImageLoad if this.viewportWidth > this.baseScale * this.imgWidth, translateX and translateBaseX will be negativ and the image will be cut off. #setTransition use the < 0 evaluation and works correct so I changed the lines:

    Code:
    // set initial translation to center
    this.translateX = this.translateBaseX = (this.viewportWidth - this.baseScale * this.imgWidth) / 2;
    this.translateY = this.translateBaseY = (this.viewportHeight - this.baseScale * this.imgHeight) / 2;
    to:
    Code:
    // calc initial translation
    var tmpTranslateX = (this.viewportWidth - this.baseScale * this.imgWidth) / 2;
    var tmpTranslateY = (this.viewportHeight - this.baseScale * this.imgHeight) / 2;
    
    
    // set initial translation to center
    this.setTranslation(tmpTranslateX, tmpTranslateY);
    this.translateBaseX = this.translateX;
    this.translateBaseY = this.translateY;
    That works for me :-)

  7. #47
    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


    Hi contech

    thanks for your suggestion!
    I can't find any case where the translate variables are getting < 0 on load?
    In my code it looks like that this case is not possible, because of:
    Code:
    me.baseScale = Math.min(me.viewportWidth/me.imgWidth, me.viewportHeight/me.imgHeight);
    Maybe you doesn't use the latest version of this component? You don't use the perfomance optimisation with coping the scope into the me variable...

  8. #48
    Sencha User
    Join Date
    Mar 2012
    Location
    Eindhoven, Netherlands
    Posts
    32
    Vote Rating
    2
    jeroenwalter is on a distinguished road

      1  

    Default


    Don't read this the wrong way, I use this component (with my own modifications) but keeping up with all changes here is hard.
    You refer to the latest version, so what would that be?
    This thread continually posts some version and separate fixes all over the place.
    If someone would be so nice as to make a github repository or such for this component, then development could be more streamlined imo.

  9. #49
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    I think many people are asking the same thing, Jeroen. The thread has become so complicated and diverse that the majority have little or no chance of geting this component going. You suggest putting something on GitHub - great idea - and as you seem to have a working version, any chance you can get the ball rolling and we could start with that...?

    allister

  10. #50
    Sencha User
    Join Date
    Mar 2012
    Location
    Eindhoven, Netherlands
    Posts
    32
    Vote Rating
    2
    jeroenwalter is on a distinguished road

      0  

    Default


    My version already is on Github.
    It is part of my comic reader web app.
    You can find it here https://github.com/jeroenwalter/Bada...ImageViewer.js

    It is however modified for my own use so it fits better in my project. It is also based on a version from a few months back.

    Maybe I will create a new repository for it, because I haven't changed that much and I think the changes I made may be useful to others.

    However, I'm quite pleased with how it is working right now, so I don't plan to work on it until I need something fixed or have to add a new feature.

    Right now my focus is on making the web app as a whole better. I'm in the process of rewriting the whole comic reader so it will be a plugin for ComicRack.
    For details you may take a look at http://www.badaap.nl/wordpress/badaa...ck-web-viewer/

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi