Available on

You can grab it from here: pixcodrops.com/articles/tag...

Last thing, as code overrides don't allow us to create controls like components do, I created variables at the top so everyone can customize the colors and stuff

Made the cute little characters with Adobe Firefly AI, wanted to make them wear costumes with whatever came to my mind first

Optimized it for performance and SEO; so don't worry if you see a lot of code

I integrated an event listener for resizing to make it responsive, you can also use left, right arrow keys to navigate and esc key to close.

On mobile it allows swipes left and right and you can also swipe the image up to close (inspired by iOS closing apps)

It has two modes: withGallery and withSingle, basically, if you apply the withGallery to multiple images on the same pages, you get the arrows when you open any of them and you can see them all;

withSingle basically singles out images and just opens one up with no arrows

It's very easy to integrate as it doesn't require absolutely any new layouts, you basically just apply the code override to any image and it just works

this