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>
Thanks in advance to all who answer.