Magento’s product images come with a workable, although somewhat unusual image zoom functionality. But many users want a lightbox which lets users click an image and see a large version. Of course, you can use just about any jQuery plugin in your templates – Magic Zoom being one such perfect example.

But instead of manually installing and configuring the Javascript yourself, MagicZoom has its own Magento MagicZoom extension which can be dropped straight in and integrates beautifully with Magento

Some highlights MagicZoom’s Magento extension

• Automatically inserts the product title onto the zoomed box
• Automatically linking main image and thumbnails for navigation when zoomed
• Visible on pretty much any area of the site, not just the product view page
• Per-theme customisation
• An insane amount of user-configurable options without touching a line of code (see below)

Installation

MagicZoom’s extension comes with its own installer, although for me it was perfectly sufficient to simply drop in the files

If you are struggling to figure out why a perfectly good jQuery plugin that works elsewhere is not loading into jQuery for a particular page, this may well be your solution.

This behaviour will happen if something reloads jQuery elsewhere on your page, below the script tag that calls the plugin.

If this happens, jQuery is effectively reloaded and has lost all the extensions you have made to it.

The solution of course is to simply remove the extra jQuery loads. If that is not very easy to do, you can at least try to modify it so that it won’t reload it if it already exists:

<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        var script     = document.createElement('script');
        script.setAttribute("type","text/javascript");
        script.src = "jquery-latest.pack.js";
        var head = document.getElementsByTagName('head')[0],
        done = false;

        // Attach handlers for all browsers
        script.onload = script.onreadystatechange = function() {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                // callback function provided as param
                onload_stuff();
                script.onload = script.onreadystatechange = null;
            };
        };
        head.appendChild(script);
    }else{
        onload_stuff();
    }
    onload_stuff = function(){
         // your onload stuff goes here
    }
</script>

Having issues with javascript dependencies or awkwardly structured html defining objects you need before run?

This is a little trick I used combined with csnover’s roundrect.js to provide IE versions < 9 with border-radius rounded corners.

Create a separate source file e.g. mylateloader.js and in it include the following code :-

function myInArray(needle, haystack) {
    var length = haystack.length;
    for(var i = 0; i < length; i++) {
        var str = jQuery(haystack[i]).attr(‘src’);
        if(typeof(str) != ‘undefined’ && str.search(‘.*’+needle+’.*’) > -1) return str;
    }
    return false;
}

jQuery(document).ready(function(){
    var script = document.createElement(‘script’);
    url = myInArray(‘mylateloader.js’, document.getElementsByTagName(‘script’));
    script.src = url.replace(‘mylateloader.js’,'mycoolminifiedfile.min.js’);
    document.getElementsByTagName(‘head’)[0].appendChild(script);
    setTimeout("mycoolobject.run()",2000);
})

That way, at document.ready(), mycoolminifiedfile.min.js is loaded from the same directory on the server as the late loader js and 2 seconds later, the mycoolobject.run() is called.

If you have a staging copy of your site anywhere then you might not bother copying over your entire catalogue of product images etc.

You might decide to drop in absolute URLs for those images so that they are pulled from live. However you really don’t want absolute URLs in your code and you certainly don’t want that to go live because it just adds unnecessary bloat.

A nice trick you can do here is make a change to your staging site as follows. Of course ensure this change doesn’t go live, but it should be just one file so that’s easy to handle.

(Note this assumes you already have jQuery available on your page)

<script type="text/javascript">
$().ready(function(){
    $('img').each(function(){
        var src = $(this).attr('src')+'';        
        if(-1 == src.indexOf('http')){
            var new_src = 'http://www.LIVEDOMAIN.co.uk/'+src;
            $(this).attr('src', new_src);
        }
    });
});    
</script>

Don’t forget to change LIVEDOMAIN to be your real live domain

If you are struggling to debug why some ajax, perhaps using jquery etc is working fine when you access the page via http, but if you use https then it fails silently with very little error messaging to work on then this could be your solution.

Basically, although you have accessed the page over HTTPS, if there are any insecure elements on the page then your ajax call will default to http and will then fail silently thanks to cross domain policy problems.

If you debug in chrome, you do get a meaningful error message but if like me you generally prefer working in Firefox and Firebug then you are up the creek.

Double check your source code for http:// and also check out live http headers for insecure calls.

If you are scratching your head trying to figure out where in your Javascript the mysterious doIt error is coming from when testing using Chrome, this might just save you..

After loads of digging around it turns out that the error is actually caused by the Chrome SEO extension I had installed.

Disable that and the error goes away, so it was never your fault in the first place!!

Check this out:

http://jsfiddle.net/ – handy

If you need to work collaboratively on some Javascript then check out JS Bin

It’s just like pastebin, but with Javascript compatability, handy.

Douglas Crockford, author of Javascript the Good Bits and Yahoo’s Javascript architect is delivering his famous lectures.

The first one is now available to download.

Douglas Crockford is Yahoo!’s JavaScript architect and a member of the committee designing future versions of the world’s most popular programming language. In the first three months of 2010, Douglas will be delivering his acclaimed series of lectures on the history of JavaScript, its features, and its use.

http://yuiblog.com/crockford/

If you are bewildered by the choice of lightbox style javascript plugins available, you might find this page useful:

http://planetozh.com/projects/lightbox-clones/

Its a well organised matrix of lightbox clones so you can compare features and choose the right one for your specific requirements. Handy!