Is your feature request related to a problem? Please describe.
Currently, when using the Sidebar plugin, the primary way to display rich text content for each gallery item is via the data-caption attribute. While this works for simple text, inserting large blocks of HTML (rich text descriptions, links, or metadata) into a data attribute is not ideal for code maintainability or readability.
I have explored the documentation but couldn't find a clean way to associate a specific, separate DOM element with a gallery item to be displayed in the sidebar, unless that element is shared across the entire group.
If I want to display a unique, detailed description (with HTML formatting) for each image in a gallery:
- Using data-caption="
...huge HTML block...
" is cluttered and difficult to manage.
- Using a hidden DOM element currently seems to favor group-wide settings rather than unique per-item content that the Sidebar can dynamically pull
Describe the solution you'd like
It would be highly beneficial to have a way to "teleport" or reference a hidden DOM element's content into the sidebar for each specific item.
Something like:
HTML
<a href="image1.jpg" data-fancybox="gallery" data-sidebar-src="#description-1">
<img src="thumb1.jpg" />
</a>
<div id="description-1" style="display:none">
<h3>Song Title</h3>
<p>Detailed artist credits, BPM, and production notes...</p>
</div>
Or via the JavaScript configuration:
JavaScript
Fancybox.bind('[data-fancybox="gallery"]', {
Sidebar: {
// A way to map specific content to the sidebar per item
display: (instance, slide) => {
return document.getElementById(slide.sidebarSrc).innerHTML;
}
}
});
Describe alternatives you've considered
No response
Additional context
I am building a media database where each entry requires a significant amount of formatted metadata (credits, release dates, etc.) to be displayed alongside the image/video.
Is there an existing "elegant" way to achieve this that I might have missed, or could this be considered for a future update?
Keep up the great work on Fancybox!
Note: English is not my native language. This issue was written with the assistance of an AI to ensure clarity and professional phrasing. I hope the suggestions are clear!
Is your feature request related to a problem? Please describe.
Currently, when using the Sidebar plugin, the primary way to display rich text content for each gallery item is via the data-caption attribute. While this works for simple text, inserting large blocks of HTML (rich text descriptions, links, or metadata) into a data attribute is not ideal for code maintainability or readability.
I have explored the documentation but couldn't find a clean way to associate a specific, separate DOM element with a gallery item to be displayed in the sidebar, unless that element is shared across the entire group.
If I want to display a unique, detailed description (with HTML formatting) for each image in a gallery:
Describe the solution you'd like
It would be highly beneficial to have a way to "teleport" or reference a hidden DOM element's content into the sidebar for each specific item.
Something like:
HTML
Or via the JavaScript configuration:
JavaScript
Describe alternatives you've considered
No response
Additional context
I am building a media database where each entry requires a significant amount of formatted metadata (credits, release dates, etc.) to be displayed alongside the image/video.
Is there an existing "elegant" way to achieve this that I might have missed, or could this be considered for a future update?
Keep up the great work on Fancybox!
Note: English is not my native language. This issue was written with the assistance of an AI to ensure clarity and professional phrasing. I hope the suggestions are clear!