Twitter Boostrap使用Blueimp Gallery

我有一個簡單的html來顯示一個畫廊頁面。當我點擊圖片開始圖庫幻燈片時，只顯示第一張圖片，其餘圖片顯示黑色頁面。我無法弄清楚爲什麼。也許有什麼我可能錯過了？Twitter Boostrap使用Blueimp Gallery

這裏是我的代碼

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Responsive Web Mobile</title> 

<link rel="stylesheet" href="css/blueimp/blueimp-gallery.min.css"> 
<script src="js/blueimp/blueimp-gallery.min.js"></script> 

</head> 
<body> 

<h1>Gallery for my works</h1> 

<div id="links"> 
    <div class="slides"> 
    <a href="img/1.jpg" title="1"> 
      <img src="img/thumbnails/1.jpg" alt="1"> 
     </a> 
     <a href="images/2.jpg" title="2"> 
      <img src="img/thumbnails/2.jpg" alt="2"> 
     </a> 
     <a href="images/3.jpg" title="3"> 
      <img src="img/thumbnails/3.jpg" alt="3"> 
     </a> 

    </div> 
</div> 

<!-- The Gallery as lightbox dialog, should be a child element of the document body --> 
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"> 
    <div class="slides"> 
    <a href="img/1.jpg" title="1" description="Description for Image 1"> 
      <img src="img/1.jpg" alt="1"> 
     </a> 
     <a href="images/2.jpg" title="1" description="Description for Image 2"> 
      <img src="img/2.jpg" alt="1"> 
     </a> 
     <a href="images/3.jpg" title="3" description="Description for Image 3"> 
      <img src="img/3.jpg" alt="3"> 
     </a> 
    </div> 
    <h3 class="title"></h3> 
    <h3 class="description"></h3> 
    <a class="prev">‹</a> 
    <a class="next">›</a> 
    <a class="close">×</a> 
    <a class="play-pause"></a> 
    <ol class="indicator"></ol> 
</div> 

<script> 
    document.getElementById('links').onclick = function (event) { 
     event = event || window.event; 
     var target = event.target || event.srcElement, 
     link = target.src ? target.parentNode : target, 
     options = {index: link, event: event}, 
     links = this.getElementsByTagName('a'); 
     blueimp.Gallery(links, options); 
    }; 
    </script> 

    <script src="js/jquery.blueimp-gallery.js"></script> 
    <script src="js/blueimp/demo.js"></script> 

</body> 
</html>

來源

2014-09-27 hermie_brown

所以這是我自己的愚蠢其實。我覺得自己要揍一拳。我的圖片鏈接路徑在我的Gallery腳本錯誤之前的課程鏈接中。

我做的另一個錯誤是在我的Gallery腳本中的幻燈片div中添加圖像鏈接。

<div class="slides"> 
<a href="img/1.jpg" title="1" description="Description for Image 1"> 
     <img src="img/1.jpg" alt="1"> 
    </a> 
    <a href="images/2.jpg" title="1" description="Description for Image 2"> 
     <img src="img/2.jpg" alt="1"> 
    </a> 
    <a href="images/3.jpg" title="3" description="Description for Image 3"> 
     <img src="img/3.jpg" alt="3"> 
    </a> 
</div>

我的畫廊腳本里面。請考慮關閉。

來源

2014-09-27 07:37:18

Twitter Boostrap使用Blueimp Gallery

回答

相關問題