Bootstrap + jqzoom冲突 [英] Bootstrap + jqzoom conflict
问题描述
我在网页上使用jqZoom和Bootstrap，并且Bootstrap破坏了jqZoom的缩放，如中所述JqZoom和Twitter Bootstrap冲突
I use jqZoom and Bootstrap on my webpage, and Bootstrap breaks the zooming of jqZoom as described in JqZoom and Twitter Bootstrap Conflict
我还对可缩放图像应用了设置 max-width：none的修复方法。这在某些情况下解决了该问题。但是，如果大图像确实很大，则变焦的行为就好像只有一部分图像存在。似乎无法根据图像的大小调整镜头。
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.
我该如何解决？
您可以在以下两个链接中看到效果。它们每个显示两个图像。第一种在两种情况下都很好用。仅在没有Bootstrap的情况下第二个。
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)
源看起来如下，仅在带有标记的带有注释的 Bootstrap 版本中存在的部分：
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>
推荐答案
您必须将css规则更改为 .zoomable img {..} 到 img {..} ，尽管我们不知道为什么。该插件使用一个返回错误宽度的jquery函数。 ：（
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. :(
完整的工作示例如下：
<!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>
这篇关于Bootstrap + jqzoom冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
