UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Slideshow With Dissolve

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 )