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:

---
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>')
    }
  )