jqzoom on multiple images

Question

I have the standard setup of one main image and multiple thumbnails which can be cliced to change the main image. I'm using jqzoom on the main image but was having the common problem of the main image changing and the zoomed image just going blank. Looking through stack overflow i found some code that claimed to correct this, and in a way it does. But rather than allow each changed image to have a zoom, it makes the main image just a link to the large version, bypassing the jqzoom function call.

to show the two examples: with the standard jqzoom code and thumbnails not showing zooms: http://designerspider.net/clients/jge/project2.php?id=17

with added code and images just becoming links: http://designerspider.net/clients/jge/project.php?id=17

the code i added was

  $(".thumbs a").click(function(){  

      $(".jqclass").unbind();

      $(".jqclass").jqzoom(options);

      return false;
  };

if anyone can see if i have missed anything, or need to do it a diffferent way, i'd appreciate any and all advice. I can't understand why adding the extra function would disable the main jqzoom feature :/

Answer 1

You may find, because you are using two functions side by side, one to change images, and the other to unbind the zoom function, and then rebind it, the 2nd function is finishing before the image has changed. So when the image does change, it still won't work.

Second problem, you are not actually unbinding anything.

So, try firstly changing to:

$(".jqclass").unbind(".jqclass");

Alternatively you could migrate a little more to jQuery. I have tested this:

You HTML would look like this:

<div class="projectphotos">
    <div id="photo_1">
        <a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="jqclass">
            <img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
        </a>
    </div>
    <div id="photo_2" style="display:none;">
        <a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg">
            <img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
        </a>
    </div>                                       
    <div class="thumbsdiv">
        <ul class="thumbs">
            <li>
                <img rel="photo_1" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" width="80" />
            </li>
            <li>
                <img rel="photo_2" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" width="80" />
            </li>
        </ul>
    </div>
</div>

And your jQuery like this, I've explained each line:

var options = {
    zoomWidth: 250,
    zoomHeight: 250,
    position: 'right',
    yOffset: 0,
    xOffset: 0,
    title: false
}
$(".jqclass").jqzoom(options);

// Make the thumbnail look clickable:
$(".thumbs img").each(function() {
    $(this).css('cursor', 'pointer');
});
// React to clicking on a thumbnail:
$(".thumbs img").click(function() {
    // Get the photo linked to:
    var photo = $(this).attr('rel');
    // Unbind the zoom:
    $(".jqclass").unbind(".jqclass");
    // Hide the current image via its parent DIV:
    $(".jqclass").parent().hide();
    // Remove teh jqclass:
    $(".jqclass").removeClass("jqclass");
    // Show the clicked photo:
    $("#"+photo).show();
    // Add the class and the zoom:
    $("#"+photo+" a").addClass("jqclass").jqzoom(options);
});

Answer 2

This is how you can clean the data from jQZoom:

$('.jqclass').removeData('jqzoom');

Because jQZoom saves the object data the following way:

$(el).data("jqzoom", obj);