Adding on hover copyright to Lightbox Feb 13. 062
I’ve been using Lightbox by Lokesh Dakar on a current project and needed to add a simple copyright message on hover just to remind those nice users that they really shouldn’t simply rip my client off by printing little snap shots directly from his website.
Obviosuly this won’t deter the determined, it’s by no means bulletproof, but perhaps will serve as a gentle reminder to others.
#lightbox {
background-image: url(/assets/copyright.gif);
background-position: center;
background-repeat: no-repeat;
}
#lightbox a:hover img#lightboxImage {
filter:alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
}
At first I was looking for an easy way to script the overlay of a PNG with a copyright text but in the end I just went with a nice little opacity effect on the photo in question, thus revealing a copyright message which had been set as the containing DIV background image. Keep it simple stupid.
Of course, if you know of a better method, let me know. :)
To do that I’d have to pass the image dimensions to the blank image somehow… not being a javascript guru I’m not sure how that’d work, hence my CSS based approach! :)
I saw a photographers site some time ago using a similar method. He has a table ( ok not too good a start) with an empty image in, and the td has a background image (the chosen photo).
My mate Matt Spour is a photographer, I’ll have to ask and see if he’ used anything similar.