Question

我有一个简单的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>

Answer 1

实际上这是我自己的愚蠢。我觉得自己要打一拳。在我的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>

我的Gallery脚本内部。请考虑关闭。

Twitter Bootstrap使用Blueimp Gallery

1 个答案: