Using Cloud Zoom with a slide show: why the lens doesn't work properly

I was trying to use the slideshow plugin from JQuery Tools with the Cloud Zoom plugin. In addition to having a slide show, I wanted to zoom in pictures in the slide show with Cloud Zoom. Please, refer to the links provided how to create a slideshow and configure Cloud Zoom for images.

But the lens didn't work for the slideshow, I was only able to catch a microscopic lens 2x2px in the top left corner of the image.

The reason why it works this way is that Cloud Zoom creates a wrapper and a "mousetrap" elements for an image after the image is loaded, with the size of the "mousetrap" corresponding to the image size. In my case, initially all the images in the slideshow are hidden ("display:none"), so the images sizes are 0, so the "mousetrap" element is created only 2x2px big.

To fix it, we need to activate Cloud Zoom for an image only when the corresponding slide is shown. To disable Cloud Zoom initially, replace 'class="cloud-zoom"' with 'class="_cloud-zoom"'.

We don't have any "show" events in Javascript, but luckily, we know that the slideshow uses the "show()" method to make a slide visible and we can override this method in JQuery in order to trigger an event.

//trigger an event on show
var _oldShow = $j.fn.show;
$j.fn.show = function() {
   var hidden = this.find(":hidden").add(this.filter(":hidden"));
   var result = _oldShow.apply(this, arguments);
   hidden.filter(":visible").each(function(){
      $j(this).triggerHandler("show"); //No bubbling
   });
   return result;
};

Add this function to the page and it will trigger an event when show() is called on an element or its children. I borrowed it from this discussion, other solutions can be also used.

We also need to catch this event when a slide is shown and activate Cloud Zoom for the image.

(function ($) {
  function activateCloudZoom(elem) {
    elem.attr("class", "cloud-zoom");
    elem.CloudZoom();
    elem.css("position", "static").css("display", "inline");

  $j(function() {
    //slideshow activation
    $j(".slidetabs").tabs(".slides > div", {
            
      // enable "cross-fading" effect
      effect: 'fade',
      fadeOutSpeed: "slow",
            
      // start from the beginning after the last tab
      rotate: true
            
      // use the slideshow plugin. It accepts its own configuration
     }).slideshow();
    
     //Cloud Zoom activation
     $(".slide-content").bind("show", function() {
         activateCloudZoom($(this).find("._cloud-zoom"));
     });
   });
})(jQuery);

We change the image class name to "cloud-zoom" and attach the handler to it (it's normally done automatically on the document loading, but we didn't have that). I also changed some display parameters as the parameters set by Cloud Zoom interfere with the slide text. The "show" event is bound to the slide container on the document loading (it might have a different class name).

That's it! Now the lens will be showing normally corresponding to its configuration parameters.