blueimp Gallery:没有或作为第一个参数提供了空列表

时间:2018-11-04 19:54:44

标签: javascript

我使用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);
};

0 个答案:

没有答案