I’m a Mac user. I like a little eye candy. As PixoBebo progresses, I become a little more daring and adventurous. Today I used my Mac, Panic’s Transmit, my favorite FTP utility, and a nifty Javascript from one of the Transmit developers to add a fancy zoom to web page photos. It’s pretty. It now works. It was an adventure.
Click Candy
I don’t like Flash. It’s a pain to build Flash into a web site and it tends to crash browsers and hog the CPU, especially on Macs. So, what else could I do to add some eye candy? How about pop-up images?
Javascript works wonders here and there for various tasks. I’ve had a few problems with Javascript in Safari, but very few with the latest version. Most advertisements on a web site use Javascript to connect back to an ad server.
When I set up PixoBebo I wanted to insert thumbnail images of software windows which would pop up to a larger close up view of the image when clicked. That worked alright but had some limitations.
The larger pop up image opened a new browser window, usually positioned in the upper left corner of the browser. It worked but wasn’t pretty.
Enter Fancy
Ron McElfresh found something fancy that also zooms. It’s called FancyZoom by Cabel Sasser, who works at Panic, which publishes Transmit.
Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom’s raison d’être (French for “raisin-determination”) is providing a smooth, clean, truly Mac-like effect, almost like it’s a function of Safari itself.
What FancyZoom does is, well, it zooms thumbnail images to full size, right in the middle of your browser, Safari or Firefox, or pretty much whatever.
Handy, Dandy, Fancy
Ron and I were sufficiently pleased with FancyZoom that we thought we might incorporate it into NoodleMac, which is due to launch in the next week. However, we ran into some problems.
PixoBebo’s content management system, ExpressionEngine (EE) handles images and photos quickly and easily. I can take a screen snapshot of a software application’s window, upload it to PixoBebo, resize it to a thumbnail, and insert it into the web page in about a minute.
FancyZoom’s Installation was easy, and it would have been a wonderful addition—except for glaring problems in some browsers. I inserted two lines of Javascript into the head section of PixoBebo’s article pages, then a snippet of code was inserted into the body of the page, and I used Transmit to upload a couple of Javascript files and load a few images and photos.
Alas. The pop up images and photos looked great in Safari, but not so good in Firefox, Camino, or Flock on Macs. Windows? The pop ups looked wonderful in Microsoft’s Internet Explorer, Firefox, and Apple’s Safari.
What to do? Track down the bug which apparently shows up in Firefox, Camino, and Flock with certain CSS configurations. Guess who did the CSS? Me. After hours of trial and error, and enlisting folks from ExpressionEngine and Panic, and digging through bug reports, we found a fix. I say ‘we’ but it was really Ron and Cabel who narrowed it down to CSS.
So, now when you click on one of the images in an article it should pop up.
What’s Next?
Movies. I want some way of creating onscreen movies and popping them into a web page. Easier said than done. Most of the embed code for QuickTime movies does not validate properly as XHTML.
What would I use to create movies of Mac software that I review? Neil Clayton’s iShowU. It is oh so cool. More to come on that addition to PixoBebo.
In the meantime, if anyone knows of a way to insert QuickTime movies into a web site and have it validate proper XHTML, let me know. I would also like to have custom controls similar to those that Apple uses, instead of the clunky standard controls in QuickTime.
Hey, I can dream, right? Any suggestions?
Update
Thanks again to Ron and Cabel for the CSS fix. The pop up images look pretty now.
Kate's Comment Policy: Keep your comment on topic, relevant, worthy, and funny. Or, pick any three. Be pleasant, helpful, and only use your real name. Comments are moderated and will not appear immediately.