Intel XDK: Controls 11: Customizing IMAGE GALLERY Widget in App Designer 7

In this post we will add more images to the slide show in the IMAGE GALLERY widget in App Designer 7 of Intel XDK. We basically use the same documents we used earlier in the previous post here ( ).

The design of the FIRST page in the TabbarWidget page has not changed.


What gets changed are the extra images added to the gallery_images folder and the changes to the gallery-images.json page which points to these added images. Make sure the images added are 640x480.

It is very easy to locate the folder to place your images. Just right click gallery_images as shown and click Show in Explorer.


I added four more images, BavarianAlps.png, PragueAerial.png, Vienna.png and Salzburg.png to the gallery_images folder.

Right click www under projects and click Refresh File Tree.Expand gallery_images and verify the images are there.


Now modify the gallery_json page as shown:

The image file extensions in the .json file should correctly match the file name and file extensions of the images.

That is all there is to it.

Simulate and verify as shown.

For Sortable List review this.

Post a Comment

Popular posts from this blog

Develop a Side Menu App using Intel XDK - Part 1

UWP: XAML's ListView Control and its SelectionChanged event - Part 1

Setting up Kid's Corner on Windows 10 Phone