Blog (my web musings)

Find out what's interesting me, get tips, advice, and code gems that don't fit elsewhere.

Search Blog

Paginated Responsive Modal Gallery (PHP/CSS3/JS)

Details

My modal gallery has evolved and here come versions 4 and 5. Both now include pagination but version 5 is PHP generated to help with maintainability.

First, a recap on the gallery development so far;

Now, so far, this gallery has only been demonstrated using a handful of images, but as we all know, galleries have a habit of growing, and that got me thinking about 3 things (under the limitations of these earlier versions); performance, manageability and maintainability.

Performance

The more images used in the gallery, the greater the number HTTP requests and the bigger the download weight of the web page. Not good for any web page but even more critical on mobile.

Manageability

The more images in the gallery, the greater the amount of screen real-estate used. A huge wall of images may look interesting, but past a certain point, the web page will become overbearing and crash-worthy. And how will touch devices users fair, scroll after scroll after scroll? Finger cramp anyone?

Maintainability

The markup and sequential numbering becomes problematic to edit and throws a serious kink into anyone's ideas for adding new images to the front of the queue.

Which leads me to Version 4: Responsive CSS3 Modal Gallery (with JavaScript on-demand images, keyboard controls + pagination)

Demo

This version of the gallery takes care of the performance and manageability hitch. The scripts in the page break down the gallery into paginated, erm... pages, which reduces the number of images visible on screen and the amount of space used. What's special is that it also blocks out the extra HTTP requests and download weight of ALL hidden images, only downloading them when explicitly requested, and only downloading the thumbs visible on the page at load time. It does that with the previously covered data-src to src attribute switcharoo in <img> tags.

Key Features

  • Includes pagination to split a large gallery into smaller "pages" and make it more manageable
  • Opens an image enlargement in a modal overlay / lightbox (by using the :target selector)
  • Has "previous" and "next" controls to cycle through the gallery from within the modal overlay / lightbox
  • Includes keyboard navigation to move back and forth through the gallery from within the modal overlay / lightbox
  • On a small screen, the "previous" and "next" controls become extra large tappable areas for easy finger jabbing
  • Uses CSS3 transitions to animate a gentle fade effect (on thumbs and modal overlay / lightbox)
  • Includes optional image captions (inside the modal overlay / lightbox)
  • Loads ALL images on demand instead of during initial page load (only those in the first page are loaded by default)
  • Shows a CSS3 loading spinner to indicate that larger images are loading

Compatibility

Modern browsers and IE9+, with alternative markup for IE7/8 to allow those users to view the larger images in a new window.

Please view the source of the demo page to grab the JS, CSS and HTML markup.

PHP Auto-Generation

The last problem is maintainability, and what better way to overcome that than with automatic markup generation, courtesy of PHP.

Please meet gallery Version 5: PHP Responsive CSS3 Modal Gallery (with JavaScript on-demand images, keyboard controls + pagination)

Demo

Markup for the version 5 gallery is auto-generated with PHP, from images in a folder. 2 sets of images are required so there's still a bit of work involved; small ones in a folder called "small/", and big ones in an adjacent folder called "big/" - both should be identically named (i.e. "small/My Pet Cat.jpg", and "big/My Pet Cat.jpg"). For convenience, file names become the image captions, although captions can be turned off if you can't be bothered to rename a load of img files.

Visit the demo page to see the auto-generated gallery and get the PHP.

Thanks for reading!