我正在尝试使用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>