Сочетание jQuery Cycle (Lite) и гибкого макета

Это уже давно меня бесит — я хочу объединить плагин jQuery Cycle Lite с простой жидкой раскладкой.

Моя проблема заключается в том, что содержимое под слайд-шоу исчезает под ним — когда слайд-шоу JS активно, кажется, что div, содержащий слайд-шоу, имеет высоту 0 пикселей. Если я удалю код слайд-шоу (и вместо этого просто использую неподвижное изображение), div будет перемещен на правильную высоту изображением внутри него.

Поскольку само слайд-шоу масштабируется с помощью гибкого макета, я не могу указать высоту слайд-шоу в пикселях. Может ли кто-нибудь предложить обходной путь?

Код приведен ниже, но вам может помочь просмотр примера, с которым я работал, по адресу http://jsbin.com/ubufi5/edit.

Спасибо за чтение!

HTML/CSS:

<head>
  <meta charset="utf-8" />
  <title>Slideshow in a liquid layout</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://misc.somnambulist.org/jquery.cycle.lite.1.0.js"></script>

  <style type="text/css">
    body { max-width: 1120px;  margin: 100px auto; border: 1px solid #ff0; background: #666;}
    body img { width: 100%; }
  </style>
</head>
<body id="home">
  <h1>Test</h1>
  <div id="slidebox">
    <img src="http://misc.somnambulist.org/test2.jpg" />
    <img src="http://misc.somnambulist.org/test4.jpg" />
  </div>
  <h2>Lots of text here so it clears the image</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

JS:

$(function() {
  $('#slidebox').cycle();
});

css jquery-plugins jquery-cycle
person poisontofu    schedule 25.02.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я решил эту проблему, используя приведенный ниже jQuery, который проверяет самое высокое изображение при загрузке и соответственно поддерживает высоту #slidebox div при изменении размера окна (пример здесь), но я собираюсь оставить этот вопрос открытым на некоторое время в надежде, что есть какая-то ошеломляюще базовая вещь CSS, которую я как-то упустил, или, по крайней мере, объяснение, как почему я сталкиваюсь с этой проблемой.

function SetHeightToTallestChild(i) {
  var tallest = 0;
  $(i).children().each(function(){
    var h = $(this).height();
    if(h > tallest)
      tallest = h;
  });
  $(i).height(tallest);
}

$(document).ready(function() {
  SetHeightToTallestChild('#slidebox');
  $(function() {
      $('#slidebox').cycle();
  });  
  $(window).resize(function() {
    SetHeightToTallestChild('#slidebox');
  });
});
person poisontofu    schedule 25.02.2011

arrow_upward

arrow_downward

person    schedule
comment
К сожалению, это не исправляет — вот мой пример с добавленным CSS. - person poisontofu; 25.02.2011