The trouble with pop-up windows — even benevolent ones — is that they break context. Some users are confused by having multiple browser windows open, and even those who aren’t find themselves one step removed from the page they were viewing.
LightBox nails the problem neatly, using JavaScript to dim the current window and zoom a chunk of content front and center. Elegant and easy, both for viewers and admins. Once installed, invoke by adding rel="lightbox" to any href tag to activate the lightbox. A LightBox plugin for WordPress is available (click image above for demo).
Segue to GreyBox, which uses the same principle, but provides a fully functional browser window in the inset. A GreyBox plugin is also available for WordPress.
Thanks Milan
Your demo doesn’t seem to work here in Safari, Scot…
I’ve been using the lightbox js for quite a while in my own website (though that needs some Windows-quirks cleanup; can’t be bothered now), and it works great. Easy to set up and implement, easy for the visitors too.
Miles looks great, btw. :-)
Hmm… seems to be working fine in Safari 2.0.3 from here!
Check out Thickbox.
It’s about time I found what the heck that effect was!
Yes, I should have looked at website code, but I was too lazy, I was just looking for colophone…
Thanks, Scot! Thanks, Sean!
I’m back in the cool-kid-loop.
For extra credit:
http://shiftingpixel.com/lightbox/
I have a better solution. Don’t use popups. Ever. C’mon, there are tons easier ways that have been around in HTML for a decade, like just linking directly to the image and letting the user hit the back button when they’re done.
-Jim
Sean, ThickBox looks like the perfect evolution/convergence of the two – and lighter on bandwidth as well.
Jim – I’m not sure whether you’re saying LightBox is the perfect answer to your dislike of popups, or that you don’t like LightBox as an alternative to popups. And I’m also curious about why you would prefer to do a standard link to an image than to do a popup or lightbox display – a standard link breaks context even worse than a popup, right?
Lightbox is cool! I don’t get the point of Thickbox though: you lose your context and still have to pay the price of extra filesize. Plus, naive users might close the window entirely. But on the bright side, discovering the JQuery library was great!
Sometimes you want a separate window, e.g. for accessing help on a form field without losing your entered values.
Rob, you don’t lose context with ThickBox any more than with lightbox or graybox – it’s the same deal, but with the ability to have arbitrary content rather than an image OR html. Demo here:
http://jquery.com/demo/thickbox/
And because it doesn’t lose context, it’s actually a great way to provide form help without losing entered values. And ThickBox allegedly has the added advantage of much smaller .js filesize than the others.
How do you implement the expanding of the image (like you did with Miles above)? I haven’t bothered to download or install thickbox yet so I’m not sure if it comes that was as a default or if it is something you have to install/configure. I like that effect though!
Brian, that effect comes with – I didn’t do anything special to make it happen.
Do you know how to have the image size to the size of your window. For instance, my image is too big to fit on the screen, and I’d like for it to be scaled down to fit on n% of the screen (or something to that effect). I’m using Lightbox 2.0.
This is what is happening so far…
http://www.zollinhofer.com/artwork.php
Brian, the sample image at that URL scales perfectly – to around 80% of the browser window. I’m using Safari.
The reason the demo image fits perfectly on the screen is that it is a 640×480 px image. So it doesnt really scale it down. I’m finding it almost impossible to get large images to fit onto the users screen. Any suggestions will be highly appreciated.