Bxslider在弹出div [英] Bxslider in a pop up div
问题描述
我试图启动一个弹出式div，其中将包含一个bx滑块。
启动弹出式div的链接工作正常。所以弹出窗口出现一些文本，但bxslider内的图像不会出现。我认为这是一个z-index问题，但似乎没有（或没有解决它的确实）。加载和方向控制图像是有的，但没有图像..
I am trying to launch a pop up div which will contain a bx slider. The link that launches the pop up div works fine. So is the pop up which appears with some text but the images inside the bxslider don't appear. I thought it was a z-index issue but seems not (or did not manage to fix it indeed). The loading and direction control images are there but not the images..
非常感谢您的帮助！
<!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>pop-up with SLIDER </title>
<!-- pop up : CSS -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- pop up : jquery -->
<script type="text/javascript" src="js/css-pop.js"></script>
<!-- bxSlider : CSS -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<!-- bxSlider CSS file -->
<link href="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="js/jquery.bxslider.min.js"></script>
<script src="js/monbxslider.js"></script>
</head>
<body>
<div id="container">
<div id="mainContent">
<a href="#" onclick="popup('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>
<ul class="bxslider">
<li><img src="images/ordi1.jpeg"/></li>
<li><img src="images/ordi2.jpeg" /></li>
<li><img src="images/ordi3.jpeg" /></li>
</ul>
</div> <!-- END of divpopup-->
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
推荐答案
它接缝没有设置正确的高度 bx-viewport 如果查看输出代码，它的内联高度为0px：
It seams that you have not set the correct height to bx-viewport if you look at the output code, it has an inline height of 0px:
您需要设置一些高度，为了图片显示，目前 overflow：hidden 隐藏他们
You need to set some height to it, for the images to show, currently the overflow: hidden hides them
但是你的脚本的核心问题是实际上在初始加载时， DIV＃popUpDiv 具有 display：none 的内联样式，这意味着bxslider不能获得你的图像的尺寸，所以它默认为0px，即你看到的高度问题。只有当 ul.bxslider 在DOM中可见时，或者组件不能做到这一点，您才需要创建bxslider。
But the core problem with your script is actually in the fact that on initial load the DIV#popUpDiv has the inline style of display: none this means that the bxslider can't get the dimensions of your images so it by default goes to 0px i.e. the height problem you see. You need to create the bxslider only once the ul.bxslider is visible in the DOM, or the component can't do it's thing.
一个快速和肮脏的方式来演示如何做到这一点是：
A quick and dirty way to demonstrate how you can do this is this:
<!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>
正如你所看到的，我注释掉了 monbxslider.js 激活bxslider文档加载并激活它在 popup2（）方法我添加，现在它工作正常。
As you can see, I commented out the monbxslider.js with activated the bxslider on document load and activated it in the popup2() method I added and now it works fine.
当然，你需要做一个干净的版本，但这是你需要做的基本想法。
Of course you need to make a clean version of this, but this is the basic idea of what you need to do.
编辑：一般来说，这不是我的做法，但如果你想要你可以使用这个脚本作为弹出方法：
EDIT : In general this is not how I would do this, but if you want you could use this script as your popup method:
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
But still would need to remove all the activation code for bxslider in monbxslider.js
这篇关于Bxslider在弹出div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
