EverWeb Widgets

  • product gallery
  • product gallery
  • product gallery
  • product gallery

Product Description

When viewed on computers, the product image gallery is positioned to the left with the thumbnails below. The description is to the right and has a heading and a paragraph for describing the product. This text can be aligned at the top, center or bottom.
Hovering a thumbnail opens the larger image in the gallery stage.
The slideshow stage is set to a percentage of the maximum width - in this case 50% - and the text occupies the rest of the space.
Mobile
On mobile devices, the gallery is full width, responsive and the description slides below it.
Images are opened in the stage by tapping the thumbnails.
The number of thumbnails per row can be set and there is an option to set a lesser value when the item is viewed on a mobile phone.
Both the stage image and the thumbnails can have a border to separate them from the background if required.

Product Gallery

Grid Design

Using CSS Grid layout greatly simplifies creating fairly complicated item. The layout is divide into two grid sections - one for the gallery and the other for the description - using the grid-template-columns property. This allows the text content to be easily centered vertically.
The gallery is given a percentage width and the description is set to "auto" so that it fits the remaining space.
The thumbnail container is set up as a grid within a grid so that the number of items per row can be set without using CSS calc. Their spacing is adjusted using the grid-gap selector. This adjusts the spacing without effecting the main items padding.
Images
As usual, the thumbnail and large images should be cropped to size before importing into EverWeb. The large image which appears on page load is selected twice - once to fill the slideshow stage and the other to pair it with the corresponding thumbnail in the EverWeb widget API Assets List.
Scripts
Unlike most sliders of this type, there are no scripts to download so it is very efficient. The slider uses jQuery and only requires a couple of lines of javascript to set it up and make it function.

© EverWeb Widgets -