Zooming only on some pictures about zoom HOT 9 CLOSED

Ok, I think I see what the issue is. The zoom plugin is based on the natural width and height of the image. The default zoom magnify multiplier is 1 (100%), so if you are already showing your zoomed image at full size there is no visible change. You can try setting the magnify property to a value larger than 1 for the effect to be applied to images already at their full size. For example, using code from your page:

  $('img')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom({magnify: 2});

from zoom.

Thank you Jack, that did the trick!

Also, how do I exclude some pictures from the zoom?

This line doesn't seem to do it:
$('#pic1').trigger('zoom.destroy');

Is it because the javascript setting on the img element overrides this?

from zoom.

You are assigning zoom to the parent element, so you would do this instead:

$('#pic1').parent().trigger('zoom.destroy');

However, it would be better to exclude images before assigning:

 $('img:not(#pic1)')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom({magnify: 2});

My advice would be to give the images you want to use zoom with their own class, so that it's opt-in rather than opt-out.

from zoom.

Hey Jack, one last question. I'm new to this. I have already given the images I want to use zoom with their own class. How do I incorporate it into the javascript?

from zoom.

The zoom images automatically get a class of "zoomImg" when they are put on the page.

from zoom.

Right, but he said his advice would be to give the images you want to use zoom with their own class, so that it's opt-in rather than opt-out. I'm trying to only use zoom on certain images on the page. Right now I have it setup so any img element gets the zoom (below), and trying to figure out how to insert the class that I setup into that code so that only images with the class then get the class zoomImg.

$(document).ready(function(){
  $('img')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom({magnify:1.5});
});

from zoom.

Oh I see! You just need to modify your selector.

$(document).ready(function(){
  $('.yourNewClass')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom({magnify:1.5});
});

from zoom.

Ha, wow, okay thank you!

from zoom.

You are welcome.

from zoom.