I start by creating a test list with links to an image. Then I pass it to the model under the name _links
@GetMapping("/{id}")
public String showItem(@PathVariable int id, Model model)
{
List<String> imageLinks = new ArrayList<>();
imageLinks.add("/resources/static/images/products/1/product_test_image.jpg");
imageLinks.add("/resources/static/images/products/1/product_test_image2.jpg");
imageLinks.add("/resources/static/images/products/1/product_test_image3.jpg");
model.addAttribute("_links", imageLinks);
return "item/item";
}
Then, at a certain place in the html code, I draw the number of buttons equal to the number of pictures in the _links list.
I can pass the cycle number to the imgSrc method. But I can't pass the link string itself. When I try to send it, the page stops displaying normally. Therefore, this line is commented out.
<div th:each="link, iStat : ${_links}">
<span id="current_img" th:text="${link}"></span>
<input type="image" th:src="${link}" alt="miniature" th:onclick="'imgSrc(\'' + ${iStat.index} + '\');'" style="width: 80px; height: 80px; margin: 3px">
<!-- <input type="image" th:src="${link}" alt="miniature" th:onclick="'imgSrc(\'' + ${link} + '\');'" style="width: 80px; height: 80px; margin: 3px"> -->
</div>
And finally the method I'm calling. The last line is commented out but it shows what I want to achieve. Namely, by clicking on the picture in the list, I want to change the large picture to the new one selected in the loop.
<script language="JavaScript">
var selectedImage = document.getElementById("current_img");
var mainImage = document.getElementById("main_product_image");
var debug = document.getElementById("debug");
var debug2 = document.getElementById("debug2");
function imgSrc(link)
{
mainImage.src = selectedImage.innerHTML;
debug.innerHTML = selectedImage.innerHTML;
debug2.innerHTML = link;
// mainImage.src = link;
}
</script>
It is curious that link is normally passed to th:text.
Thanks in advance to all who answer.
The problem was solved. Here is a test code that displays in the message a link to the image of the button we clicked on.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Item name</title>
<link rel="stylesheet" type="text/css" href="/resources/static/css/styles.css">
</head>
<body style="margin: 0">
<div class="page" style="margin: 0">
<div th:each="link, iStat : ${_links}">
<input type="image" th:src="${link}" value="Click me" onclick="buttonClick(this)">
</div>
</div>
<script type="text/javascript">
function buttonClick(e) {
var att = e.getAttribute('src');
alert(att);
}
</script>
</body>
</html>