Сочетание jQuery Cycle (Lite) и жидкого макета - PullRequest
Новая
       25

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

0 голосов
/ 25 февраля 2011

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

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

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

Код приведен ниже, но он может помочь при просмотре примера, с которым я работал на 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();
});

Ответы [ 2 ]

1 голос
/ 25 февраля 2011

Я решил это, используя приведенный ниже jQuery, который проверяет самое высокое изображение при загрузке и поддерживает высоту #slidebox деления соответственно при изменении размера окна ( пример здесь ), но я ' Я собираюсь оставить этот вопрос открытым некоторое время в надежде, что есть какая-то сногсшибательная базовая вещь 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');
  });
});
0 голосов
/ 25 февраля 2011 
body {
overflow:  auto;
min-height: 100%;
}
...