光沢のあるアプリケーションに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

あなたが再現しようとしている場合4イメージセt（あなたの場合は3つの画像）これは私がそれをやり遂げた方法です。

ui.Rには、すべての必要なコンポーネントを含めるためにtagListを使用しています。 by 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は変更されません。

これが役立つかどうか教えてください。