quarto-ext/lightbox

Create lightbox treatments for images in your HTML documents.

lightbox's Issues

Lightbox does not work in R DT

Hello there,

Thank you for creating and maintaining this awesome tool! I just tried testing out this plugin, and it works well when the image is not in a DT. You can inject HTML into a DT by setting the escape option to TRUE; however, this option only appears to work with HTML. You cannot pass it markdown. I am not sure if that is the issue or if it is on the DT side, but I cannot embed a lightbox within a DT. As I mentioned before, it works beautifully outside of a DT.

I was able to create a quick workaround by just linking to a local file; however, this is not an ideal long-term solution. Here is a repo you can clone if you want to take a closer look. I would like to embed images as base64, and I really like the idea of a lightbox, modal, or basic image viewer for looking at figures. For testing purposes, you can edit the input file being used to create the DT in data/tiny.tsv.

Thank you again for your time and help! I appreciate it.

Best Regards,
@skchronicles

Error running filter _extensions/quarto-ext/lightbox/lightbox.lua

I tried to use the extension but getting the following error

Error running filter _extensions/quarto-ext/lightbox/lightbox.lua:
[string "---------------------------------------------..."]:1477: attempt to index a string value (local 'v')
stack traceback:
	[string "---------------------------------------------..."]:1588: in field 'addHtmlDependency'
	_extensions/quarto-ext/lightbox/lightbox.lua:123: in function <_extensions/quarto-ext/lightbox/lightbox.lua:118>

any ideas what might be the problem?

feature request: different version of the image when zoomed

I love this extension, thank you, I use it for R visualizations.

It would be nice to be able to show the same visualization but render it with a different figure-size when in the lightbox. E.g. fig-width=2 when small, fig-width=5 when zoomed. As far as I understand this isn't possible right now, but the GLightbox package does include the functionality to show a different image when zoomed.

Citations in image captions not rendered

Thx for contributing this extension — very helpful for my teaching material!
I often use citations within the image captions. Within the lightbox, these are shown as markdown (@Author2022ShortTitle). Is it possible to render these? Maybe related to that issue: The lightbox filter appends "fig:" to the img title.

Thank you for looking at it and possibly fixing it.

Indicate this extension is now built into Quarto 1.4 on README

People may still land here, but I'm guessing we'd prefer them just to use built-in support.

https://quarto.org/docs/prerelease/1.4/lightbox.html

Error running example.qmd

Hello, I am running Quarto version 1.1.251 and installed lightbox into its own RStudio project. Running example.qmd yields this error message:

Error running filter _extensions/quarto-ext/lightbox/lightbox.lua:
_extensions/quarto-ext/lightbox/lightbox.lua:101: attempt to call a nil value (field 'is_format')
stack traceback:

Figure cross-referencing - unable to resolve crossref @fig

Thank you for this very nice extension. Unfortunately, if it is used it removes the figure id, see for example:

