Question

我创建了一个简单的网页，通过图库插件显示图片。在非常简单的实现之后，页面呈现时没有输出，其中应该存在图库标记。

我正在使用blueImp图库，并遵循此处的设置说明 - 至于“控件”https://github.com/blueimp/Gallery#description

所有相关的css，JS和img目录已合并到网页目录中。

下面的标记：

<!DOCTYPE html>
<html>

    <head>
        <script src="js/blueimp-gallery.min.js" async></script>
        <script src="js/bootstrap.min.js" async></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" async></script>
        <script src="js/script.js" async></script>
        <link rel="stylesheet" href="css/blueimp-gallery.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>

    <body>


        <div id="main">
            <div class="navbar-wrapper" style="border: 12px solid black;">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Wilhelm Reich</a></li>

                </ul>
            </div>
            <br>
            <br>
            <br>
            <br>
        </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"></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/1.jpg" title="LittleMan"></a>
            <a href="img/2.jpg" title="LittleMan"></a>
            <a href="img/3.jpg" title="LittleMan"></a>
        </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>

    </body>
</html>

Answer 1

通过将缩略图图像源添加到标记来解决此问题。虽然在文档中说明了这个可选项。

创建图像文件的链接列表，可选择附带缩略图并将其添加到网页正文中，然后再添加 Gallery脚本：

bluimp Gallery实现 - HTML或JS渲染

1 个答案: