How can i use Lightbox with revealjs such that the slides do not change along the Lightbox?

[stefaniecg]

Description

Hi, I want to build a presentation which has a slide with Lightbox figures.
My problem is that when i open the Lightbox figures the slides also change along.

How can i use Lightbox with revealjs such that the slides do not change along the Lightbox?

---
title: "My presentation"
format: revealjs
lightbox: true
---

# first slide
with 1st text

# slide with images

::: {layout-ncol=3}

![](https://quarto.org/docs/authoring/images/html-figure.png){group="my-gallery"}

![](https://quarto.org/docs/presentations/revealjs/demo/mini/images/kitten-450-200.jpeg){group="my-gallery"}

![](https://quarto.org/docs/presentations/revealjs/demo/mini/images/kitten-375-300.jpeg){group="my-gallery"}

:::

# second slide
2nd text

# final slide
final text

[MLuc24]

You are not doing anything wrong — nothing in Quarto's lightbox filter is reveal-aware. It builds a plain GLightbox instance and only hooks slide_before_load / slide_after_load for its own captions, so when the lightbox is open both it and reveal.js are still listening for arrow keys, and one keypress moves both.

The instance is exposed as a global, though, so you can suspend reveal's keyboard handling while the lightbox is up:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    lightboxQuarto.on('open',  () => Reveal.configure({ keyboard: false }));
    lightboxQuarto.on('close', () => Reveal.configure({ keyboard: true  }));
  });
</script>

Pull that in with include-after-body so it runs after the generated lightbox script has defined lightboxQuarto.

If you also navigate the lightbox by clicking rather than by key, the same pair is the place to disable whatever else you need — reveal's Reveal.configure accepts touch and mouseWheel in the same way.

[stefaniecg]

@MLuc24 thank you very much for your help ! That did the trick 👍

[cderv]

Thanks for the workaround, and confirmed as a real gap on our side.

The lightbox filter builds a plain GLightbox instance with no reveal.js awareness at all, so both keyboard handlers stay active at the same time:

quarto-cli/src/resources/filters/layout/lightbox.lua

Lines 383 to 416 in 1f609f0

	local scriptContents = "var lightboxQuarto = GLightbox(" .. optionsJson .. ");\n"
	scriptContents = scriptContents .. [[
	(function() {
	let previousOnload = window.onload;
	window.onload = () => {
	if (previousOnload) {
	previousOnload();
	}
	lightboxQuarto.on('slide_before_load', (data) => {
	const { slideIndex, slideNode, slideConfig, player, trigger } = data;
	const href = trigger.getAttribute('href');
	if (href !== null) {
	const imgEl = window.document.querySelector(`a[href="${href}"] img`);
	if (imgEl !== null) {
	const srcAttr = imgEl.getAttribute("src");
	if (srcAttr && srcAttr.startsWith("data:")) {
	slideConfig.href = srcAttr;
	}
	}
	}
	});
	lightboxQuarto.on('slide_after_load', (data) => {
	const { slideIndex, slideNode, slideConfig, player, trigger } = data;
	if (window.Quarto?.typesetMath) {
	window.Quarto.typesetMath(slideNode);
	}
	});
	};
	})();
	]]
	local scriptTag = "<script>" .. scriptContents .. "</script>"

We could hook open/close the same way suggested here to toggle Reveal.configure({ keyboard: false / true }) (and probably touch/mouseWheel too) when the format is revealjs.

I'll convert this to an issue to track it.

[cderv]

• Make Lightbox revealjs aware so slides do not change along the Lightbox images #14842