The goal of ProductViewer was to create a simple image slider that can fit into small spaces; like columns, grids, sidebars or footers. Things in the slider that would otherwise consume a lot of space (like captions and navigation buttons) are purposefully omitted. Full size images are activated by clicking or tapping the thumbnail images underneath. Using dedicated pairs of full size images and thumbnail images improves image quality and reduces loading times.
Example
This example uses the powerful FlexBox stack to create a strong yet flexible grid layout. This enclosing container holds a single ProductViewer stack and some mixed content / HTML for the product description and purchasing options. The shadow effect is Shady. The finished thing is fully mobile responsive, perfectly aligned and works great in all modern web browsers. You would be able to replace the example purchase options and buttons with your own cart buttons. The example images are included in the stack, to help you get started.
Premium Polo Shirts
Our iconic polo shirts and designed with a classic fold down collar that features a three button fastening placket, three cut and sew tri-coloured panels, single coloured back and short sleeves.
$39.95 each
Design:
Size:
Quantity:
The same example shown above is included within the same project file download.
Setup
To use ProductViewer:Install in the normal way.
- Open your Stacks Library. Search for 'ProductViewer'. Drag and drop a copy of the stack into your page.
- Click on the blue button to add sample images or your own images.
- For your own images, select the sub-stack and use the options in the side panel to configure the source of your image, its title and its ALT attribute.
- If you select the main ProductViewer stack in edit mode, you can access the settings applied to the whole stack.
- Preview the page to see the result. Save your changes. Export or publish your website in the normal way when done.
Preparing your images
JPG is the best image format to use for images that don't need transparency. Ideally you should create a set of full size images and pair these with smaller thumbnail images. By having both full size images and thumbnails, things will load faster and you'll achieve better image quality. There are many apps available for batch-resizing images. Even Preview.app on your computer can be used to resize and resave images. Things generally look and work better if you keep all the full size images and thumbnail images the same size.The full size example images in the ProductViewer stack are 720px square, and the thumbnail images are 60px square. 60px is a pleasantly comfortable size for people on touch devices to press with their fingers. Thumbnail images can receive an optional border line and border radius (rounded corners) in the ProductViewer stack settings.
Additional notes
Some more information to help you:- As always, every setting has a small informational tooltip explaining what it does. These display when you mouseover the stack settings.
- You can quickly duplicate the image items in ProductViewer by holding down the ALT key, when you click and drag a sub-stack.
- ProductViewer will only generate the actual image presentation. The display of product information, forms and purchase buttons alongside the ProductViewer stack is your responsibility to provide.
- If there is insufficient space for all the thumbnails to display on a single line, they will wrap-down onto a second line.
- From the outset, this stack has always been designed to fit into smaller spaces. There are more powerful image slideshow stacks available on this website, if you require support for things like left / right navigation, more animation effects and captions.
