Super Fast Lightbox

Super Fast Lightbox
One of the things I always make sure to include on any of my site designs is a cool way to view larger versions of images, and that usually involves using some sort of "lightbox." Nobody wants to click on an image and have it totally replace the page that they were browsing, or have it open in a new tab, right? Or maybe that's just me.

A lightbox is a cool way to have a full image display on a page without navigating to a new page, and without popping open a new window or a new tab in the process. Many many years ago light boxes were giant monstrosities of javascript and css that seemed to barely ever work when I tried to use them on my sites, but these days thanks to advancements in both js and css they've become a lot more simple to implement.

For my new blog design I went with a super simple lightweight bare bones light box called Lity. Lity boils down to a single css file, and a single javascript file, and was incredibly easy to toss into my design. There aren't any themes, or images, or crazy styles to worry about like so many of the other lightbox solutions I've tried in the past. Once the files are properly included in the html, all you have to do is add a data-lity attribute to a link element (the "a" tag) and Lity takes care of the rest.

Image


I guess that's all there is to this post! Lity is a simple and fast solution to lightboxes, and seems to work well on mobile too which is pretty dang important these days. If you have any other suggestions on lightbox stuff let me know
new comment!

Post your comment!

Name
Email
Comment