Blueimp galllery不工作

时间:2016-04-15 00:51:16

标签: javascript css angularjs blueimp

我正在尝试使用blueimp图库,但出现了问题 - 点击后我只是在浏览器而不是灯箱中打开了全尺寸图像。 这是标记:

 <div class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel" id="#blueimp-gallery-letters">
                <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><!--/.carousel-->
            <div id="letter-links" class="row">
                <div class="col-sm-3" ng-repeat="l in letters">
                    <p>
                        <a ng-href="{{l.Url}}" data-gallery="#blueimp-gallery-letters" title="{{l.Title}}">
                            <img class="img-responsive img-thumbnail" ng-src="{{l.UrlThumb}}" alt="{{l.Title}}">
                        </a>
                    </p>
                    <h3><small class="designation">{{l.Title}}</small></h3>
                </div>
            </div>

这个初始化代码:

document.getElementById('letter-links').onclick = function (event) {
        event = event || window.event;
        var target = event.target || event.srcElement;
        var link = target.src ? target.parentNode : target;
        var options = {
            index: link,
            event: event,
            container: '#blueimp-gallery-letters',
            carousel: true
        };
        var links = this.getElementsByTagName('a');
        blueimp.Gallery(links, options);
    };

我在选项中使用容器名称,因为在同一页面上还有一个库。 附:除了这些链接,我还应该使用其他任何东西吗?

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/blueimp-gallery/2.15.0/css/blueimp-gallery.min.css">
    <script src="https://cdn.jsdelivr.net/blueimp-gallery/2.15.0/js/blueimp-gallery.min.js"></script>

0 个答案:

没有答案