spsComps (version 0.1.0)

gallery: 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"),
  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 screen and 1 is 1/12 of the screen. Consider numbers than can fully divide 12, like 1, 2, 3, 4, 6 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 intead 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.

style

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

Value

a gallery component

Examples

# NOT RUN {
if(interactive()){
  texts <- c("p1", "p2", "", "p4", "p5")
  hrefs <- c("https://unsplash.it/1200/768.jpg?image=251",
             "https://unsplash.it/1200/768.jpg?image=252",
             "",
             "https://unsplash.it/1200/768.jpg?image=254",
             "https://unsplash.it/1200/768.jpg?image=255")
  images <- c("https://unsplash.it/600.jpg?image=251",
              "https://unsplash.it/600.jpg?image=252",
              "https://unsplash.it/600.jpg?image=253",
              "https://unsplash.it/600.jpg?image=254",
              "https://unsplash.it/600.jpg?image=255")
  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)
}
# }