If you have (or are considering building) a WordPress Web site, and if your enterprise revolves around products or services that lend themselves to visual representation, I don’t think you could do much better than choosing the FooGallery WordPress Photo Gallery plugin.
In the video embedded herein, I show you what I mean with examples from three galleries I’ve created.
Watch the Video Now: FooGallery for WordPress
The first two examples use the Pro version of FooGallery and the FooGallery Pro Lightbox. The third example uses the free version of FooGallery and the FooBox Free lightbox.
Beachcourt Villa Gallery: FooGallery for WordPress
The first example is from the live Web site of BeachcourtVilla.com.
Table of Contents
The client chose to group images in five (5) different galleries by topic. The galleries are listed in a table of contents at the top (using a separate plugin, Easy Table of Contents). You can click on a link in the table of contents to jump down to the topic (or gallery) you want to see, or you can simply scroll down the page.
Lazy Loading
Notice the “lazy loading” as I scroll down. What this means is that FooGallery doesn’t load gallery images until you “get to them”, so that page-load time isn’t adversely affected by images that aren’t even visible yet. (Lazy loading is a feature of the free plugin as well.)
Gallery Customizations
The gallery template used for all five galleries is the “Justified” gallery — one of six (6) that come with both the free and Pro version of FooGallery. Each gallery template has a host of customization options, the universe of which varies by template and also by version (free or Pro).
Lightbox
When I hover over a thumbnail, a caption appears along with an icon indicating that the thumbnail can be clicked to load the “lightbox”.
We configured this particular lightbox to display the current image’s caption at the top left and a “filmstrip” of thumbnails of the other gallery images on the right, along with their captions.
To navigate among images, you can either use the left and right arrows to move sequentially through them, or you can access different images directly by clicking on their thumbnails in the film strip.
In the lightbox you have the options to go full screen and to toggle the visibility of the current image’s caption. To close the lightbox, you click the “X”.
PhotoWork Gallery: FooGallery for WordPress
The photo gallery for PhotoWork also uses the Pro version of FooGallery.
Two Differences
Two differences from the Beachcourt Villa gallery approach jump out immediately:
- First, the template used here is what FooGallery calls the “Polaroid Pro” template; the thumbnails look a bit like old Polaroid photos, as if they were spread out on a table. (Yes, the Polaroid Pro template requires the FooGallery Pro plugin.)
- Secondly, this gallery utilizes filtering — a Pro feature.
Filtering
Notice the gallery names along the top, along with numbers indicating how many images are in each gallery. The initial view loads thumbnails from all galleries: 54 images in total. Notice also the pagination navigation buttons. Since we configured each gallery to display 12 images on a page, we need 5 pages to display all 54 images.
To filter the images for a specific gallery, you simply click on its name along the top.
Lightbox
The lightbox for these galleries is similar to the one used at BeachcourtVilla dot com, with a few small differences:
- the captions, what that they are, display on the bottom left
- the film strip does NOT display captions
- you can “play” (and pause) the images like a slideshow
FooGallery (Free) Demo Gallery: FooGallery for WordPress
Finally, the video shows a gallery I created as a demo, using the FREE FooGallery Plugin and the FooBox Free lightbox.
Like the BeachCourtvilla galleries, this gallery uses the “Justified Gallery” template.
For this demo I added simple temporary placeholder captions for all images except one. Clicking a gallery thumbnail launches the free lightbox viewer, “FooBox Free”. The enlarged image appears with a caption and left-and-right navigation arrows. The filmstrip and full-screen features of the FooGallery Pro lightbox are not supported by the FooBox Free lightbox.
Summing Up
This video and blog post only skim the surface of what FooGallery — and especially FooGallery Pro — can do.
In fact, one of the most exciting features of FooGallery Pro is its support for adding media dynamically from sources other than the WordPress Media Library. There are seven (7) such data sources, and I wrote a blog article about this feature last year.
In almost 3 decades of building Web sites, I’ve implemented Web-site photo galleries in many ways, including custom programming. Since 2007, when I started using WordPress as the platform for most of Web-site projects, I’ve kicked the tires on — and have fallen in and out of love with — a number of WordPress photo gallery plugins, including the classic NextGen Gallery and Responsive Gallery & Lightbox.
While I do maintain an open mind, knowing that a new game-changing image gallery plugin could arrive on the scene any day (or that one I haven’t paid attention to already exists), I’m pretty much sold on FooGallery for now.
And yes: FooGallery Pro is my plugin version of choice. Currently, a one-year single-site license of FooGallery Pro costs $49.99.
I do understand that not everyone can or wants to spend money on WordPress plugins when WordPress itself is free, as are so many excellent plugins.
But remember that the premise of this presentation is that you run an enterprise that revolves around products and services that lend themselves to visual representation.
Whether you’re a builder, painter, graphic artist, dress designer, electrician, photographer, architect — you name it: there’s a good chance that this $50 investment will pay for itself in no time.
Closing
Check out the FooPlugins Web site for demos and feature descriptions. And feel free to contact me if you have questions about implementing a photo gallery for your Web site. Also, if you have your own favorite WordPress photo gallery plugin, I’d like to hear about it.
Leave a Reply