I’ve been evaluating several technologies for a small web project I’m working. One of the things that I’ve seen lately are these popup windows that display on top of the original page, graying out the original and “floating” on top of it. There are several neat implementations of this for images but I needed to popup little informational windows, something more than a tooltip but less than a full fledged new browser window or tab.
Enter Greybox, “A popup window that doesn’t suck.”
Note: NoScript users will need to enable the js from this page to see the effect.
Greybox is pretty handy. It pops up a neat screen. Here’s an example that pops up Google. (Click the “close” box at the top of the window to close it and return here.)
Neat, huh?
Think of all of the things that you can do with this!
I have been using it as a part of a template in RapidWeaver, a lightweight, visual editor for web pages on Mac OS X. I miss DreamWeaver, but I’m so far behind in the versions that I can’t afford the upgrade for what I want to do with it. Coda, another little Mac editor (this one is text based rather than visual), has also joined my toolkit. Because there are just sometimes when you need to get under the hood. Even when you don’t really remember enough not to be dangerous. For example, it took way too long to figure out how to install GreyBox on my system. Just be careful and look for the actual directory that you need to install, since the tarball comes with some extras for documentation.
Of course, the ultimate is to have this work in pure CSS, which I once got working back in the day. GreyBox works via Javascript, but with the rise of AJAX, we’re all having to turn that on for some sites anyway.
Comments 4
Dear Forrest
I just read your post about GreyBox and I’m really interested how you made it work so smoothly… I tried to integrate it into my site with Rapidweaver, but the images do not seem to load..(you can have a look here: http://www.jochenhung.de). Any suggestions would be very welcome!
Regards,
Jochen
Author
Greybox worked fine for me — if I loaded the images first! I get the greybox “popup” but I don’t see an image load. If I then put the image link URL into the browser (say “http://www.jochenhung.de/assets/Guardian_gross.jpg”) everything works like it should. Try adding a leading slash to the front of the greybox link URL: using “/assets/Guardian_gross.jpg” rather than “assets/Guardian_gross.jpg”. If that doesn’t work, try a complete URL with your domain. Post a reply comment because it’s interesting to me.
OBTW, I recommend themes from Rapid Ideas if you ever want “fancy”, and I cannot get by without the RW plugin @stash from Nilrog.
Hi Forrest, thank you very much for your answer! I tried both suggestions, but the problem is still the same: the images do not load the first time I click on the thumbnail. If I try it a second time, it all works fine…
Any other ideas?
Best,
Jochen
Dear Forrest, I have now switched to Lightbox JS (http://www.huddletogether.com/projects/lightbox2/), which has its own problems, but works altogether better than Greybox in my opinion…
Thanks for your help,
Jochen