Twitter Boostrap using Blueimp Gallery

我有一个简单的html来显示库页面。当我点击图片开始幻灯片放映时，只显示第一张图片，其余的显示黑色页面。我不明白为什么。也许我错过了什么？

这是我的代码

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

所以这实际上是我自己的愚蠢。我想打自己一拳。我的图库脚本之前的类链接中的图像链接路径是错误的。

我做的另一个错误是在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>

在我的画廊脚本里面。请将此视为已关闭。

相关内容

最新更新

热门标签：