SOURCE CODE: Slideshow With Dissolve

  
  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

    JAVASCRIPT EXAMPLES
    Slideshow With Dissolve
    

      
SOURCE
    
  

  

  

    
In this example, an instance of Uize.Widget.SlideShow is used to present a slideshow interface that allows us to step through a series of images. The images are displayed with a dissolve transition effect between them using JavaScript animation. This is achieved by using an instance of the Uize.Widget.Swap.Image widget class, which is declared as a child widget of the slideshow widget, with a child widget name that maps it to the image property of the slide records. Each photo also has a rating, represented by the rating field contained in the record for each slide. An instance of Uize.Widget.Bar with a star decoration is used to represent the rating value, and this instance is added as a child widget to the slideshow widget - with a name that maps it to the rating record field.

    
What's notable in this example is the use of the declarative syntax for widget adoption by the page widget. View the source code to appreciate this nuance. Notice the script tag that begins with window.$page_slideShow = .... That's where all the magic is.
  

  
  
  
  

  

  

    

      

        
      
      

        

        ( of )