, 그것은 0 픽셀의 인라인 높이가 이미지를 표시하려면 현재 overflow: hidden을 숨 깁니다.
스크립트의 핵심 문제는 실제로 초기로드시 DIV#popUpDiv의 인라인 스타일이입니다.이것은 bxslider가 이미지 크기를 가져올 수 없으므로 기본적으로 0px, 즉 보이는 높이 문제로 이어진다는 것을 의미합니다. ul.bxslider이 DOM에 표시되거나 구성 요소가 그 일을 할 수없는 경우에만 bxslider를 만들어야합니다. 당신이 볼 수 있듯이
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MA pop-up avec SLIDER !!</title>
<!-- pop up : CSS -->
<link href="http://s547036800.onlinehome.fr/css/styles.css" rel="stylesheet" type="text/css" />
<!-- pop up : jquery -->
<script type="text/javascript" src="http://s547036800.onlinehome.fr/js/css-pop.js"></script>
<!-- bxSlider : CSS -->
<link href="http://s547036800.onlinehome.fr/css/jquery.bxslider.css" rel="stylesheet" />
<!-- bxSlider CSS file -->
<link href="http://s547036800.onlinehome.fr/css/jquery.bxslider.css" rel="stylesheet" />
<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://s547036800.onlinehome.fr/js/jquery.bxslider.min.js"></script>
<!-- <script src="http://s547036800.onlinehome.fr/js/monbxslider.js"></script> -->
<script type="text/javascript">
function popup2(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
$(".bxslider").bxSlider();
}
</script>
</head>
<body>
<div id="container">
<div id="mainContent">
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis tempore sapiente sed ut, ex fugit eaque enim laborum rem et similique. Tempora adipisci, facilis aliquid nesciunt perferendis quas dolorum optio! </p> -->
<a href="#" onclick="popup2('popUpDiv')">Projet Uranus</a>
<!--POPUP-->
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<h1>Projet Uranus : développement web</h1>
<!--<img src="http://placekitten.com/800/400" alt="un gros chat" /> -->
<!-- <div> class="bx-wrapper" ? -->
<ul class="bxslider">
<li><img src="http://s547036800.onlinehome.fr/images/ordi1.jpeg"/></li>
<li><img src="http://s547036800.onlinehome.fr/images/ordi2.jpeg" /></li>
<li><img src="http://s547036800.onlinehome.fr/images/ordi3.jpeg" /></li>
</ul>
<!-- </div> -->
<div id="contexte">
<h2>CONTEXTE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, odit, omnis! Quas quo, excepturi explicabo nisi consectetur modi mollitia vero aliquam enim eos dolorem, provident pariatur tenetur cumque? Vel, tenetur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam corporis fugit laborum sed ab, cum veritatis omnis laudantium odio dolore, sunt quidem est itaque quaerat nihil deleniti placeat eligendi vero.</p>
</div>
<div>
<h2>APPROCHE </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, id, ipsa. Dicta ratione eos adipisci nemo aspernatur totam fugit, mollitia praesentium magnam doloremque tempora architecto a, accusamus soluta nostrum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dignissimos veritatis id eligendi voluptatum ullam, sint amet non et, ea laborum illo sit quae distinctio accusantium ipsam. Cum, consequatur, animi.</p>
</div>
<aside>
<div class="site">
<a href="http://google.fr/" target="_blank" >SEE THE WEBSITE</a>
</div>
<div class="retour">
<a href="#realisations" onclick="popup('popUpDiv')">BACK</a>
</div>
</aside>
</div> <!-- fin du contenu de divpopup-->
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
, 나는 문서로드에서 활성화 된 bxslider으로 monbxslider.js에서 주석과 popup2() 방법에 활성화 :
이 작업을 수행 할 수있는 방법을 보여주기 위해 신속하고 더러운 방법은 이것이다 내가 추가하고 지금은 잘 작동합니다.
물론 깨끗한 버전을 만들어야하지만이 작업은 수행해야 할 기본적인 아이디어입니다.
편집 :이 일반적으로 내가 이런 짓을 했을까 방법이 아니라 당신이 원하는 경우에 당신은 당신의 팝업 방법으로이 스크립트를 사용할 수 있습니다
var ImageSlider = null;
function popup2(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
if(ImageSlider == null) {
ImageSlider = $(".bxslider").bxSlider();
}
}
하지만 여전히 모든를 제거해야합니다 bxslider의 활성화 코드는 monbxslider.js
입니다. 감사합니다. Idra! 그래서 나는 이것을 bxslider의 js 파일에서 바꾸어야한다고 생각하니? –
@ LaëtitiaCook 나는 당신이해야 할 일을 보여주기 위해 이것을 어떻게 빠르고 실용적인 방법으로 추가 했습니까? – Idra
나는 당신이 의미하는 바를 이해하지만 더 이상 링크 작업을 할 수 없습니까? Projet Uranus –