This is a short tutorial that explains how to set up a flexible Showtime gallery in Xway or Freeway.
It’s easy to do this in Xway. Import a Showtime gallery and switch to Xway’s Web view. Resize the Web view by dragging the divider between it and the Inspector panel. You should find that the gallery resizes automatically. However, if the images in the gallery have different heights, you will also find that the thumbnails move up and down (and may also disappear below the bottom of the view) as you move from image to image.
You can solve this problem by giving the gallery component a fixed height (e.g. 700px) in Xway: switch back to the Page view and type 700px in the Height field in the Dimensions section of the Box Inspector. Then preview again. This time you should find that the thumbnails stay in the same position. But 700px isn’t an ideal height for all devices. What we really want is to use a height that adapts to the size of the device, and CSS provides us with a measurement that does just that.
Go back to Xway’s Page view and replace 700px with 100vh. vh stands for “viewport height” and refers to the height of the view area. 100vh means 100% of the height of the view area. You should now see, while you’re still in Xway’s Page view, that the gallery is resized to take up the full height of Page view. But it’s not ideal, because if you resize the Page view (or switch to the Web view and resize that) you may find that there is quite a large gap between the main image and the thumbnails (and between the main image and the top of the page) when the view is narrower.
There is an easy way to fix this. Go back to Xway’s Page view and replace 100vh with 100vmin. vmin stands for “minimum viewport dimension” (the width or height of the view area, whichever is smaller). Now, if you switch to the Web view and resize it, you should find that the gallery fits within the view area and the large gaps have disappeared.
If you’re using Freeway, you can achieve the same result by using inflow layout and an extended style property. Insert an Exhibeo 2 Import Action item on the page while you’re in text-editing mode (select a box and press Return to get a text cursor), and choose an xbExport file from the Actions palette. Then go to the Dimensions section of the Inspector palette and deselect the width and height buttons so the width and height are flexible. Don’t worry that it shrinks to a small size in Freeway’s Page view: if you switch to the Preview tab, you should find that the gallery takes up the full width of its parent box (e.g. the pagediv).
The next step is to add 100vmin as the height of the gallery. You can’t do this in the Inspector palette, because Freeway doesn’t support vmin (or vh) measurements, but you can do it by using an extended style property. Switch back to Freeway’s Page view and select the gallery box. Then choose Extended from the Item menu and click on the <div style> tab. Then click on the New button and type height (as the Name) and 100vmin (as the Value). OK the dialog. Now, if you preview in Freeway or in a browser, you should find that the gallery resizes flexibly, and the thumbnails remain close to the main image.