Zooming only on some pictures

[asherraz]

Hi can you take a look here: http://openbci.com/index.php/gettingstarted

Only the picture at the bottom of the page will zoom.

I checked in the console and Zoom shows up on every element.

At first I thought it was because the last picture was the only .jpg and all the rest are .png, but I changed one of the others to .jpg and still no zoom.

Thanks for any help.

[jackmoore]

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});

[asherraz]

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?

[jackmoore]

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.

[asherraz]

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?

[Luphrid]

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

[asherraz]

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});
});

[Luphrid]

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});
});

[asherraz]

Ha, wow, okay thank you!

[Luphrid]

You are welcome.