A CSS grid layout with 2, 3 or 4 columns in a row.
At the first break point the layout has 2 columns 2 rows and on mobile phones in portrait mode the layout is a single column.
When there are 3 items the last one is centered in row 2 below the break point by checking a box.
AnimationThe slide up, staggered animation when in the viewport is an option.
Each item has an image with alt text, a heading, optional span, text and an optional link.
Spans have their wn controls for font size and color.
Links can open internal or external pages and have a new window option.
Links are placed at the bottom of the container so that they line up despite varying amounts of content.
Row [2]
Each item has a round image with alt text, a name field, title field and optional phone and email functions.
The image has a slider to adjust its percentage width and can have a border and/or a box shadow.
![Slide [1]](ewExternalFiles/beach-1200.jpg)
There's little point in showing a large grid of images - especially on responsive pages, This lightbox slideshow is opened from a single small image. It can display a single large image or up to 48 images.
INFO![Slide [2]](ewExternalFiles/sbx-1.jpg)
![Slide [3]](ewExternalFiles/sbx-2.jpg)
![Slide [4]](ewExternalFiles/sbx-3.jpg)
![Slide [5]](ewExternalFiles/sbx-4.jpg)
The image can be positioned left of right and the text can be above or below it on screen widths below the break point. The image has an optional cale on hover animation.
Caption Styles
The default style for the slide captions is font family Verdana, font size 15px and font color #FFFFFF (white). By checking a box, the caption font will inherit the font family set for the grid overlay and it has its own controls for font size and color.
Images
The slideshow images are responsive up to the width of the image file and are lazy loaded. There is a checkbox to allow preloading of the previous and next images for a better viewing experience.
There are checkboxes for removing the overlay and to disable right click.
Size
The slideshow images can be of varying size and aspect ratio. There are controls for adjusting both the width and the height ratio to compensate for images with very high or low aspect ratios. The range of the sliders is from 80 to 99%. The default setting is 90% for both sliders.
Scale To Ratio
Checking this box will scale up images to the ratio set by the width and height ratio controls. For example, a tall, skinny image like slide [5] will fill the viewport height if the height ratio is set to 99% but the caption will not be in view if its position is set to "outside".
Navigation
The slider is navigated using directional arrows, grab and drag or keyboard arrows on computers and by swiping on mobile devices.
The "fade" transition can be changed to "slide" and the transition time is set in milliseconds.
The optional slide counter appears at the top left.