It seems that my title may not be very clear, but I have a jQuery code snippet that is causing some issues. The problem stems from the fact that when I click on an image with the class 'slideimg', I expect a function named slideDo to be executed, however, the browser console outputs an error:
Uncaught ReferenceError: slideDo is not defined
at HTMLAnchorElement.onclick (index.html:85)
The variable id used in the slideDo function is retrieved from the clicked image's id attribute using $(this).attr('id'). To make this work properly, I attempted to define the function within the click event handler itself. Unfortunately, this approach did not yield the desired outcome.
Within the HTML markup, the slideDo function is called upon clicking previous or next navigation buttons:
<div class="middle">
<a class="prev" onclick="slideDo(-1)"> ❮ </a>
<div class="imglink">
<img src="img/dailyui/008.png" class="previewimg 1">
<img src="img/dailyui/007.jpg" class="previewimg 2">
<img src="img/dailyui/006.jpg" class="previewimg 3">
<img src="img/dailyui/003.jpg" class="previewimg 4">
</div>
<a class="next" onclick="slideDo(1)"> ❯ </a>
</div>
In summary, my goal is to create a slideshow where clicking on an image triggers a modal display of related pictures. While the initial image clicking functionality works as intended, navigating through the images using the previous and next buttons appears to be malfunctioning. For a live demonstration, you can visit beta.eduardstefan.com