Shiny Image Gallery Examples

Matt Johnson

DRAFT

Recently I had to implement an image gallery within a shiny application. A simple grid of small images where clicking opens the fullscreen image. Nothing complicated, but I did have several requirements:

  1. The gallery needed to render from a folder of images
  2. The gallery interface and thumbnails needed to be responsive
  3. The gallery needed to link to other shiny UI
  4. The fullsize image should be zoomable to see the full resolution.

There is a wide variety of javascript image gallery implimentations. Here I will detail minimalist implimentations of Lightbox and PhotoSwipe. Lightbox was choosen as it seems easiest to impliment and many other JS libraries are based on it. Photoswipe is another very popular implimentation with a very nice UI, touch integration and extensive API. Both are available under MIT licences.

The examples discussed here have been built into a working shiny app so you can see the functionality of each. Code for the app is on Github.

Data Preparation

images <- data.frame(src = list.files('www/img')) %>%
  tidyr::separate(col = 'src', c('txt', 'date', 'time', 'msec'), sep = '_|\\.', remove = FALSE) %>%
  rowwise() %>%
  mutate(date = lubridate::ymd(date),
         key = hashids::encode(1e3 + as.integer(msec), hashid_settings(salt = 'this is my salt')))