Responsive image gallery

Improving the responsive image gallery.

Fixing the issue that was introduced in the last post and adding thumbnail support for faster loading.

In the last post we added a lightbox style image viewer that would open the image in a pop up lightbox style view. It was pretty simple but it also broke the responsiveness of the site by hard coding in some size values. Today we will fix that and also look at how we can use thumbnails to make the gallery load fast, while retaining the ability to finally open the full size image if desired.

So let’s start with the stylesheet. I’m removing the hard coded sizes in the stylesheet. We’ll use our JavaScript call to show the lightbox to set the size based on the users screen size.

My new css for the image viewer is:

#darkbox { position:absolute; top:0; left:0; background-color:#333; overflow: hidden; text-align:center; }
  .darkboximg { padding:5% 5% 2% 5%; }
  .fullsizelink { margin-bottom:2rem; }
  .fullsizelink a { color:white; }

No more sizes set.

Next let’s look at some changes to the HTML.

Because this has been a HTML and JavaScript only project and there is no server side that we’re…