Добавить поповер, содержащий изображение в таблице - Shiny - PullRequest
Новая
       8

Добавить поповер, содержащий изображение в таблице - Shiny

0 голосов
/ 29 сентября 2018

У меня есть таблица, которая отображает изображения и метрики, соответствующие этим изображениям.Я хочу отобразить изображения небольшого размера (чтобы таблица была компактной), а затем использовать функцию всплывающего окна, чтобы навести курсор на изображение, а затем показать изображение в большем размере.

У меня есть способ отобразитьизображения небольшого размера (с шириной до 75 пикселей), но я не могу придумать, как добавить поповер с изображением при использовании глянца.

Любая помощь?Заранее спасибо!

Вот пример упрощенной таблицы: 

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)

1 Ответ

0 голосов
/ 01 октября 2018

Это не совсем то, что вы просили, но увеличивает размер изображения, наводя на него курсор.Так что это не настоящий поповер, просто какое-то преобразование CSS.

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");
        });
      })'    
    ))
}
...