JqZoom and Twitter Bootstrap Conflict

Question

Here's a jsfiddle.

Using inner zoom (though it doesn't work with any of the zoom types), it should work like so: http://www.mind-projects.it/projects/jqzoom/demos.php#demo4

Any ideas? Seems to be an issue with the responsive nature of Bootstrap. Removing Bootstrap's max-width:100% CSS declaration on the img tag improves it a bit, but it remains broken.

Answer 1

You need to override the max-width.

.zoomWindow img {max-width:none}

Answer 2

I had the same problem. I fixed it adding this:

.zoomWrapperImage img{
  max-width: none;
}

Answer 3

You might like to add some other fixes for img max-width:100%

This code can go immediately after instantiating the jqzoom:

jQuery('.zoomPup img').css('width', jQuery('.zoomPad img').width() );
jQuery('.zoomPup img').css('height', jQuery('.zoomPad img').height() ); 

And this in the general CSS:

.zoomPup img {max-width:none; max-height: none;}
.zoomWindow img {max-width:none; max-height: none;}