ui
ui copied to clipboard
fancyapps
Add `slug` option for Hash plugin
Describe the bug
Clicking Start Fancybox and navigating through the pages generates a hash correctly in the address bar.
However, clicking the browser's back button does not close the slideshow; it only records the back action, which is inconsistent with the behavior when using it declaratively.
Reproduction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css"
/>
</head>
<body>
<div>
<button id="myButton">
Start Fancybox
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>
<script>
document.getElementById("myButton").addEventListener("click", () => {
Fancybox.show(
[
{
src: "https://lipsum.app/id/1/1800x1200",
thumbSrc: "https://lipsum.app/id/1/150x100",
caption: "Sample image #1",
fancybox: 'gallery',
},
{
src: "https://lipsum.app/id/2/1800x1200",
thumbSrc: "https://lipsum.app/id/2/150x100",
caption: "Sample image #2",
fancybox: 'gallery',
},
{
src: "https://lipsum.app/id/3/1800x1200",
thumbSrc: "https://lipsum.app/id/3/150x100",
caption: "Sample image #3",
fancybox: 'gallery',
},
],
{
// Your custom options
}
);
})
</script>
</body>
</html>
Additional context
It works normally in 5.x
Fancybox.show(boxItem,
{
Hash: true,
slug: 'gallery'
)
In version 5.x, you could simply set the slug option in the options menu. However, this option seems to have been removed in version 6.x. I tried setting the slug in CarouselSlide or fancybox instead, but neither seems to work.
