Lightbox Image & Video
Images
The widget creates rows of three thumbnail images with captions that slide up on hover when viewed on computers. On touch devices like an iPad, the captions are displayed on hover.
Clicking or tapping a thumbnail launches a full size image in a responsive lightbox window. The lightbox is closed using the "X" or by clicking the background overlay.
The thumbnail images can have a border if required. They should all be cropped to the same size before importing them into EverWeb.
The large images can have varying aspect ratios and will be responsive up to the actual width of the images file. An image width of between 1200 and 1600px should be more than enough for most applications.
If images with an aspect ratio lower than 4:3 are used, test the lightbox on an iPad or in the iOS Simulator to make sure they are fully visible.
If a lightbox slideshow is required, use the Hero Lightbox Gallery widget …
Video
The video widget is similar to the image version except that it displays a full transparent overlay on hover. The overlay has fields for the video title and a brief description. When viewed on a tablet device, the overlay appears on page load.
As with the image version, all the thumbnails should be cropped to the same size and aspect ratio. An image width of 240px is ideal.
The lightbox can display both Vimeo and YouTube videos. In the example above, the center thumbnail launches a Vimeo hosted video and the other two are YouTube.
NOTE: The URLs entered into the the box in the widget settings should conform to this for Vimeo …
https://vimeo.com/84674904… and this for YouTube …
https://www.youtube.com/watch?v=4I5zXUOlxuQ