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:
Screen Shot 2022-02-22 at 7.25.06 PM.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:
Screen Shot 2022-02-22 at 7.24.25 PM.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:
Screen Shot 2022-02-22 at 7.45.50 PM.png
Screen Shot 2022-02-22 at 7.46.03 PM.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
