如何将 Lightbox 集成到闪亮的应用程序中？

Question

我正在构建一个闪亮的应用程序，它以图块的形式呈现大量图像。我想将 Lightbox jScript 集成到我的应用程序中，类似于给出的四个图像集示例。我怎么做。

数据文件here。 styles.css here.

最小工作代码：

UI:

shinyUI(dashboardPage(skin = "green",
                    dashboardHeader(title = "MYAPP"),
                    dashboardSidebar(
                        useShinyjs(),
                        includeCSS("www/styles.css"),
                        includeCSS("www/lightbox.css"),
                        includeCSS("www/lightbox.min.css"),
                        includeScript("www/lightbox.js"),
                        includeScript("www/lightbox.min.js"),
                        sidebarMenu(id = "tabs",
                            menuItem("PICTURES & IMAGES", tabName = "imag", icon = shiny::icon("angle-double-right"))
                            )
                        ),
                    dashboardBody(
                        tabItems(
                            tabItem(
                                tabName = "imag", h3("PICTURES & IMAGES"),
                                fluidRow(
                                        uiOutput("picss")
                                        )
                                )
                        ))

))

服务器代码：

shinyServer(function(input, output) {
      output$picss <- renderUI({
        fluidRow(
            column(12, id="columns",
                   lapply(df1$recipe.link, function(i) {
                       box(width=NULL,
                             title = HTML(paste0("<div class='image-wrap'>
                                                <img src='./images/",
                                                 df1$img[df1$recipe.link == i],"'class=fixed-height'",
                                                 df1$img[df1$recipe.link == i],
                                                "'></div>"           
                             ))
                       )}
                   )))
    })

})

global.R

library(shiny)
library(shinydashboard)
library(shinyjs)
library(base64enc)

df1 <- readRDS("df1.RDS")
filepath <- "www/images/"
dir.create(file.path(filepath), showWarnings = FALSE)
for (i in 1:nrow(df1)){
  if(df1[i,"image_path"] == "NULL"){
    next
  }
  testObj <- strsplit(df1[i,"image_path"],",")[[1]][2]
  inconn <- testObj
  outconn <- file(paste0(filepath,"image_id",df1[i,"id"],".jpg"),"wb")
  base64decode(what=inconn, output=outconn)
  close(outconn)
}

Answer 1

如果你想重现四张图片集（在你的情况下是三张图片），这就是我能够做到的。

在 ui.R 中，我使用 tagList 来包含所有必要的组件。注意 Lightbox instructions。入门的第3点lightbox.js应该放在正文的底部。

请确保为 inlcudeCSS 和 includeJS 放回正确的路径，因为我已经更改了它们。

ui.R

    library(shiny)

    shinyUI(tagList(
            tags$head(
                    useShinyjs(),
                    includeCSS("www/css/styles.css"),
                    includeCSS("www/css/lightbox.css")
            ),
            dashboardPage(skin = "green",
                          dashboardHeader(title = "MYAPP"),
                          dashboardSidebar(

                                  sidebarMenu(id = "tabs",
                                              menuItem("PICTURES & IMAGES", tabName = "imag", icon = shiny::icon("angle-double-right"))
                                  )
                          ),
                          dashboardBody(
                                  tabItems(
                                          tabItem(
                                                  tabName = "imag", h3("PICTURES & IMAGES"),
                                                  fluidRow(
                                                          uiOutput("picss")
                                                  )
                                          )
                                  ))


    ),
    includeScript("www/js/lightbox.js")
    ))

server.R

    library(shiny)
    shinyServer(function(input, output) {
            output$picss <- renderUI({
                    fluidRow(
                            column(12, id="columns",
                                   lapply(df1$recipe.link, function(i) {
                                           box(width=NULL,
                                               title = HTML(paste0('<div class="image-wrap"><a href="images/',
                                                                   df1[df1$recipe.link == i, 6],
                                                                   '" data-lightbox="image-1" data-title="My caption"><img border="0" alt="" class="fixed-height" src="images/'
                                                                   ,df1[df1$recipe.link == i, 6],'"></a></div>'))

                                           )}
                                   )

                                   ))
            })

    })

global.R不变。

如果有帮助请告诉我。

如何将 Lightbox 集成到闪亮的应用程序中？

How to integrate Lightbox in a shiny application?

image

lightbox

shiny