A shiny gallery component

Create a gallery to display images or photos

texts, hrefs, images Must have the same length

If there is any image that you do not want to add links, use "" to occupy the space, e.g

hrefs = c("https://xxx.com", "", "https://xxx.com")

If the link is empty, there will be no hover effect on that image, and you cannot click it.

Similar to hrefs, for the texts, use "" to occupy space

gallery(
  texts,
  hrefs,
  images,
  Id = NULL,
  title = "Gallery",
  title_color = "#0275d8",
  image_frame_size = 4,
  enlarge = FALSE,
  enlarge_method = c("inline", "modal"),
  target_blank = FALSE,
  obj_fit = "fill",
  style = ""
)

Arguments

texts

vector of labels under each image

hrefs

vector of links when each image is clicked

images

a vector of image sources, can be online URLs or local resource paths.

Id

ID of this gallery

title

Title of gallery

title_color

Title color

image_frame_size

integer, 1-12, this controls width. How large is each image. 12 is the whole width of the parent container and 1 is 1/12 of the container. Consider numbers that can be fully divided by 12, like 1 (12 per row), 2 (6 per row), 3 (4 per row), 4 (3 per row), 6 (1 per row)or 12 (if you want only 1 image per row).

enlarge

bool, when click on the image, enlarge it? If enlarge is enabled, click the photo will enlarge instead of jump to the link. Only the title below contains the link if enlarge is enabled.

enlarge_method

how the photo is enlarged on click, one of "inline" -- within the gallery change the size of photo to 12, "modal" -- display photo in a pop-up modal.

target_blank

bool, whether to add target="_blank" to the link?

obj_fit

string, the CSS property "object-fit" of images. This is helpful to deal with stretched images. Read more on CSS documents. Default is "fill", and other options are "contain", "cover", "none", "scale-down".

style

additional CSS style you want to add to the most outside component "div"

Value

a gallery component

Details

modal enlarge

When view the modal enlarged images, click the "X" button or anywhere outside the image to close the full screen view.

Examples

if(interactive()){
  texts <- c("p1", "p2", "", "p4", "p5")
  hrefs <- c("https://github.com/lz100/spsComps/blob/master/img/1.jpg?raw=true",
             "https://github.com/lz100/spsComps/blob/master/img/2.jpg?raw=true",
             "",
             "https://github.com/lz100/spsComps/blob/master/img/4.jpg?raw=true",
             "https://github.com/lz100/spsComps/blob/master/img/5.jpg?raw=true")
  images <- c("https://github.com/lz100/spsComps/blob/master/img/1.jpg?raw=true",
              "https://github.com/lz100/spsComps/blob/master/img/2.jpg?raw=true",
              "https://github.com/lz100/spsComps/blob/master/img/3.jpg?raw=true",
              "https://github.com/lz100/spsComps/blob/master/img/4.jpg?raw=true",
              "https://github.com/lz100/spsComps/blob/master/img/5.jpg?raw=true")
  library(shiny)

  ui <- fluidPage(
    column(
      6,
      gallery(texts = texts, hrefs = hrefs, images = images, title = "Default gallery"),
      spsHr(),
      gallery(texts = texts, hrefs = hrefs, images = images,
              image_frame_size = 2, title = "Photo size"),
      spsHr(),
      gallery(texts = texts, hrefs = hrefs, images = images,
              enlarge = TRUE, title = "Inline enlarge"),
      spsHr(),
      gallery(
        texts = texts, hrefs = hrefs, images = images,
        enlarge = TRUE, title = "Modal enlarge",
        enlarge_method = "modal",  obj_fit = "cover"
      )
    )
  )

  server <- function(input, output, session) {

  }

  shinyApp(ui, server)
}