O'Reilly logo

Building UIs with Wijmo by Yuguang Zhang

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using the gallery widget

As mentioned in the section on the carousel widget, the gallery widget displays navigable thumbnails by default. Selecting a thumbnail shows a larger version of the image above it.

Creating the gallery widget

As you might expect by now, the Wijmo gallery widget is created with the wijgallery method:

$("#wijgallery").wijgallery({
  thumbsDisplay: 3
});

This gallery is created with as much reuse of the carousel example as possible. For the gallery, we only limit the width on the container as it needs space to display the thumbnails:

#wijgallery {
  width: 300px;
}

We set the number of thumbnails to 3 due to the horizontal area below our images. Wijmo automatically crops the images for the thumbnails. Our gallery widget now looks like ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required