如何在鼠标悬停时或在 RShiny 的 rhandsontable 单元格中显示的图像上单击事件时，在弹出窗口 window 中显示放大图像？

Question

我想在 rhandsontable 单元格中显示的图像上显示鼠标悬停或单击事件时显示放大的弹出图像，类似于在 DT table.

我想显示 table 中显示的图像的弹出图像，如下所示：

library(rhandsontable)

DF = data.frame(
  comments = c(
    "I would rate it &#x2605;&#x2605;&#x2605;&#x2605;&#x2606;",
    "This is the book about JavaScript"
  ), 
  cover = c(
    "http://ecx.images-amazon.com/images/I/51bRhyVTVGL._SL50_.jpg",
    "http://ecx.images-amazon.com/images/I/51gdVAEfPUL._SL50_.jpg",
 ),
 stringsAsFactors = FALSE
)

rhandsontable(DF, allowedTags = "<em><b><strong><a><big>", 
              width = 800, height = 450, rowHeaders = FALSE) %>%
  hot_cols(colWidths = c(200, 80)) %>%
  hot_col(1, renderer = htmlwidgets::JS("safeHtmlRenderer")) %>%
  hot_col(2, renderer = "
    function(instance, td, row, col, prop, value, cellProperties) {
      var escaped = Handsontable.helper.stringify(value),
        img;
  
      if (escaped.indexOf('http') === 0) {
        img = document.createElement('IMG');
        img.src = value; img.style.width = '80px'; img.style.height = '80px';
  
        Handsontable.dom.addEvent(img, 'mousedown', function (e){
          e.preventDefault(); // prevent selection quirk
        });
  
        Handsontable.dom.empty(td);
        td.appendChild(img);
      }
      else {
        // render as text
        Handsontable.renderers.TextRenderer.apply(this, arguments);
      }
  
      return td;
    }")

Answer 1

这里有一个 solution，它将使元素（图像或图形）on-click 事件在视口中居中 - 浏览器 window。
请注意小改动（为了更好的图像显示）：_SL500_.jpg 和 img.style.width = 'auto';.

library(magrittr)
library(htmlwidgets)
library(rhandsontable)

DF = data.frame(
  comments = c(
    "I would rate it &#x2605;&#x2605;&#x2605;&#x2605;&#x2606;",
    "This is the book about JavaScript"
  ), 
  cover = c(
    "http://ecx.images-amazon.com/images/I/51bRhyVTVGL._SL500_.jpg",
    "http://ecx.images-amazon.com/images/I/51gdVAEfPUL._SL500_.jpg"
 ),
 stringsAsFactors = FALSE
)

rhandsontable::rhandsontable(DF, allowedTags = "<em><b><strong><a><big>", 
callback = htmlwidgets::JS(

"$(document).ready(function() {
    $('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
    // onClick function for all plots (img's)
    $('img:not(.zoomImg)').click(function() {
      $('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
      $('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
    });
    // onClick function for zoomImg
    $('img.zoomImg').click(function() {
      $('.zoomDiv').css({opacity: '0', width: '0%'}); 
    });
  });"

),
              width = 800, height = 450, rowHeaders = FALSE) %>%
  hot_cols(colWidths = c(200, 80)) %>%
  hot_col(1, renderer = htmlwidgets::JS("safeHtmlRenderer")) %>%
  hot_col(2, renderer = "
    function(instance, td, row, col, prop, value, cellProperties) {
      var escaped = Handsontable.helper.stringify(value),
        img;
  
      if (escaped.indexOf('http') === 0) {
        img = document.createElement('IMG');
        img.src = value; img.style.width = 'auto'; img.style.height = '80px';
  
        Handsontable.dom.addEvent(img, 'mousedown', function (e){
          e.preventDefault(); // prevent selection quirk
        });
  
        Handsontable.dom.empty(td);
        td.appendChild(img);
      }
      else {
        // render as text
        Handsontable.renderers.TextRenderer.apply(this, arguments);
      }
  
      return td;
    }")

输出：

如何在鼠标悬停时或在 RShiny 的 rhandsontable 单元格中显示的图像上单击事件时，在弹出窗口 window 中显示放大图像？

How to display a scaled up image in an popup window on mouse hover or on click event on an image displayed in a rhandsontable cell in RShiny?

javascript

r

shiny