设置Blueimp照片库的困难

时间:2014-08-06 19:03:30

标签: javascript html css blueimp

我知道stackOverflow已经有很多关于Blueimp Photo Gallary的问题,但我的问题是如此基本,以至于我无法找到答案,这就是我问的原因。

我无法设置Blueimp,我已经遵循了github的步骤,但它根本不起作用。除此之外,我想从我的flickr获取图像网址,这可能吗?我想是的,但我不知道如何。

如果有人可以帮助我,我会很高兴。

非常感谢。

<html lang="en">
<head>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>blueimp Gallery</title>
<link rel="stylesheet" href="css/blueimp/blueimp-gallery.min.css">

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

</head>
<body>
    <!-- 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"></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>

<div id="links">
    <a href="img/surf/1.jpg" title="Banana">
        <img src="img/surf/1.jpg" alt="Banana">
    </a>
    <a href="img/surf/1.jpg" title="Banana">
        <img src="img/surf/1.jpg" alt="Banana">
    </a>
    <a href="img/surf/1.jpg" title="Banana">
        <img src="img/surf/1.jpg" alt="Banana">
    </a>
</div>

</body> 
<script src="js/blueimp/blueimp-gallery.min.js"></script>
</html>

1 个答案:

答案 0 :(得分:0)

在blueimp-gallery.js之前加载 jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/blueimp/blueimp-gallery.min.js"></script>

并检查Chrome控制台是否有任何错误。