幻燈片不會附加到div

我正在爲我的客戶之一創建特定項目的幻燈片。點擊按鈕時，應該將帶有所有正確圖像的幻燈片添加到ID爲「幻燈片」的div。出於某種原因，當我點擊按鈕時，什麼也沒有發生有人可以看我的代碼，看看有什麼可能是錯的？幻燈片不會附加到div

<html> 
    <head> 
     <title> 
      Black Pro Pix | Professional Photography 
     </title> 
     <meta charset="UTF-8"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" href="blackpropixfallen.css"> 
     <!-- Satisfy Google Font --> 
     <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet"> 
     <!-- Slick Carousel --> 
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> 
     <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 




    </head> 

    <body> 
     <div id="myModal" class="modal"> 
      <div class="modal-dialog"> 
      <div class="modal-content"> 
        <div class = "reveal"> 
         <!-- Modal Content (The Image) --> 
         <img src="" id = "mimg" class = "modalimg" width = "100%" height = "auto"> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div id = "slideshow"> 

     </div> 

        <div class = "hiddenfigures" style = "display:none" > 
         <div class = "slickcarousel"> 
         <img src = "Fallengallery/IMG_4553.jpg"> 
         <img src = "Fallengallery/Interconnected.jpg"> 
         <img src = "Fallengallery/LifeLongLies pt.2 (yellow).jpg"> 
         <img src = "Fallengallery/Mornin' Murderin' Marauder (abstract).jpg"> 
         <img src = "Fallengallery/Mornin' Murderin' Marauder (Red).jpg"> 
         <img src = "Fallengallery/Nightfall (vibrant).jpg"> 
         <img src = "Fallengallery/Paris 15.jpg"> 
         <img src = "Fallengallery/Paris 18.jpg"> 
         <img src = "Fallengallery/Somebody's Watching.jpg"> 
         </div> 
        </div> 
        <div class = "container-fluid"> 
         <div class = "row"> 
         <div class = "col-xs-12"> 
          <button class = "hiddenf"> 
          Hidden Figures 
          </button> 
         </div> 
         </div> 
        </div> 

      <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('.slickcarousel').slick({ 
       autoplay: true, 
       slidesToShow: 4, 
       variableWidth: true, 
       centerMode: true, 
       nextArrow: "<span class = 'glyphicon glyphicon-arrow-right'>", 
       prevArrow: "<span class = 'glyphicon glyphicon-arrow-left'>", 
       slidesToScroll: 1 

       }); 
       $("img").click(function(){ 
       var sr=$(this).attr('src'); 
       $('#mimg').attr('src',sr); 
       $("#myModal").modal(); 
       }); 
       displayHiddenf(); 

      }); 
      function displayHiddenf() { 
       $(".hiddenf").click(function() { 
        $("#slideshow").empty(); 
        $(".hiddenfigures").appendTo("#slideshow"); 
       }); 

    </script> 


    </body> 
</html>

來源

2017-09-08 Breevie

您可以用此替換您的代碼。

$(document).ready(function(){ 
 
    function runSlideShow() { 
 
     $('.slickcarousel').slick({ 
 
      autoplay: true, 
 
      slidesToShow: 4, 
 
      variableWidth: true, 
 
      centerMode: true, 
 
      nextArrow: "<span class = 'glyphicon glyphicon-arrow-right'>", 
 
      prevArrow: "<span class = 'glyphicon glyphicon-arrow-left'>", 
 
      slidesToScroll: 1 
 
     }); 
 
    } 
 
    $(".hiddenf").click(function(){ 
 
     $('.hiddenfigures').css('display','block'); 
 
     runSlideShow(); 
 
    }); 
 
    $("img").click(function(){ 
 
     var sr=$(this).attr('src'); 
 
     $('#mimg').attr('src',sr); 
 
     $("#myModal").modal(); 
 
    }); 
 
});

<div id="myModal" class="modal"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="reveal"> 
 
       <!-- Modal Content (The Image) --> 
 
       <img src="" id = "mimg" class = "modalimg" width = "100%" height = "auto"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div id="slideshow"> 
 
    <div class="hiddenfigures" style="display:none"> 
 
     <div class = "slickcarousel"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class = "container-fluid"> 
 
    <div class = "row"> 
 
     <div class = "col-xs-12"> 
 
      <button class = "hiddenf"> 
 
       Hidden Figures 
 
      </button> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-09-08 12:28:52

非常感謝你！工作 – Breevie

歡迎@Breevie .. :) –

在您的<div> hiddenfigures中，style屬性仍然存在。嘗試在您的js-method中刪除style=display:none;

來源

2017-09-08 12:12:43 user8579977

刪除顯示：無;

刪除DIV

$（「#slideshow」）.wrap（「」）;

來源

2017-09-08 14:55:44

幻燈片不會附加到div

回答

相關問題