Because the overlays are positioned absolutely, we need to prevent them from becoming misaligned if the window is resized:
$(window).resize(function() { $("div.expander-wrapper").each(function(i) { var newCoords = $("#image" + (i + 1) + "-thumb").offset(); $(this).css({ top: newCoords.top, left: newCoords.left }); }); });
All we need to do is make sure the overlay images stay directly on top of the original images when the page resizes, which we can achieve by binding a handler for the resize event to the window
object. In the handler function, we just get the new coordinates of the underlying image, and set the top
and left
properties of the wrapper accordingly. Note that we don't animate the repositioning of the overlays.
Save the file and preview it in your browser. We should find that we can click on either image and it will expand to show a full-sized version of the image, with the first...