To append the loupe and the optional lightbox, simply click on the image. The image is the target. Clicking inside the loupe will detach it and the optional lightbox. Images are loaded with the click event and are detached from the DOM when the loupe is closed using .detach() function (which stores the element in the DOM after removing it).
The loupe will stop just outside the edges of the smaller image. If your cursor leaves it, the loupe will pulse indicating that your cursor has left the area. If your cursor goes back to the loupe, it'll pick up where it last left off. If you resize the window the lightbox will resize with it and the loupe will center itself on the image.
If there is a lightbox, clicking outside the loupe will automatically detach both the loupe and lightbox:
Or, if there is no lightbox, clicking anything outside the loupe will automatically detach it:
All images are loading using AJAX on the click event. With this you get:
An error message if the image cannot load:
A loading div before the AJAX completes (depending on the speed of the site hosting the image — in this case flickr — you may not see the loading message):
Since all the elements are using .detach(), they will remain available to append back into DOM elements if clicked again. This means, the second time around the bigger image will be immediately available!