Little JavaScript Gallery - enlarge images on the site on first click, open in Fancybox on second

Hello, I am looking for a little JavaScript that does the following: I have some pictures on a page, of which one is displayed large and the rest as thumbnails below the large one. A click on the large image should open it in Fancybox. On a click of one oft the thumbnails this should not directly open in fancybox but become the large image and then, if user clicks on the large image, it should then open in Fancybox. Please see the image attached for details. This should work only for all images I post inside a certain div. All other images/elements on the site should not be affected and if I have assigned fancybox on another image on the site, this should open there as usual. I only need the JS Code. It should work with a html code like this (necessary classes, rel="fancybox", functions like enlarge() etc. can of course be added): Please no other lightboxes than fancybox since its good to use with other content as well, like pdfs etc. and I may need this on other parts of my site.