All that's left to do is add the event handlers to the left and right links at the bottom of the widget so that the different images can be viewed. After the two skew functions, add the following code:
viewer.find("#left a").click(function(e) { e.preventDefault(); skewRTL(); }); viewer.find("#right a").click(function(e) { e.preventDefault(); skewLTR(); });
All we do is add a click handler to each link which prevents the link from being followed with preventDefault
and then call the relevant skew function. The example should now be fully working in all common browsers, although the effect is handled rather badly by IE in general with slower, more sluggish animations, less accurate skewing, jittery, and uncontrollable movements.
One point to note is that there is a difference between the full and minified versions of the jQuery source file which causes older versions of IE to throw errors when the minified version is used, but...