Last year I decided to start a section called Game Hunter where I'd post pictures of old video games I found at garage sales and thrift stores.
Unlike the semi-popular video game scans section, I don't see why anyone would want to bother downloading or linking to these images.
I figured the best route to go would be to use a hover image instead of the ol'
"click the thumbnail for the full-size image". You know, the
effect where the full-size image appears when a visitor hovers over the thumbnail
I did a little searching and found a nifty library called Overlib (https://www.bosrup.com/web/overlib/)
that seemed like it would work. It looked really easy and was something
I could even use elsewhere on the site. It didn't support showing an image by itself, but did
support background images. No problem, I'd just pass the image to a function and
resize the pop-up to the size of the image.
That worked great, but then I hit the following issues in roughly this order:
Locally everything was fine, when I tried it from the web the images
didn't appear. After wiggling the mouse around they'd eventually pop-up.
Overlib displayed the text just fine but didn't wait for the background image
to load. I assume this is by design since a "background" image is
typically small but I was trying to force 100-300K images through. I could
pre-load all the hover images but that would send a couple megabytes of images
down to a visitor who may never see any of the images.
After adding code to wait for the image to load and launch the pop-up when
No message notifying the visitor that the image was loading.
The image would appear even if the user was no longer hovering over the
thumbnail and not go away until they hovered over another one.
If the user moved on to a different image, they'd see a previous one they
hovered over instead of the current one.
After some trial and error, I ended up with the following script to make it all
src="../script/overlib/overlib.js"><!-- overLIB (c) Erik Bosrup -->
I don't think this is a horrible approach, although I'm sure somebody will send me an email explaining a much simpler way to accomplish the same effect.
Until then, I'm satisfied with the results. You're free to use this sample code
on your site, no restrictions or whatnot.