1
我用jqZoom和引导在我的网页,并引导打破jqZoom的缩放为JqZoom and Twitter Bootstrap Conflict引导+ jqzoom冲突
说明我还申请设置'max宽度的修复:none'为可缩放图像。这在某些情况下解决了问题。但是,如果大图像真的很大,缩放的行为就好像只有图像的一部分存在。它似乎没有根据图像的大小调整镜头。
我该如何解决这个问题?
您可以在以下两个链接中看到效果。他们每个显示两个图像。第一个在两种情况下都很好。第二个只有没有Bootstrap。
Version with Bootstrap (not working)
Version without Bootstrap (working)
源如下所示,该部分只存在于与引导版本标有注释:
<!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>