javascript - Generate table and clickable images in Shiny R - Stack Overflow

admin管理员组

文章数量:1404625

I need to do the following in R:

1) Dynamically(for X images in ...) create a table/grid where I display them, for example in a 4xN table.

2) Make each of those images clickable, so that it feeds its name into a function in R. For example if we clicked on a monkey, it is supposed to call a function: selected(monkey.jpg).

I need to do the following in R:

1) Dynamically(for X images in ...) create a table/grid where I display them, for example in a 4xN table.

2) Make each of those images clickable, so that it feeds its name into a function in R. For example if we clicked on a monkey, it is supposed to call a function: selected(monkey.jpg).

• javascript
• html
• r
• shiny
• shiny-server

Share Improve this question Follow asked Mar 31, 2014 at 22:00 user1577191user1577191 10311 silver badge88 bronze badges 7

• 1 I don't know, seems like a legit question to me. Thinking... – Joe Cheng Commented Mar 31, 2014 at 22:20
• When you say "dynamically", will the images always be the same for the app? Or could the images change when you hit Reload in the browser, or could the list of images be reactive to an input or something? (It's doable any which way, just simpler code if the images will always be the same) – Joe Cheng Commented Mar 31, 2014 at 22:24
• I mean, there are folders with images, and the UI should just populate it with them. Over time some images may be added, so each time the page is reloaded it should essentially count the images and scan the folders with a for loop. I know how to do the R part, I just dont know what to put in a loop in R to make it appear :). – user1577191 Commented Mar 31, 2014 at 22:27
• @JoeCheng The mouseover text on the down vote arrow includes "does not show any research effort". That is interpreted by many on SO, particularly within the R tag, that the OP should display some sort of an attempt at a solution so that we have something concrete to help them with. Otherwise, questions quickly descend into just specifications for output that we are required to produce. – joran Commented Mar 31, 2014 at 22:29
• 2 Look, I'm simply explaining why I think some people may have down voted (I did not). Your question contains no actual code that represents an attempted solution on your part. That's how many people think of "research" here. Otherwise, as I mentioned, we are inundated with questions that consist of nothing more than "I need to build X, Y and Z. How do I do it?" which doesn't feel like a question so much as a demand for us to do work for others. I realize that may not have been your intent, but that is how many might see it. – joran Commented Mar 31, 2014 at 22:37

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 9

Feels like cheating but using a little JS is the easiest way.

In your ui.R, put this somewhere (like inside your mainPanel or whatever):

uiOutput("imageGrid"),
tags$script(HTML(
  "$(document).on('click', '.clickimg', function() {",
  "  Shiny.onInputChange('clickimg', $(this).data('value'));",
  "};"
))

In your server function:

output$imageGrid <- renderUI({
  fluidRow(
    lapply(images, function(img) {
      column(3, 
        tags$img(src=paste0("images/", img), class="clickimg", data-value=img)
      )
    })
  )
})

Then in your server function you can access input$clickimg to determine the last clicked images. Keep in mind this'll be a reactive value (just like any other input), so you have to access it from within a reactive expression or output rendering function (or observer if you're a more advanced Shiny user). Oh and the initial value will be NULL so don't forget to check for that too.

本文标签： javascriptGenerate table and clickable images in Shiny RStack Overflow