Bootstrap + jqzoom конфликт

Я использую jqZoom и Bootstrap на вебе-странице, и Bootstrap ломает масштабирование jqZoom, как описан в JqZoom and Twitter Bootstrap Conflict Bootstrap + jqzoom конфликт

Я также применил затруднительное положение установки'max ширины: none' для масштабируемых изображений. Это позволило решить проблему в некоторых случаях. Но если большое изображение действительно велико, зум ведет себя так, как будто присутствует только часть изображения. Кажется, что он не может настроить линзу в соответствии с размером изображения.

Как это исправить?

Вы можете увидеть эффект в следующих двух ссылках. Они отображают по два изображения. Первый работает хорошо в обоих случаях. Второй - без Bootstrap.

Version with Bootstrap (not working)

Version without Bootstrap (working)

Источник выглядит следующим образом, часть присутствует только в с 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>

источник

2013-04-28 Jens Schauder

Вы должны изменить правила 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-29 15:53:00 Sandra

ответ

Смежные вопросы