//
you're reading...
jQuery

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.

Advertisements

About RailsBlogger

I'm a Software Developer with over 10 years of experience, Java and Ruby on Rails.

Discussion

One thought on “Using Cloud Zoom with a slide show: why the lens doesn’t work properly

  1. F*&# yeah!! Your solution fixed my problem with cloud zoom and WordPress. Big thumbs up.

    Posted by Stubborn Things | May 8, 2013, 12:52 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: