EverWeb Widgets

Responsive Image Gallery

Gallery Slide [1]
Image Caption
Use <br> for returns
Gallery Slide [2]
Image Caption
Use <br> for returns
Gallery Slide [3]
Adjustable Grid Gap & Padding
Gallery Slide [4]
Grid Item Border Styles
Gallery Slide [5]
Large Image Captions
From Alt Attribute
Gallery Slide [6]
Self Aligning Grid Items

Responsive Image Grid - Optional Links

EverWeb responsive image grid
Top View
Right Angle View
Right Angle View
Left Angle View
Left Angle View
Back View
Back View
Front View
Front View
Software
Software
Thunderbolt Connection

Responsive CSS Grid & Gallery

This image grid and image gallery are for displaying product image thumbnails which have all been cropped to the same size. The grid can be used to link to product pages and the gallery for displaying larger versions of the thumbnails.
Images
The image which appears on page load should be cropped to the maximum width that it will be displayed at - in this case 800px. The slidshow images will have a maximum width equal to the width of the image file. They should be cropped to this width before importing into EverWeb.
Navigation
The slides are navigated using directional arrows or grab and drag when viewed on computers. There is an option to hide the arrows on mobile devices where the slides can be swiped.
Testing
Test the slideshow in the iOS Simulator using an iPhone in both portrait and landscape mode to make sure the slideshow images have a suitable aspect ratio.

© EverWeb Widgets -