1

私は自分の Web ページで jqZoom と Bootstrap を使用しており、JqZoom と Twitter の Bootstrap Conflict で説明されているように、Bootstrap は jqZoom のズームを中断します。

また、ズーム可能な画像に「max-width:none」を設定する修正を適用しました。これにより、場合によっては問題が解決しました。しかし、大きい画像が非常に大きい場合、ズームは画像の一部のみが存在するかのように動作します。画像のサイズに応じたレンズの調整に失敗しているようです。

どうすればこれを修正できますか?

次の 2 つのリンクで効果を確認できます。それぞれ 2 つの画像が表示されます。最初のものはどちらの場合でもうまく機能します。Bootstrap なしの 2 つ目のみ。

ブートストラップ付きバージョン(動作しない)

ブートストラップなしのバージョン(動作)

ソースは次のようになります。コメントでマークされたBootstrapバージョンにのみ存在する部分です。

<!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>
4

1 に答える 1

2

理由はわかりませんが、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>
于 2013-04-29T15:53:00.587 に答える