How to integrate Lightbox in a shiny application? - image

Question

I am building a shiny application that renders large number of images in the form of tiles. I want to integrate Lightbox jScript into my application, something similar to the four image set example given. How do i do that.
The data file here.
The styles.css here.
The minimal working codes:
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")
)
)
))
))
The server code:
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>"
))
)}
)))
})
})
The 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

If you are trying to reproduce the Four image set (in your case three images) this is how I was able to do it.
In the ui.R i have use tagList to include all the necessary components. Note the by Lightbox instructions. Point 3 of getting started lightbox.js should be included at the bottom of the body.
Just be sure to put the correct paths back for inlcudeCSS and includeJS since I have changed them.
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 is unchanged.
Let me know if this helps.