View RSS Feed

Beverleyh

Paginated Responsive Modal Gallery (PHP/CSS3/JS)

Rating: 104 votes, 5.00 average.
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)

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 web page to grab the JS, CSS and HTML markup: http://fofwebdesign.co.uk/freebies_f...nav-pag-js.htm

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)

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: http://fofwebdesign.co.uk/freebies_f...nav-pag-js.php

Thanks for reading!

Submit "Paginated Responsive Modal Gallery (PHP/CSS3/JS)" to del.icio.us Submit "Paginated Responsive Modal Gallery (PHP/CSS3/JS)" to StumbleUpon Submit "Paginated Responsive Modal Gallery (PHP/CSS3/JS)" to Google Submit "Paginated Responsive Modal Gallery (PHP/CSS3/JS)" to Digg

Comments

  1. Beverleyh's Avatar
    To demonstrate the on-demand image script, see this YSlow component report showing only 4 images downloaded - 3 thumbs from the first page of the gallery, plus the header logo (there are 18 gallery images in total!).

    And the YSlow component report showing only 9 images downloaded - 8 thumbs from the first page of the PHP gallery, plus the header logo (there are 80 gallery images in total!).

    Now considering that the 80 images in the PHP gallery (40 thumbs, 40 enlargements) weigh in at just over 3MB altogether, that's a BIG difference for a page that YSLOW reports as 144.5kb. The on-demand image script saves around 2.85MB
    Updated 07-10-2014 at 12:13 PM by Beverleyh (saving stats added)