Friday, June 20th, 2008p>Jake Brumby of the European Ajax development shop Magic Toolbox recently pointed us to three of their creations: Magic Zoom, Magic Magnify, and Magic Thumb.
Each of these effects has a really nice implementation that works across a large number of browsers:
Jake shared some of their experiences building these effects with us:
Initially, our key challenge was making it work in all browsers. As usual, IE 6 and IE 5.5 gave the most headaches and we spent a long time finding workarounds. Getting the expand/contract effect to work smoothly in IE took quite a while. Getting the close/next/previous buttons to fade in and out in IE was also tough.
Another lesson is that when you are building a tool that will be used on many websites, you need to test under a lot more conditions than a script for a single website. One of our first customers used it on a site with Flash navigation. The Flash navigation continued to be visible after the image had expanded, which is not what you want. So we needed a way to keep the enlarged image above all the other content. No matter how much testing you do, there are likely to be small bugs after launch and you need to be able to react quickly to fix them.
To ensure the smallest possible script, they built it without using an existing JS library:
One other lesson was that for the best results, you need to code from scratch. We did an initial trial using MooTools and we achieved the effect we wanted but the source code was well over 100kb which we deemed too high. It was useful as a proof of concept, but the final version of the tool was coded entirely from scratch.
This is all well and good, but… are they worth paying for? Each of these three effects is sold separately. On the one hand, with such excellent open-source frameworks out there for doing Ajax effects, etc., having to buy these seems… weird. On the other hand, they are free for non-commercial sites and if you’re an e-commerce site, if you apply these effects all across your site, they can have a big impact, and having someone else deal with all the cross-browser issues for you (or else you get your money back) seems like a good deal, along with the 30 minutes of free support they throw in.
I confess I have a soft spot for ISVs (Independent Software Vendors). I love to see small teams out there making quality software for a living, especially now that so many have to compete against free software. Do these products from Magic Toolbox compel you to consider purchase? Or do you feel the open-source stuff is good enough?
A final note from the Magic Toolbox team:
Magic Thumb provides a lot of customisation features that you don’t get with other lighbox effects. It’s also the only one we’ve come across that “grows” the image immediately in front of the user. It gives the user a greater feel of control and because it loads immediately it keeps them flowing through the website. That’s good for usability.
Beautiful stuff, guys.