SOURCE CODE: Zooming Collection Items

  
  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

    JAVASCRIPT EXAMPLES
    Zooming Collection Items
    

      
SOURCE
    
  

  

  

    
In this example, the Uize.Widget.CollectionItem.Zooming widget class is being used to add a JavaScript animation zoom in effect to a set of thumbnails. If you mouseover one of the images and rest the mouse, the zoom in behavior will be activated. Once zoomed in, moving the mouse lets you pan up and down and left and right inside the view port. The Uize.Widget.CollectionItem.Zooming class is typically used in the context of a Uize.Widget.Collection instance, but it doesn't have to be, and can stand on its own and still provide the zoom in behavior. In this particular example, there is one Uize.Widget.CollectionItem.Zooming instance per image, and the six instances are created using the declarative spawning mechanism (if you look at the source code, you'll see the script tag that declares the window.$page_$$ property).