Dear @vthevoz
This should set you in the right direction, sorry that i cannot help you completely through the process. You will see what's happening here though and what to do further:
https://laytheme.com/documentation/custom-css-styling.html
https://laytheme.com/documentation/custom-javascript.html
Gridder Setup:
[image: 1645512007705-screen-shot-2022-02-22-at-7.25.06-pm-resized.png]
Important to note that you should make use of Lay Theme's built in captions as this should be much easier than adding HTML text areas under the images.
The Image element should be given either a Custom Class or ID so we can target it easier:
[image: 1645512123607-screen-shot-2022-02-22-at-7.24.25-pm-resized.png]
Custom CSS:
.magic-caption .caption{
display:none;
}
.caption-visible{
display:block !important;
}
JQuery:
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
jQuery(".magic-caption").click(function(){
jQuery(".caption").toggleClass("caption-visible");
});
});
</script>
Reference:
https://www.w3schools.com/jquery/html_toggleclass.asp
Result:
[image: 1645512402569-screen-shot-2022-02-22-at-7.45.50-pm-resized.png]
[image: 1645512440141-screen-shot-2022-02-22-at-7.46.03-pm-resized.png]
The Class caption-visible is added to the caption. This comes with new CSS information that tells this HTML element now to be visible.
NOTE: you will see that the caption height created by becoming visible also affects the image to it's right horizontally. Both are pushed upwards. This is something to figure out š
Hope this sets you in the right direction & best wishes
Richard
