EverWeb Gallery Album
The heading, descriptive text and the optional link can be located at the left or right of the image.
GalleriesEverWeb Widgets
Image Albums
Responsive Grid Layout Image Album
The widget creates an image in an HTML5 figure element with an optional overlay caption and a text block in an article element. Both items sit side by side on wider screens - each in a grid column. At the break point, the article element positions itself above or below the figure depending on the setting.
As can be seen from the examples, the image can be placed to the left or right of the text and can have a border if required.
The article element has a heading and text which is vertically aligned using the CSS grid "vertical-align" property.
The optional link can be a text link with a single or double chevron or a CTA style link. It can be configured to open internal or external pages and in a new window if required.
Layout
The proportions of the image and text block can be set up by entering the required number of columns and then the start column and number of columns for each item to span.
Both items become full width on mobile at the break point and its just a question of deciding which item will be in row 1 to be located at the top.
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 slideshow 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. The slides can be swiped on mobile devices..
Setup
The image that is seen on page load is inserted along with alt text and a caption if required. Then the first slider image is selected and is caption added. The remaining images can be dragged all together from a Finder folder, dropped onto the widget's Assets List and then have their captions added.
Lightbox Slideshow
The slideshow is responsive up to the maximum size of the image file.
There are controls for selecting the transition type and for setting the transition time in milliseconds. There is a large selection of transition types. The first example on this page uses the default slide transition and the second on uses scale up.
The slideshow has controls at the top - some of which can be turned on or off. The optional controls are fullscreen, zoom, slide counter and play/pause.
There are controls to magnify the image in/out and a play/pause button. The slideshow can be set to autoplay. The slide time is set in milliseconds and there is a progress bar whose color can be set.
There is a control for turning on "smart preload" for better performance with large image files.
The slideshow captions inherit the font family set for the grid captions and can be adjusted for font size and color.
NOTE: This gallery is for experienced EverWeb users who need a professional quality slideshow and who are prepared to take the time to understand the new CSS Grid Layout Module.