Bxslider in a pop up div

问题

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

Many thanks for your help !

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

回答1:

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:

You need to set some height to it, for the images to show, currently the overflow: hidden hides them

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>

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

But still would need to remove all the activation code for bxslider in monbxslider.js

来源：https://stackoverflow.com/questions/28239290/bxslider-in-a-pop-up-div

标签

javascript

jquery

css

popup

bxslider