Twitter bootstrap 自举&x2B;jqzoom冲突
我在我的网页上使用jqZoom和Bootstrap,Bootstrap中断了jqZoom的缩放,如中所述 我还为可缩放图像应用了设置“最大宽度:无”的修复。这在某些情况下解决了问题。但是,如果大图像确实很大,缩放的行为就好像只显示了图像的一部分。它似乎无法根据图像的大小调整透镜 我怎样才能解决这个问题 您可以在以下两个链接中看到效果。它们分别显示两幅图像。第一种方法在两种情况下都很有效。第二个是没有引导的 源代码如下所示,该部分仅存在于带有注释标记的引导版本中:Twitter bootstrap 自举&x2B;jqzoom冲突,twitter-bootstrap,conflict,jqzoom,Twitter Bootstrap,Conflict,Jqzoom,我在我的网页上使用jqZoom和Bootstrap,Bootstrap中断了jqZoom的缩放,如中所述 我还为可缩放图像应用了设置“最大宽度:无”的修复。这在某些情况下解决了问题。但是,如果大图像确实很大,缩放的行为就好像只显示了图像的一部分。它似乎无法根据图像的大小调整透镜 我怎样才能解决这个问题 您可以在以下两个链接中看到效果。它们分别显示两幅图像。第一种方法在两种情况下都很有效。第二个是没有引导的 源代码如下所示,该部分仅存在于带有注释标记的引导版本中: <!DOCTYPE h
<!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>
.flowBreak
{
清楚:两者都有
}
.zoomable img{最大宽度:无}
例1
例2
$(文档).ready(函数(){
$('.zoomable').jqzoom();
});
您必须将css规则从.zoomable img{..}
更改为img{..}
,尽管我们不理解原因。该插件使用了返回错误宽度的jquery函数:(
完整的工作示例如下所示:
<!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>
.flowBreak{
明确:两者皆有;
}
img{
最大宽度:无;
}
例1
例2
$(文档).ready(函数(){
$('.zoomable').jqzoom();
});