0
338
Views¿Cómo mostrar una imagen ampliada en una ventana emergente al pasar el mouse por encima o al hacer clic en un evento en una imagen que se muestra en una celda de rhandsontable en RShiny?
Me gustaría mostrar una imagen emergente ampliada al pasar el mouse por encima o al hacer clic en una imagen que se muestra en la celda rhandsontable similar a la que se muestra aquí en la tabla DT.
Me gustaría mostrar la imagen emergente para la imagen que se muestra en la tabla creada como se muestra a continuación:
library(rhandsontable) DF = data.frame( comments = c( "I would rate it ★★★★☆", "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; }")
·
Santiago Trujillo
1 answers
Answer question0
Aquí va una solución que centrará un elemento (imagen o gráfico) en un evento de clic en la ventana gráfica: la ventana del navegador.
Tenga en cuenta los pequeños cambios (para una mejor visualización de la imagen): _SL500_.jpg e img.style.width = 'auto'; .
library(magrittr) library(htmlwidgets) library(rhandsontable) DF = data.frame( comments = c( "I would rate it ★★★★☆", "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; }") Producción: 
·
Santiago Trujillo
Report
Answer question