THIS IS BASED ON 'HOW TO - LIGHTBOW' BY W3SCHOOLS: https://www.w3schools.com/howto/howto_js_lightbox.asp
IN ORDER FOR THIS CODE TO WORK, THE FOLLOWING SHOULD BE NAMED THE SAME: -CATEGORY TITLE (h1) = nature -IMAGE CATEGORY FOLDER = images/nature -ALL IMAGES = nature-1.jpg, nature-2.jpg etc... ALL IMAGES NUMBERED IN SEQUENCE
GALLERY IMAGES WILL BE GENERATED UP TO A MAXIMUM NUMBER YOU SET IN const maxIndex (modal.js:158) IF THER ARE LESS IMAGES IN YOUR FOLDER, EMPTY DIVS ARE REMOVED FROM THE DOM AND YOU GET AN ERROR MESSAGE FOR EVERY INVALID IMAGE SOURCE IN CONSOLE ( error loading http://127.0.0.1:5500/Projects/JS-modal-gallery/images/nature/nature-5.jpg ) NUMBER OF ACTUAL IMAGES RENDERED TO PAGE IS THEN COUNTED, SEE IT IN CONSOLE ( FOUND IMAGES: n modal.js:87 ) MODAL IMAGES/THUMBNAILS ARE CREATED FOR EACH GALLERY IMAGE