When lightboxes are enabled through theme settings, a few things happen:
- The lightboxes plugin script (Fancybox) is added to the theme in the
footer.hbstemplate; and - The lightboxes script is added to the theme in the
footer.hbstemplate; and - The lightboxes plugin styles are added to the theme in the
document_head.hbstemplate.
The lightboxes script automatically converts all images within the content area into lightboxes by wrapping them in a link with the necessary lightbox markup. If this blanket functionality doesn’t work for you, a better solution may be to:
- Disable lightboxes through theme settings.
- Add the necessary scripts and styles to the theme manually and then add your lightbox/Fancybox links as required.
In the document_head.hbs template you’d add the following:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />and in the footer.hbs template you’d add:
<script type="text/javascript" src="https://cdn.jsdelivr.net/combine/npm/jquery@3.5.1/dist/jquery.min.js,gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>You can then wrap images in a link:
<a href="image.jpg" data-fancybox data-caption="An image within a lightbox">
<img src="thumbnail.jpg" alt="An image within a lightbox" />
</a>The thumbnail image and the main image can be the same if you like, but sometimes it makes sense to have the thumbnail be a smaller version of the larger one.