javascript - Blueimp 画廊不工作

Question

我一直在四处寻找并试图找到 Blueimp 无法工作的答案...

这非常令人沮丧，这是一个学校团队网站，我希望它很快就能完成。

这是我的代码片段:

<!-- Images -->
    <div id="links">
        <a href="1.jpg" title="Banana">
            <img src="1.jpg" alt="Banana">
        </a>
        <a href="2.jpg" title="Apple">
            <img src="2.jpg" alt="Apple">
        </a>
    </div>

    <!-- Photo Gallery Courtesy of Blueimp -->
    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <div class="slides"></div>
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
    </div>

    <script type="text/javascript">document.getElementById("links").onclick=function(e){e=e||window.event;var t=e.target||e.srcElement,n=t.src?t.parentNode:t,r={index:n,event:e},i=this.getElementsByTagName("a");blueimp.Gallery(i,r)}</script>

这些是我的头部部分的引用文献:

<!-- Styles -->
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/styles.css" />
<link rel="stylesheet" href="/css/animate.css" />
<link rel="stylesheet" href="/css/blueimp-gallery.min.css" />
<link rel="stylesheet" href="/css/bootstrap-image-gallery.min.css" />

这些是文档底部的 JS 引用:

<!-- JS at bottom for faster load -->
<script type="text/javascript" src="/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/scripts/menu_jquery.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.blueimp-gallery.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-image-gallery.min.js"></script>

如果有人能告诉我出了什么问题，那就太好了？就我个人而言，文档似乎非常模糊，这似乎是一个很棒的产品。我现在将描述我得到的结果。

我正在获取图像，好吧，但它们没有调整大小并且非常大......它看起来一点也不像画廊。我可以点击图像，但是，它只是像预期的那样使页面变暗，但没有图像库滑动花哨的东西。

那么，是否有更好的画廊系统或更好的教程，甚至更好，有人可以准确地教我如何做到这一点？

非常感谢!

Answer 1

在

中包含属性 数据库

示例:

<div id="links">
    <a href="1.jpg" title="Banana" data-gallery>
        <img src="1.jpg" alt="Banana">
    </a>
    <a href="2.jpg" title="Apple" data-gallery>
        <img src="2.jpg" alt="Apple">
    </a>
</div>