gallery: A shiny gallery component

In spsComps: 'systemPipeShiny' UI and Server Components

A shiny gallery component

Description

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

Usage

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,
  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?
style	additional CSS style you want to add to the most outside component "div"

Details

modal enlarge

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

Value

a gallery component

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"
      )
    )
  )

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

  }

  shinyApp(ui, server)
}

spsComps documentation built on July 26, 2023, 5:39 p.m.