Simple Image Gallery with display: grid; and object-fit: cover;

On the Full Stack Belgium Slack channel, user @Brammm recently asked how to create a simple image gallery. Anyone have a favorite way of making an image grid with CSS? I’d like one of those “fancy” ones where no matter the aspect ratio of the image, they all have the same gap between them. While …

Fluidbox

I adore the smooth transition offered by Medium’s lightbox module — no disruptive modal window, and opening/closing of the lightbox is intuitive and straightforward. So I tasked myself with a little challenge — replicate it, and improve on it, if possible. CSS transitions and transforms FTW Fluidbox Demo → Fluidbox Source (GitHub) → Fluidbox Explanation →

Gamma Gallery: A Responsive Image Gallery

Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account. Both the grid and lightbox are responsive. Gamma Gallery: A Responsive Image Gallery Experiment → Gamma Gallery Demo →

My Code Snippet : Automatically start Lightbox on page load (autoFireLightbox)

Ever wanted to automatically start Lightbox so that it shows an image immediately after the page has loaded? It’s possible! Someone posted a little Javascript Code Snippet that provides this functionality in the Lightbox Forums. Although the code is OK, it requires editing Lightbox.js, which will of course break when a new version is released …