I have a table that displays images and metrics corresponding to those images. I want to display the images in a small size (so the table is compact) and then use the popover feature to hover over the image and then show the image in a bigger size.
I got a way to display the images in a small size (forcing width to 75px), but I can't figure out a way to add a popover with an image when using shiny.
Any help? Thanks in advance!
Here is a simplified table as an example:
library(shiny)
library(shinydashboard)
library(DT)
# Data ------------------------------------------------------------------
dt <- data.frame(rank = c(1, 2, 3, 4, 5),
image_url = c('https://images.unsplash.com/photo-1521671413015-ce2b0103c8c7?ixlib=rb-0.3.5&s=45547f67f01ffdcad0e33c8417b840a9&auto=format&fit=crop&w=667&q=80',
"https://images.unsplash.com/photo-1520699697851-3dc68aa3a474?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef15aee8bcb3f5928e5b31347adb6173&auto=format&fit=crop&w=400&q=80",
"https://images.unsplash.com/photo-1501925873391-c3cd73416c5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=379e4a0fffc6d11cd5794806681d0211&auto=format&fit=crop&w=750&q=80",
"https://images.unsplash.com/photo-1493019352063-500af484329e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f1e0ce442afdcaf2cdc4fde83012346e&auto=format&fit=crop&w=750&q=80",
"https://images.unsplash.com/photo-1422056551295-3b38e8a20462?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3eb1f67f2b9c1c26435fc584a0a1f75d&auto=format&fit=crop&w=667&q=80")
)
img_dt <- dt %>%
mutate(img = paste0("<img class = small-img src='", image_url, "'/>"))
# Dashboard ----------------------------------------------------------------
ui <- dashboardPage(
dashboardHeader(title = "Test"),
dashboardSidebar(),
dashboardBody(
tags$head(
tags$style(
HTML(
"img.small-img {
max-width: 75px;
}")
)
),
dataTableOutput("example_table")
)
)
server <- function(input, output) {
output$example_table <- renderDataTable({
img_dt},
escape = FALSE)
}
shinyApp(ui = ui, server = server)
This doesnt exactly do what you asked, but it increases the size of the picture by hovering over it. So its not a real popover, just some css transformation.
server.R
server <- function(input, output) {
output$example_table <- renderDataTable({
img_dt},
escape = FALSE,
callback=JS(
'table.on("mouseover","tr", function() {
$(".small-img").hover(function(){
$(this).css("transform", "scale(3, 3)");
}, function(){
$(this).css("transform", "none");
});
})'
))
}