![Data and workflow of the first step: Data generation](../../3_Figs_Pyth/2_Task/1_Data_Gen.svg){#fig-fig_4_Data_Gen}

Here you see, the figure has the id "fig-fig_4_Data_Gen". When activating lightbox the figure id is removed and the following error occors:

WARNING: Data/1_Writing/2_Task/1_Data_Gen.html: Unable to resolve crossref @fig-fig_4_Data_Gen

Is it possible to have cross-referencing and lightbox working together?

Set description for lightbox in plot from code chunk

I tried to use lightbox (which is awesome btw!) to describe the output (= plot) of a code chunk but cannot get it to work.

---
title: Simple Lightbox Example
filters:
   - lightbox
lightbox: auto
---

![A Lovely Image](mv-1.jpg){description="This description works perfectly fine!"}

```{r}
#| description: This description is never shown...
plot(1:10, rnorm(10))
```

Is this functionality supported or are there any plans to support it?

How to include a link in the description?

I've tried something like this

![image title](image.png){group="group" description="My description. Code available [on GitHub](repo)"}

But this doesn't work. The linked text is just printed as-is. Is there a way to allow for html links inside of the description?

Is this extension compatible with the revealjs output from Quarto?

Thanks for creating this extension.

I thought that the lighbox interface would be neat to include in a slide show produced with quarto.
I assume that this is not currently supported as none of your examples include this output type?

Problem with self contained document

Hello,

I was looking for a way to zoom on graph in quarto html output and I tried you extension today. Globally, it work well but there is a problem with self included website.

The extension doesn't seem to identify the self-contained option and while the graph can be see correctly in the document, if we click on it, the lightbox open without showing it. Also, I tried to open my picture in another windows but I it only show the message next: "Firefox ne peut trouver le fichier à l’adresse /E:/QUARTO/_site/samples_files/figure-html/unnamed-chunk-3-1.png".

I resolved it bysetting the self-contained to false option but if possible, I hope this will be corrected in a future version.

Thank you for your help.

Help with running GitHub actions?

I'm getting this error when trying to deploy my website that uses lightbox via GitHub action:

Error running filter _extensions/quarto-ext/lightbox/lightbox.lua:
_extensions/quarto-ext/lightbox/lightbox.lua:113: attempt to call a nil value (field 'is_format')

Any suggestions? I can seen lightbox if I run quarto list extensions in the action, but something appears to be wrong. Do I have to activate the extensions somehow?

Cannot resize images anymore

After including lightbox in my Quarto blog, chunk options like fig-width or out-width do not work anymore. Images are always included in full-size.

Even regular Markdown like ![](img.png){fig-align="center" width="70%"} does not react anymore. When I remove lightbox from _quarto.yml, everything works as expected again.

I've just run quarto update extension quarto-ext/lightbox on my blog project but the problem persists. My current workaround is to create a CSS grid manually.

::: {.grid}

::: {.g-col-6 .g-start-4}
![](img.png)
:::

:::

Lightbox disables using figure numbering

When lightbox is used in a page, figures are not numbered anymore (https://quarto.org/docs/authoring/cross-references.html).

Normally, the following will result in a caption below the figure that reads 'Figure 1: Elephant'.

![Elephant](elephant.png){#fig-elephant}

Using lightbox on that page will result in a caption reading 'Elephant'

quarto says it can't find the executable

So I get the error:

Error running filter lightbox:
Could not find executable lightbox

this is clear enough, but I do not get why: from GLightbox I installed it with:

npm install glightbox

Tried searching for lightbox or glightbox with locate on my filesystem, but it does not show up. but it is installed with npm.

This is probably something somewhat obvious, but I don't know what it is.

I'm on manjaro linux with i3

responsive caption blank

When I look at an image on my phone (portrait mode), the caption goes blank.

Question about group

Hello,

Is it possible to indicate groups for graph generated by one or multiple r code chunk? The idea would be reproduce the behavior of the 3 lines bellow with an argument similar to '#| lightbox-group: "picture 1"'

![A Lovely Image](mv-1.jpg){group="my-gallery"}
![Another Lovely Image](mv-2.jpg){group="my-gallery"}
![The Last Lovely Image](mv-3.jpg){group="my-gallery"}

Closing fullscreen image

I use the lightbox extension with reveal.js
Is there an easier way to close the image in full screen instead of using the alt - left arrow keyboard shortcut?
Thank you for looking at it and possibly fixing it.

Global Install

Thank you for giving us this magical extension.
Was wondering whether there's a way to perform a global install, instead of installing in every folder each time we want to use it.

How to obtain padding in multi-col layout

I asked this question over at the Quarto discussion, but figured I would replicate it here now that I have a clearer repro. I would be most grateful for any insight on how to get padding between images in a multi-col layout similar to how this looks without lightbox.

In the first case the images are shown without lightbox and have padding. In the second case, lightbox is activated and padding is gone. I'd like to add padding as in the first instance, but do not see arguments within the filter. The only difference between the two is that lightbox is commented out in the first instance and active in the second. Any thoughts?

I suspect for most use cases, some space between images would be the preferred default behavior.

No lightbox, has padding between images. This is the desired outcome.

---
title: Example Lightbox Document
# filters:
#   - lightbox
# lightbox: auto
---

::: {layout-ncol=3}
![Aquinnah](https://quarto-ext.github.io/lightbox/images/mv-1.jpg){group="elsewhere"
description="The waves break off the coast of Aquinnah on a beautiful summer day."}

![Oak Bluffs](https://quarto-ext.github.io/lightbox/images/mv-3.jpg){group="elsewhere"
description="Oak Bluffs is famous for its Gingerbread cottages, busy town center, and party like atmosphere."}

![Vineyard lighthouse](https://quarto-ext.github.io/lightbox/images/mv-2.jpg){group="elsewhere"
description="The Edgartown Lighthouse is a short walk from downtown and has beautiful views over the entrance to Edgartown Harbor."}
:::

Lightbox activated, no padding between images. This is not the desired outcome. How to include padding?

---
title: Example Lightbox Document
filters:
  - lightbox
lightbox: auto
---

::: {layout-ncol=3}
![Aquinnah](https://quarto-ext.github.io/lightbox/images/mv-1.jpg){group="elsewhere"
description="The waves break off the coast of Aquinnah on a beautiful summer day."}

![Oak Bluffs](https://quarto-ext.github.io/lightbox/images/mv-3.jpg){group="elsewhere"
description="Oak Bluffs is famous for its Gingerbread cottages, busy town center, and party like atmosphere."}

![Vineyard lighthouse](https://quarto-ext.github.io/lightbox/images/mv-2.jpg){group="elsewhere"
description="The Edgartown Lighthouse is a short walk from downtown and has beautiful views over the entrance to Edgartown Harbor."}
:::