Between yesterday and today I have made some upgrades to the website. Some of the changes help in mostly aesthetic and basic functional ways and one change has made some pages on my site way faster.

The changes were all pretty much related to the image gallery pages. In the past I was using a javascript plugin called "Magnific Popup" to provide the basic lightbox style functionality. However, I found it was a bit clunky to use and fairly slow.

So the first change that I made was to straight up replace the Magnific Popup libraries with the upgraded original lightbox implementation, "Lightbox2". The libraries I used can be found here:

I find Lightbox2’s interface to run a bit smoother than Magnific Popup and it works better on my phone. In the modal view mode just touch/click on the right side of the image to go to the next image, touch/click the left side of the image to go to the previous one and touch/click outside the image itself to close the gallery. Simple.

Another benefit of the lightbox2 implementation is that it lets me use smaller thumbnail images for each picture and then just a link to the fullsize image. The lightbox2 code does the rest. This way when you navigate to the main gallery page you can see all the images in thumbnail form, which loads way quicker than telling your browser to resize the fullsized images on the fly, and then you get to see the full thing when opening the lightbox gallery.

Part of using thumbnails meant that I had to learn how to use ImageMagick to create appropriately sized thumbnails for each of my pictures. So far I know how to do it manually but I now want to add an escadrille task to automatically generate any thumbnails on the fly for pictures that I haven’t created permenant thumbnails for yet. I’ll work on that later.

Along with the different way of displaying images on the gallery pages I needed to modify the constrtuction of the gallery pages in the Escadrille gallery task. So now instead of creating galleries compatible to the old Magnific Popup plugin it now creates pages compatible with lightbox. That particular change can be seen here:

The last change that I made was in the footer of my website. Rather than linking to the Magnific Popup I changed the link to lightbox.

So there you go. A fairly small change in the grand scheme of things but I have already found that the galleries are way easier to look through on my phone or tablet. I’ll count that as a win!

" "