How to integrate Lightbox in a shiny application?
<p>I am building a shiny application that renders large number of images in the form of tiles.  I want to integrate <a href="http://lokeshdhakar.com/projects/lightbox2/" rel="nofollow">Lightbox jScript</a> into my application, something similar to the four image set example given. How do i do that.  </p>

<p>The data file <a href="https://drive.google.com/open?id=0B5Ktx_VPzoQ0U2FHYkpEOWpOVGM" rel="nofollow">here</a>.
The styles.css <a href="https://drive.google.com/open?id=0B5Ktx_VPzoQ0UjJsX3p0N003Sm8" rel="nofollow">here</a>.</p>

<p>The minimal working codes:</p>

<p>UI:</p>

<pre><code>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 &amp; IMAGES", tabName = "imag", icon = shiny::icon("angle-double-right"))
                            )
                        ),
                    dashboardBody(
                        tabItems(
                            tabItem(
                                tabName = "imag", h3("PICTURES &amp; IMAGES"),
                                fluidRow(
                                        uiOutput("picss")
                                        )
                                )
                        ))

))
</code></pre>

<p>The server code:</p>

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

})
</code></pre>

<p>The global.R</p>

<pre><code>library(shiny)
library(shinydashboard)
library(shinyjs)
library(base64enc)

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