@basanta I have one last query with regards to lightbox. It's actually in tandem with another question of mine about dynamically updating page contents.
I have a set of links on the page that update text and the lightbox images on the page. This works fine. The issue is updating the actual lightbox clicked image. There are numerous problems here - the element doesn't exist until it's clicked, so when I try to reference it in my JS, even with a setTimeout (to wait for it to load), I can't select it. If I copy the same JS into dev tools, I can select the images without issue. I'm thinking I need to bind it somehow?
The second issue is the timing - there is a delay on the lightbox, as you'd expect. I'm using set timeouts to try to wait for the image to load before i update it, but this is very dangerous I think. Is there any way to change the image src in a safer way?
To reiterate, I can change all the thumbnails on the page easy enough, it's changing the src of the clicked lightbox, that I'm having trouble with. To demonstrate the code that works in the browser but not from the JS editor in PRO:
lightboxImages = Array.from(document.querySelectorAll('.ilightbox-image'));
image.src = image.src.replace(currentVal,newVal);
Edit to this: every time a lightbox image is clicked away, the element is destroyed, and this code would need to run again. I guess the elegant solution to this is to change the actual link that PRO has saved for each image - my changes so far are all in the browser, but I guess this isn't really possible, unless that data is available from the browser window.
Further update: I have managed to update the images using setTimeout succesfully, but I would still like a safer way, if there is one. This is the current code:
lightboxImages = document.querySelectorAll('.ilightbox-image');
image.src = image.src.replace(oldVal, newVal);
Obviously, any issue with the timing and this could break the function, not good.