Image Album Gallery
In this example the image is to the right and the link type is the double chevron which opens an internal page in the same window which shows a more basic album..
Internal LinkEverWeb Widgets
Professional Image Album Gallery
Alternative Settings
The image has no caption and has a border.
The text slides above the image at the break point.
The link is a CTA set to open an external page in a new window.
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 below the figure.
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 lnik 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 proporyions 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. There is an option to hide the arrows on mobile devices where the slides can be swiped.
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. The percentage width of the slider images can be adjusted.
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 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. Follow the link below to see a much simpler version.