showplus Examples

Examples

The example below features an image slideshow with the default fade transition effect and horizontally oriented thumbnails for fast navigation. Click one of the thumbnails to jump to the corresponding image in the slideshow set.

showplus Fade

  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim

1 | 2 | 3 | 4 | 5 | 6 | 7

The following example shows a slideshow with the push transition effect and a linear easing function. The easing function determines the speed at which the animation progresses: linear easing corresponds to constant speed throughout the animation. In this example, thumbnails are vertically oriented and positioned at the right side of the slideshow.

showplus Push

  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim

1 | 2 | 3 | 4 | 5 | 6 | 7

The next example demonstrates the fold transition effect with a nonlinear easing function nick-named bouncy. Observe how the animation between the slides is non-uniform: slower at certain points, speeds up at others and at times progresses backwards. Thumbnails are shown in a larger size with a width of 120px and a height of 80px.

showplus Fold

  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim

1 | 2 | 3 | 4 | 5 | 6 | 7

The last example illustrates the Ken Burns transition effect with a zoom factor of 0 and a pan factor of 100. Images are shown in a random order. Thumbnails, captions and the navigation controller are disabled for this example.

showplus Ken Burns

  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim
  • © R. Sonnabend, Rüsselsheim

1 | 2 | 3 | 4 | 5 | 6 | 7