Question

我正在构建一个闪亮的应用程序，以tile的形式呈现大量图像。我想将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。开始使用lightbox.js的第3点应该包含在身体的底部。

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

ui.R

<div>
  <input type="text" currencyInput [ngModel]="initModel" name="number"/>
</div>

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

global.R不变。

如果有帮助，请告诉我。

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

1 个答案: