I am building a web app based on Spring with Thymeleaf and I am using Featherlight lightbox/gallery combination to show a masonry layout of images on the front page. The images are stored in a database as byte arrays and I simply recall them in my controller using a HttpServletResponse response based on the id of the content. The response url in the html code is something like "host/gallery/image/2" which works fine for the Featherlight gallery component.
It lays out the images just fine but the problem is when clicking on each image to display it in a lightbox. As long as I was using hard coded links to an image in some physical location all worked fine. But with dynamically displayed images all I get back in the lightbox is the actual byte code and not an image.
What can I do to make Featherlight light box to understand it's an image?
<div id="macy-container" data-featherlight-gallery data-featherlight-filter="a" data-featherlight-type="image">
<div class="masonry-content" th:each="content : ${contentList}">
<div class="macy-item">
<a th:href="@{'/gallery/image/' + ${content.id}}" class="gallery2">
<img th:src="@{'/gallery/image/' + ${content.id}}" width="225" class="macy-image" alt="First image"/>
</a>
</div>
</div>
</div>
The tag works fine and Featherlight builds a nice gallery layout of the images but the href-link just results in a box opening with huge amount of byte coden and not an image.
@GetMapping("/gallery/image/{id}")
public void showGalleryImage(@PathVariable Long id, HttpServletResponse response) throws IOException {
response.setContentType("image/jpeg");
Content content = contentService.findById(id);
InputStream is = new ByteArrayInputStream(content.getImageFile());
IOUtils.copy(is, response.getOutputStream());
}
And the simple controller for the image response...
Is there something I missed regarding how Featherlight creates the actual light box object?
EDIT: I did also try with the data-featherlight-type="image" option but to no avail.
OK, this happens when I try to instantiate via JQuery;
$('.gallery2').featherlightGallery({ variant: 'featherlight-gallery2' });
Was trying this in order to simply switch between your css styles while testing. As soon as I take the call out, all works well.