1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Vote Rating
    0
    Answers
    6
    toxkillfraex is on a distinguished road

      0  

    Default Answered: stacking thumbnails during/after a zoom effect

    Answered: stacking thumbnails during/after a zoom effect


    I'm not sure if this is the right place to ask this, but I guess I might as well ask a more css related issue.

    either way we have a happy little dataview which is loading a load of images in a row (woot!)
    that's all working nice and fine, but somewhere along the road somebody decided it might be cool to have a zoom effect on these images...

    it looks bloody horrible. But I managed to get rid of the biggest issue after some fumbling around. <33
    Well so far I've gotten it all to stack right half the time and bad the other half =O
    However I'm worried that css will limit me to exactly this result D=

    ze issue.png

    so I was hoping somebody might have some ideas either whitin this framework or in css that actually achieve what we're trying to do here on mouse over.


    the current code of functions involved:

    Code:
    zoomThumb : function (view, record, element, index, event) 
    {
            element.firstElementChild.firstElementChild.style.zIndex = '800000';
            
            element.firstElementChild.firstElementChild.style.marginTop = '-43';
            element.firstElementChild.firstElementChild.style.marginLeft = '-43';
            element.firstElementChild.firstElementChild.style.marginBottom = '-43';
            element.firstElementChild.firstElementChild.style.marginRight = '-43';
            
            console.log(element.firstElementChild.firstElementChild.style.zIndex);
            Ext.create('Ext.fx.Anim', {
                target: element.firstElementChild.firstElementChild,
                duration: 1000,
                to: {
                    width: 150, //end width 300
                    height: 150, // end width 300
                }
            });
            
        },
        endZoomThumb : function (view, record, element, index, event) {
            element.firstElementChild.firstElementChild.style.zIndex = '1';
            
            element.firstElementChild.firstElementChild.style.marginTop = '0';
            element.firstElementChild.firstElementChild.style.marginLeft = '0';
            element.firstElementChild.firstElementChild.style.marginBottom = '0';
            element.firstElementChild.firstElementChild.style.marginRight = '0';
            
            Ext.create('Ext.fx.Anim', {
                target: element.firstElementChild.firstElementChild,
                duration: 1000,
                to: {
                    width: 65, //end width 300
                    height: 65 // end width 300
                }
            });
        }
    The data view's TPL:
    Code:
    var tplThumbs = new Ext.XTemplate(
                                    '<tpl for=".">',
                                        '<div class= "thumb-wrap" id="{id}">', 
                                        '<div class="thumb"><img src="{thumbnailUrl}" ></div>',
                                    '</tpl>'
                                );
    The panel involved has an id documentBrowser

    The css involved
    Code:
    #documentBrowser .drawerView
    {
        /*drawerview body*/
        
        margin: 10px
    }
    
    #documentBrowser .thumb-wrap
    {    
        /*drawer thumbnail standard*/
        
        margin: 4px;
        margin-right: 0;
        
        padding: 5px;    
    
        float: left;
        
        width: 70;
        height: 70;
        
    }
    
    #documentBrowser .thumb
    {
        position: static;
        
        z-index: -2;
    }
    
    #documentBrowser .thumb img
    {
        /*drawer thumbnail image size*/
        
        position: static;
        
        width: 65;
        height: 65;
        
        z-index: inherit;
    }
    
    #documentBrowser .x-item-over
    {   
        /*drawer thumbnail on mouse over*/
        
        padding: 4px;
    
        border-radius: 5px;
        
        background: $thumb-mouse-over-background;
        
        border:1px solid $thumb-mouse-over-border-color;
        
    }

  2. I managed to fix it!

    Code:
    #documentBrowser .thumb img
    {
        /*drawer thumbnail image size*/
        
        position: relative;
        
        width: 65;
        height: 65;
        
        z-index: inherit;
    }

  3. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Vote Rating
    0
    Answers
    6
    toxkillfraex is on a distinguished road

      0  

    Default nevermind!

    nevermind!


    I managed to fix it!

    Code:
    #documentBrowser .thumb img
    {
        /*drawer thumbnail image size*/
        
        position: relative;
        
        width: 65;
        height: 65;
        
        z-index: inherit;
    }

Tags for this Thread