Bootstrap + jqzoom conflict

I use jqZoom and Bootstrap on my webpage, and Bootstrap breaks the zooming of jqZoom as described in JqZoom and Twitter Bootstrap Conflict

I also applied the fix of setting ´max-width:none´ for the zoomable image. This solved the problem in some cases. But if the large image is really large, the zoom behaves as if only a part of the image were present. It seems that it fails to adjust the lense according to size of the image.

How can I fix this?

You can see the effect in the following two links. They display two images each. The first one works nice in both cases. The second one only without Bootstrap.

Version with Bootstrap (not working)

Version without Bootstrap (working)

The source looks as follows, the part only present in the with Bootstrap version marked with comments:

<!DOCTYPE html>
<html lang="en">
  <head>
<!-- the following is only present in the *with Bootstrap* section -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- the following is only present in the *with Bootstrap* section -->

    <link rel="stylesheet" type="text/css" href="stylesheets/jquery.jqzoom.css" >
    <style> 

    .flowBreak
    {
        clear:both
    }

    .zoomable img {max-width:none}
    </style>

  </head>
  <body>
    <h5>Example 1</h5>
    <a href='images/selfTest.png' class='zoomable'>  
        <img src='images/selfTest_small.png' />  
    </a>
    <div class='flowBreak'>
    </div>

    <h5>Example 2</h5>
    <a href='images/example2.png' class='zoomable'>  
        <img src='images/example2_small.png' />  
    </a>
    <div class='flowBreak'>
    </div>

    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
    </script>
    <script src='javascripts/jquery.jqzoom-core-pack.js' type='text/javascript'>
    </script>
    <script type='text/javascript'>

    $(document).ready(function(){  
        $('.zoomable').jqzoom();  
    }); 
    </script>
  </body>
</html>

Sandra

You must change the css rule from .zoomable img {..} to img {..}, although we don't understand why. The plugin uses a jquery function that returns a wrong width. :(

The complete working example looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link href="bootstrap.min.css" rel="stylesheet" media="screen">-->
<link href="bootstrap-experiments.css" rel="stylesheet" media="screen">
<!--<link href="bootstrap-responsive.css" rel="stylesheet">-->
<link rel="stylesheet" type="text/css" href="jquery.jqzoom.css" >
<style>
  .flowBreak {
    clear: both;
  }
  img {
    max-width: none;
  }
</style>
</head>
<body>
<h5>Example 1</h5>
<a href='selfTest.png' class='zoomable'>
  <img src='selfTest_small.png'/>
</a>
<div class='flowBreak'>
</div>

<h5>Example 2</h5>
<a href='example2.png' class='zoomable'>
  <img src='example2_small.png'/>
</a>
<div class='flowBreak'>
</div>

<script src='jquery.min.js' type='text/javascript'></script>
<!--<script src='jquery.jqzoom-core-pack.js' type='text/javascript'></script>-->
<script src='jquery.jqzoom-core.js' type='text/javascript'></script>
<script type='text/javascript'>
  $(document).ready (function (){
    $('.zoomable').jqzoom ();
  });
</script>
</body>
</html>

来源：https://stackoverflow.com/questions/16259640/bootstrap-jqzoom-conflict

标签

twitter-bootstrap

conflict

jQzoom