Question

我正在尝试启动一个包含bx滑块的弹出式div。启动弹出式div的链接工作正常。弹出窗口也出现了一些文字但是bxslider中的图像没有出现。我认为这是一个z索引问题，但似乎没有（或者确实无法修复它）。加载和方向控制图像在那里但不是图像..

非常感谢您的帮助！

<!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>

Answer 1

如果查看输出代码，它没有将正确的高度设置为bx-viewport，它的内联高度为0px：

enter image description here

你需要为它设置一些高度，对于要显示的图像，目前overflow: hidden隐藏它们

但是你的脚本的核心问题实际上是在初始加载时DIV#popUpDiv的内联样式为display: none，这意味着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>

正如您所看到的，我注释了monbxslider.js并在文档加载时激活了bxslider，并在我添加的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的所有激活码

Bxslider在弹出式div中

1 个答案: