Full Width Responsive Lightbox Image Gallery
Each item in the gallery is centered in a div with a percentage width so that they will move with changes in browser width.
The gallery has a maximum width setting for stopping it spreading out too far at wide browser settings on large screens.
The number of images per row is set by choosing the appropriate percentage width for the thumbnail container.
The containers have a minimum height setting so that they can all have the same height independent of the amoum of text added in the caption field.
The container width should not be more than the page content width divided by the number of images per row. For example, if the page content width is set at the standard 980px and there are four thumbnail images per row, the width should be no more than 240px.
The slides can be navigated using the directional arrows and there is also an option to advance on click - or tap on touch devices.
The close button can be hidden if required and the slideshow closed by clicking the background overlay.
The thumbnail images are automatically generated from the full size images.
The full size images in the lighbox slideshow are responsive but their maximum width will depend and the width of the actual image file. In other words, if the full size image is to extend to up to 2000px wide, it will need to be imported into EverWeb at that width.
Check the "Full width" box in the Metrics inspector and either choose the images or drag them in together from a Finder folder and drop them onto the Assets List in the widget settings panel.
Highlight each image file name in turn to add the thumbnail caption and lightbox image caption.
The thumbnail captions can be extended to two or more lines by using HTML5 line breaks <br> for returns.
The full size image caption can extend to the width of the image.
Set the maximum width for the gallery widget.
Set the thumbnail container percentage width to suit the number of thumbnails required per row.
Set the width of the thumbnail containers. This should be equal to or less than the page content width divided by the number of thumbnail images per row.
Set the thumbnail height to suit the required thumbnail image aspect ratio.
Set the module height to suit the modules with the greatest number of caption lines.
Adjust the vertical spacing between the rows if required.
Enter the font family name, check the box if it is Google hosted and choose a suitable web safe fallback font.
Set the caption font size, color, text align and the line height if the captions extend to two or more lines.
Set the background color and opacity for the thumbnail containers.
Set the border width, color and corner radius if required.
Set the box shadow radius and color if required.
Set the large image caption font size and color.
Check or uncheck the boxes to show/hide the navigation arrows, close button and slide advance on click.
This widget is included in the Full Width widget pack.