jQuery Cycle (Lite)과 액체 레이아웃을 결합하십시오.

이것은 지금 당황하고 있습니다. jQuery Cycle Lite plugin과 간단한 액체 레이아웃을 결합하고 싶습니다.jQuery Cycle (Lite)과 액체 레이아웃을 결합하십시오.

내 문제는 슬라이드 쇼 아래의 콘텐츠가 사라지는 것입니다. 슬라이드 쇼 JS가 활성화되어 있으면 슬라이드 쇼가 포함 된 div의 높이가 0px 인 것 같습니다. 슬라이드 쇼 코드를 제거하고 대신 정지 이미지를 사용하면 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 : I 사용이 해결 한

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

출처

2011-02-25 poisontofu

body { 
overflow: auto; 
min-height: 100%; 
}

출처

2011-02-25 12:40:56 benhowdle89

불행히도 - 여기에 [해당 CSS가 추가 된 내 사례] (http://jsbin.com/ubufi5/2/)가 있습니다. – poisontofu

부하에서 높은 이미지를 확인하고, 높이를 유지 jQuery를 아래 #slidebox div 따라서 창 크기가 조정될 때 (example here), 나는이 질문을 잠시 동안 열어 두겠다. ooked, 또는 적어도이 문제가 발생하는 이유에 대한 설명.

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'); 
    }); 
});

출처

2011-02-25 14:11:38 poisontofu

jQuery Cycle (Lite)과 액체 레이아웃을 결합하십시오.

답변

관련 문제