Aug 10, 2021 1 min read

SPFx Lightbox Image Gallery web part, v1.0.0

Introducing the Lightbox Image Gallery web part for SharePoint, developed using SharePoint Framework (SPFx) and PnPjs. It renders images and folders from a document library as albums, with a Lightbox full-screen effect

SPFx Lightbox Image Gallery web part, v1.0.0

We sometimes create an intranet for our clients and, besides the company rolodex, having a nice way of visualizing photos from company events is an always returning requirement. Unfortunately, SharePoint Online still doesn't have a web part that visualizes this in a way my clients and I find acceptable. So I created my own, and open-source it.

I started with a very limited set of requirements:

  • The web part should be able to connect to any Document Library or Picture Library within the SharePoint site
  • It should visualize folders on top of the library, representing different albums (eg. folders Retreat 2019 and Team Building Diving to represent sets of related images)
  • It should allow for subfolders to be rendered as well, and provide a breadcrumb to navigate upwards
  • Underneath the folders it should render the actual images from that folder as thumbnails
  • Clicking on a thumbnail should open the full image in a Lightbox styled rendering, allowing navigation inside the album

All of the requirements are fulfilled in our solution using SharePoint Framework, PnPjs, @pnp/spfx-controls-react and react-lightgallery.

The result

The code and package

The code is open sourced and available on a GitHub repository and there is also a prebuilt package in the Releases section on GitHub so you can get started easily.

This code is provided as-is without warranty of any kind, either express or implied, including any implied warranties of fitness for a particular purpose, merchantability, or non-infringement.
Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to Yannick Reekmans.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.