SOURCE CODE: Zooming Collection Items

VIEW EXAMPLE




  Zooming Collection Items | JavaScript Examples | UIZE JavaScript Framework
  
  
  
  
  
  
  






UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Zooming Collection Items

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).