Friday, June 20th, 2008

Magic Toolbox: High-quality JavaScript Image Effects… for a Price

Category: Design, JavaScript

<p>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:

Compatibility chart for Magic Thumb

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.

Posted by Ben Galbraith at 11:32 am
17 Comments

++---
2.9 rating from 65 votes

17 Comments »

Comments feed TrackBack URI

Extremely well done. I have to concur with the decision to not use a framework (even though our site is pretty Mootools-heavy). When designing scripts for portability (especially for sale), conflicts & bloat from competing frameworks are the last thing you need.

Comment by Liquidrums — June 20, 2008

On the flip side, if you use a framework, you get the benefit of a cohesive implementation for the client side of your Web application. Most engineers I know would not dream of cobbling together the server side of their mission critical Web application with little bits of .NET, a few smatterings of LAMP, perhaps a twist of Perl/Apache, and let’s throw in some Apache Tomcat, and a little bit of Python for good measure.
 
Some frameworks come with visualizations that tie in to programmatic underpinnings that allow those visualizations to be integrated with larger programmatic logic as a Web site evolves, avoiding the cobbled-together syndrome – when you’re ready to move beyond just throwing in an isolated widget or two to try to add a bit of flare.
 
UIZE (the framework that I work on) has some “magic” of its own…
 
http://www.uize.com/examples/slideshow-with-wipes.html
http://www.uize.com/examples/marquee-and-image-port.html
http://www.uize.com/examples/thumbzoom.html
http://www.uize.com/examples/scrolly.html
etc.
 
For more, just go to the Web site and run through the examples…
 
http://www.uize.com
 
PS: it would be great to have smart guys like the “Magic” folks involved in an OpenSource framework initiative. A company like Zazzle would even pay them to do what they love ;-)

Comment by uize — June 20, 2008

Cabel’s FancyZoom does the nifty animated zoom:
http://www.cabel.name/draft1/2008/02/fancyzoom-10.html

It’s free for personal use, $39 for commercial sites.

Comment by ThomW — June 20, 2008

Or ReMooz, free for personal use and free for commercial use and has a lot of options … and this neat mac shadow … And it uses MooTools … http://digitarald.de/project/remooz/

Maybe a bit too much advertising for Ajaxian :D . How many people would pay for ReMooz? Maybe I do something wrong with my free scripts.

Comment by Harald — June 20, 2008

@Harald: :-) just to clarify: this post was not a paid advertisement in any way whatsoever.

Comment by Ben Galbraith — June 20, 2008

Do people actually pay for javascript effects?
I know clients do, but developers?

“Magic Magnify”, was impressive, until I realized it actually used flash.

BTW, they did a good job, and more power to them if people buy their stuff.

Comment by Tr0y — June 20, 2008

Another nice script with similar functionality is PopBox! And it’s free for any use. http://www.c6software.com/products/popbox/default.aspx

Comment by TobiA — June 20, 2008

If you really need this stuff you’re probably already using a library anyway. And if that’s the case you can imitate these effects in a matter of minutes, for free.

Comment by Anonymouse — June 21, 2008

There is nothing wrong in charging for your work. The above examples are not so impressive though.

Comment by Jeria — June 21, 2008

Funny, I read the headline and thought “for a price” was relating to performance costs. If there’s a market for this sort of thing, then great; however, I believe the open/free sharing model has the potential to do more goodwill for someone (and wider adoption) than the commercial approach for small utility things like this in particular, provided of course the developers are not dependent on the income aspect.

Comment by Schill — June 21, 2008

Is it 1998?

Seriously, this stuff was done sooooooo long ago. I don’t think I’m mistaken when I say that Macromedia had image zooming demos in its original docs for Flash. Using the word “free” and one of “zoom, magnify, expand” along with “image” and perhaps one of “flash” or “javascript” in google should not only get you free, open source tools of this sort, but can give you a bit of a historical walk through the tools developed for image viewing over the last 10 years.

I suppose one should praise the coders, but one should also encourage them to do something new. And for god’s sake, don’t charge for it.

Comment by sandro — June 21, 2008

I’m with Schill, I figured the price was the performance. Thing is, why pay for this now, when you know it’ll be in an open source library very shortly?

Comment by richtaur — June 21, 2008

I dont need to pay. What personal site? They dont allow google revenue.

Comment by explorerpro — June 22, 2008

Hello. Jake from Magic Toolbox here.

It’s good to see a lively debate going on :)

Most of you reading the Ajaxian blog are skilled JavaScript developers. You are able to write complex scripts. But the majority of people don’t have the experience to create scripts at this level and these people appreciate our tools.

Regarding the price… all our tools are free for non-profit sites. If the site generates income, then we charge a small license fee. The price of a license is the same price as most web developers charge for just one hour of their time. Weeks of work go into each script and we provide free updates with new features. That’s good value for money!

Then there are the finer details… Clean code – the HTML is just an img with a link wrapped around it. Fast speed – each script is lightweight at only 10kb to 20kb. Accessible – each tool works with screen readers and degrades gracefully without JavaScript. Free support – all customers get 30 minutes of free support (if they need it).

All these things add value and that’s why we feel there is a need for paid solutions as well as free ones.

Comment by dingbat — June 22, 2008

A slightly different kind of zoom (both image and text) – all done in JS, CSS and HTML and as yet no plans to charge.

http://www.webalon.com/topgear/index.php

Still only a proof concept, so Firefox, Safari and Opera for best results.

AJK47

Comment by ajk47 — June 23, 2008

I’ve worked with plenty of teams who would much rather punt an effect like this to the purchasing department than write it themselves – even if they happened to have a developer capable.

These kind of tools throw down the gauntlet to the open-source libraries. Here’s where the bar is set for wide-spread commercial adoption – you should be able to download a 10-20k script and drop in a tag or 2. Where the libraries have the edge is when you need to add other functionality to a page, have a customer who wants to resell your stuff, or any number of other complications which make you wish you’d used an open-source framework in the first place. But who can fault spending a few bucks to get a slick version 1.0 out of the door?

Comment by sfoster — June 23, 2008

Seriously.

Yes, any of us could write the basics of this in an afternoon, and spend the rest of the week killing ourselves to make sure it works in as many platforms as possible.

Or we can shell out a measly $40 and let Jake and company worry about it. Nice job fellas.

Comment by wwwmarty — June 23, 2008

Leave a comment

You must be logged in to post a comment.