How can I enable the Quarto lightbox feature in `gt` tables that have images?

[pedrotercero3]

Hi all,

Quarto 1.4 has a lightbox feature that makes images clickable to see a larger version with a zoom animation. However, when adding images to a gt table (using the local_image() or ggplot_image() functions) the lightbox behavior does not apply to them. Is there a way to extend the lightbox functionality to does images too? Thanks!

Here is a minimal reprex with a Quarto document:

````r --- title: "gt lightbox test" format: html: lightbox: true editor: visual --- ```{r} library(tidyverse) library(gt) ``` # This plot image works with lightbox ```{r} plot_object <- ggplot( data = gtcars, aes(x = hp, y = trq, size = msrp) ) + geom_point(color = "blue") + theme(legend.position = "none") plot_object ``` # The plot in this table doesn't work with lightbox ```{r} dplyr::tibble( text = "Here is a ggplot:", ggplot = NA ) |> gt() |> text_transform( locations = cells_body(columns = ggplot), fn = function(x) { plot_object |> ggplot_image(height = px(200)) } ) ``` ````

[matthewcurrier]

I've been trying to do something similar myself and managed to get this to work.

Try this...

dplyr::tibble(
  text = "Here is a ggplot:",
  ggplot = NA
) |>
  gt() |>
  text_transform(
    locations = cells_body(columns = ggplot),
    fn = function(x) {
      p <- plot_object |>
        ggplot_image(height = px(200))
      paste0('<a href="" class="lightbox" data-glightbox="title: Your title; description: description here; descPosition: left; type: image; effect: fade; width: 900px; height: auto; zoomable: true; draggable: true;">', p, '</a>')
    }
  )