CSS Lightbox Overlay

iaian7 » code » webcode   John Einselen, 20.06.18 (updated 20.10.18)    

Designed as a more modern and much lighter-weight alternative to the antiquated mediaboxAdvanced. While this relies exclusively on simple HTML and CSS for layout and animation, it does require Javascript to allow for automated play and pause when opening or closing video layers, and override default :target behaviour to set states. This stops the browser history from filling up with endless anchor links, but if javascript is disabled, the :target behaviour still works as expected and videos can be manually played or paused as desired (they just won’t stop playing automatically when the layer is closed).

image 1image 2image 3Vimeo video image 1 image 2 image 3

YouTube and Vimeo API scripts are loaded in the header, while the iframes include onload actions to initialise the APIs, and the anchor elements include onclick actions for setting status. This system includes none of the media titles or content detection of mediaboxAdvanced, and there are some limitations to this mostly-CSS approach, but in general it’s pretty usable. Check out the CodePen.io page for more details and the source code.

CodePen.ioCSS lightbox overlay source

You can also check out a demo using next/previous buttons to navigate through groups of overlays. This would require a bit more development to make it useful (especially developing the CMS integration to make it automatic), but is a starting point for further investigation.

CodePen.ioCSS lightbox overlay navigation

bookmark