Follow-up question to "Rmarkdown image gallery": neither pixture nor slickr displays correctly in r shiny app

Question

I have a follow-up question to the provided solutions to

Rmarkdown image gallery.

I have tried both approaches (pixture and slickr) in my R Markdown file using images stored locally on my computer. When I knit the markdown file to html, both solutions work absolutely fine.

Next, I wanted to use the R Markdown file within a shiny app, here is the code I used:

Here is my UI code:

tabPanel(title = "Certificates",
           tabPanel(title = "Certificate Gallery",
                    uiOutput("certificate_gallery")))

And here is my server code:

output$certificate_gallery <- renderUI({
    rmd2UI("www/Gallery_Certificates.Rmd")
  })

Once I run the shiny app, the app produces the following output:

• pixture: shiny displays an empty rectanglar, i.e. the images are not being loaded.
• slickR: shiny displays the first couple of images, but both the arrows and dots to click through additional images are not responsive in the app (they are both displayed, but they do not respond).

I cannot figure out how to fix this problem - can somebody help me out?

I should mention that this is the first shiny app I am building, so please keep that in mind when answering ;-)

Thanks a lot in advance, Andrea

Answer 1

I just got it to work:

Within the markdown file, I set up the slickr carousel:

library(htmlwidgets)
library(slickR)

paths <- c(
  "first_pic.png",
  "second_pic.png",
  "third_pic.png",
  "fourth_pic.png",
  "fifth_pic.png",
  "sixth_pic.png",
  "seventh_pic.png",
  "eight_pic.png"
)

opts <- settings(
  dots = TRUE,
  initialSlide = 0,
  slidesToShow = 1,
  slidesToScroll = 1, 
  focusOnSelect = TRUE
)

slickR(obj = paths, height = 625, width = "95%") + opts

Then, I used the following code in the UI:

shinyUI(navbarPage(
...,
 tabPanel(title = "title",
           tabPanel("html", tags$iframe(src = "markdownfile.html", width = "100%", height = 1000, style = "border:none;"))),
...
)