Question

我正在尝试在我的bootstrap框架网站上添加图片库功能。

我正在使用Blueimp作为图库。但问题是它没有显示只显示下一个和前一个按钮的图像。请帮帮我。

这是我的Html代码：

<div id="blueimp-gallery" class="blueimp-gallery">
    <!-- The container for the modal slides -->
    <div class="slides"></div>
        <!-- Controls for the borderless lightbox -->
            <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>
            <!-- The modal dialog, which will be used to wrap the lightbox content -->
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"></h4>
                        <div id="links">
                           <a href="images/1.jpg" title="Banana" data-gallery>
                           <img src="images/thumbnails/1.jpg" alt="Banana">
                           </a>
                           <a href="images/2.jpg" title="Apple" data-gallery>
                           <img src="images/thumbnails/2.jpg" alt="Apple">
                           </a>
                           <a href="images/3.jpg" title="Orange" data-gallery>
                           <img src="images/thumbnails/3.jpg" alt="Orange">
                           </a>
                          </div>

                    </div>
                <div class="modal-body next"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                        Previous
                        </button>
                        <button type="button" class="btn btn-primary next">
                        Next
                        <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                </div>
            </div>
        </div>
    </div>

Answer 1

将div元素与#link ID放在整个代码之外。

以下是Bootstrap blueimp的帮助：

https://github.com/blueimp/Bootstrap-Image-Gallery

使用Blueimp的Bootstrap Image Gallery无法正常工作

1 个答案: