Ok. Typical of me it’s a little complicated. So let me describe it in a little more detail.
Firstly, I am preloading the thumbnail images for my “table” into an Array to force them into the cache as your tut says. No problem. Because I want to easily add more images by simply putting them into the folder, correctly labelled, I am using your “detect if an image exists” routing to iterate through the number sequenced filenames until it can’t find one. That routine sets the number of images I want to add. I then iterate through a loop to charge up my Array. So far I have that part working fine.
The next part of the page load procedure is that I will use document.write to add the code for the correct number of items in my “table” (I will decide whether I want to use an actual table or divs later).
An addEventListener is set up to wait for a click in the defined area which is the total size of the “table” based on a surrounding div. That will fetch the mouse click coords using your excellent routine (slightly edited).
Each thumbnail image is armed with an “onclick” event handler which passes a number to a stored variable to identify which image needs to be displayed.
The large images themselves get inserted inside one of two container divs. They both start off styled to be tiny and invisible and are initially located at the top left corner of the “table” area.
When you click an image, the first container should move to where the mouse clicked (eventListener routine), the swapImage function then runs to change the img.src to the clicked image (using the “onclick” variable) and then triggers the style change to make the container transition to large size and new position with opacity 1.
When you click another image, the same process injects the new image into container 2, while the first image is restyled and should return to the point where it “emerged” from previously.
Finally, when the visitor clicks a main menu item to hide the gallery panel (which slides away), the current large image should zoom and shrink back to its start point as it fades away.
I am having trouble getting the things to happen in the correct sequence. I think part of my problem might be to do with the addEventlistener click detection and the “onclick” click detection. Whichever routine begins first will hog the thread until its finished as far as I can tell, then the other one will fire. Either I must know which one fires first so I can adjust my code accordingly, or I must find another way to accomplish the same result using only one click event.
For the broader view of how this image gallery will be used the website is www.smooth-operator.co.uk
My experimental build is still at www.smooth-operator.co.uk/anim_builder.html
Btw - the whole thing is designed to be responsive to window size changes as well…I will be designing a separate site for smaller mobile devices I think.
I will be continuing to fiddle with it during the day and will tell you any updates I might have.