我使用blueimp Gallery。
我按照说明添加了一个附加属性,并显示错误
blueimp Gallery: No or empty list provided as first argument.
<div id="links" class="links"><div class="photo">
<a href="/uploads/gallery/KN5wu5Nt7gwdrmuopBUm3riKJauz8bXsmDp2X3n0.jpeg" title="32434424242" data-description="Alex" data-gallery style>…</a>
<a href="/uploads/gallery/4fPRgdqbh3FPbrw3MTZoyRoYcqNpHa84Mtjxb4f2.jpeg" title="car" data-description="Alex2" data-gallery>…</a>
</div></div>
如果我按照说明进行所有操作,为什么它不起作用?
<div id="links" class="links">
<div class="photo">
@foreach($images as $image)
<a href="/{{$image->image}}" title="{{$image->title}}" data-description="{{$image->name}}" data-gallery=""><img src="/{{$image->image}}" width="200"></a>
@endforeach
</div>
</div>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<p class="description"></p>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<script src="/js/blueimp-helper.js"></script>
<script src="/js/blueimp-gallery.js"></script>
<script src="/js/blueimp-gallery-fullscreen.js"></script>
<script src="/js/blueimp-gallery-indicator.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/jquery.blueimp-gallery.js"></script>
<script>
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
</script>
滑块本身可以工作,但是由于某些原因,我的更改未应用。
///////////////////////////////////////////////// ///////////////////
answer
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,
onslide: function (index, slide) {
self = this;
var initializeAdditional = function (index, data, klass, self) {
var text = self.list[index].getAttribute(data),
node = self.container.find(klass);
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
};
initializeAdditional(index, 'data-description', '.description', self);
initializeAdditional(index, 'data-example', '.example', self);
}
},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};