彈出div中的Bxslider

Question

我正在嘗試啟動一個包含bx滑塊的彈出div。 啟動彈出div的鏈接工作正常。 顯示一些文本的彈出窗口也是如此，但是bxslider內部的圖像沒有出現。 我以為這是z-index問題，但似乎不是（或確實無法解決）。 加載和方向控制圖像在其中，但圖像不在。

非常感謝您的幫助！

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

在此處輸入圖片說明

您需要為其設置一些高度，以使圖像顯示出來，當前是overflow: hidden隱藏了它們

但是腳本的核心問題實際上是在初始加載時DIV#popUpDiv具有內聯display: none樣式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()方法中將其激活，現在可以正常工作了。

當然，您需要對此做一個干凈的版本，但這是您需要做的基本想法。

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所有激活代碼

彈出div中的Bxslider

問題描述

1 個解決方案

解決方案1
0 已采納 2015-01-30 15:47:41

彈出div中的Bxslider

問題描述

1 個解決方案

解決方案1 0 已采納 2015-01-30 15:47:41

解決方案1
0 已采納 2015-01-30 15:47:41