9

我正在使用BlueImp Gallery将灯箱添加到我的图片库。因此，当您单击图像缩略图时，它会启动一个带有较大版本图像的灯箱等。

我还想在灯箱的每张幻灯片上添加一些描述性文本和一个按钮，但我无法让它工作。它不会显示我添加的占位符描述。

这是我到目前为止所拥有的；

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>
    <p class="description"></p>
    <a class="prev">‹&lt;/a>
    <a class="next">›&lt;/a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>

    <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>
                <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>
</div>

<div id="links">

<div class="row prints">
  <div class="col-md-4">
    <div class="thumbnail">    
      <div class="caption">
        <a href="http://farm3.staticflickr.com/2843/10406026526_4cd1b56391.jpg" title="Ballooning" data-description="This is a banana." data-gallery>
          <img src="http://farm8.staticflickr.com/7389/10404414563_0914b69e0e.jpg" alt="Ballooning">
        </a>
        <h3>Ballooning</h3>
        <p>from $18.00</p>
        <p><a href="#" class="btn btn-YLP">Find out more</a></p>
      </div>
   </div>
  </div>  
  <div class="col-md-4">
    <div class="thumbnail">    
      <div class="caption">  
        <a href="http://farm6.staticflickr.com/5547/10406009404_c197c2221b.jpg" title="Clearing" data-description="This is a apple." data-gallery>
            <img src="http://farm6.staticflickr.com/5490/10404414523_745ea3065d.jpg" alt="Clearing">
        </a> 
        <h3>Clearing</h3>
        <p>from $18.00</p>
        <p><a href="#" class="btn btn-YLP">Find out more</a></p>
      </div>
   </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">    
      <div class="caption">              
        <a href="http://farm6.staticflickr.com/5510/10406026066_7f95a075ee.jpg" title="Sky/Sea" data-description="This is a cherry." data-gallery>
            <img src="http://farm4.staticflickr.com/3769/10404249505_d767f7c420.jpg" alt="Sky/Sea">
        </a>
        <h3>Sky/Sea</h3>
        <p>from $18.00</p>
        <p><a href="#" class="btn btn-YLP">Find out more</a></p>
      </div>
   </div>
  </div>  
  <div class="col-md-4">
    <div class="thumbnail">    
      <div class="caption">          
        <a href="http://farm4.staticflickr.com/3678/10406009004_5c625e2028.jpg" title="Lights" data-description="This is a grapefruit." data-gallery>
            <img src="http://farm3.staticflickr.com/2814/10404249395_9e4cae5bc7.jpg" alt="Lights">
        </a>
        <h3>Lights</h3>
        <p>from $18.00</p>
        <p><a href="#" class="btn btn-YLP">Find out more</a></p>
      </div>
   </div>
  </div>  
  <div class="col-md-4">
    <div class="thumbnail">    
      <div class="caption">          
        <a href="http://farm6.staticflickr.com/5538/10406019875_8424fbee11.jpg" title="Silhouettes" data-description="This is a orange." data-gallery>
            <img src="http://farm8.staticflickr.com/7343/10404255766_d808d1902d.jpg" alt="Silhouettes">
        </a>
        <h3>Silhouettes</h3>
        <p>from $18.00</p>
        <p><a href="#" class="btn btn-YLP">Find out more</a></p>
      </div>
   </div>
  </div>   
  <div class="col-md-4">
    <div class="thumbnail">    
      <div class="caption">         
        <a href="http://farm4.staticflickr.com/3682/10406009134_3b666324ff.jpg" title="Sway" data-description="This is a kiwi." data-gallery>
            <img src="http://farm6.staticflickr.com/5516/10404249545_7efb481042.jpg" alt="Sway">
        </a>
        <h3>Sway</h3>
        <p>from $18.00</p>
        <p><a href="#" class="btn btn-YLP">Find out more</a></p>
      </div>
   </div>
  </div>  
  <div class="col-md-4">
    <div class="thumbnail">    
      <div class="caption">          
        <a href="http://farm8.staticflickr.com/7425/10406019935_1def1e0c09.jpg" title="Sunset" data-description="This is a grape." data-gallery>
            <img src="http://farm3.staticflickr.com/2810/10404249465_0124b7f3e5.jpg" alt="Sunset">
        </a>
        <h3>Sunset</h3>
        <p>from $18.00</p>
        <p><a href="#" class="btn btn-YLP">Find out more</a></p>
      </div>
   </div>
  </div>  
  <div class="col-md-4">
    <div class="thumbnail">    
      <div class="caption">          
        <a href="http://farm6.staticflickr.com/5532/10406009324_4cd1b56391.jpg" title="Lighthouse" data-description="This is a strawberry." data-gallery>
            <img src="http://farm6.staticflickr.com/5543/10404240054_6261498220.jpg" alt="Lighthouse">
        </a>
        <h3>Lighthouse</h3>
        <p>from $18.00</p>
        <p><a href="#" class="btn btn-YLP">Find out more</a></p>
      </div>
   </div>
  </div> 
  <div class="col-md-4">
    <div class="thumbnail">    
      <div class="caption">           
        <a href="http://farm4.staticflickr.com/3747/10406026506_6a4dbf2df0.jpg" title="Slabs"data-description="This is a pineapple." data-gallery>
            <img src="http://farm8.staticflickr.com/7345/10404249655_7512bf6565.jpg" alt="Slabs">
        </a>
        <h3>Slabs</h3>
        <p>from $18.00</p>
        <p><a href="#" class="btn btn-YLP">Find out more</a></p>
      </div>
   </div>
  </div>        
</div>
</div>

CSS：

.blueimp-gallery > .description {
  position: absolute;
  top: 30px;
  left: 15px;
  color: red;
  display: none;
}

.blueimp-gallery-controls > .description {
  display: block;
}

JS：

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));
            }
        }
    }
);

在我的身体中（gallery.js 是我添加上述 JS 的文件）：

  <script src="//code.jquery.com/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="lib/fancybox/jquery.fancybox.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
  <script src="js/bootstrap-image-gallery.min.js"></script>
  <script src="js/gallery.js"></script>

任何关于我哪里出错的指示将不胜感激！

4

5 回答 5

9

您可以在元素上传递任何需要的数据a，然后将其显示在图库中。我花了很多时间试图找到答案，所以我把它留在这里。这是一个例子：

HTML：

<div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <p class="description"></p>
    <p class="example"></p>
    ...
</div>
------
<div id="links">
    <a href="images/banana.jpg" title="Banana" data-description="This is a banana." data-example="Additional data">Banana</a>
    <a href="images/apple.jpg" title="Apple" data-description="This is an apple." data-example="Additional data">Apple</a>
</div>

JS：

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);
};

CSS： 您可以使用.scss它来重构它，但这只是示例

.blueimp-gallery > .description, .blueimp-gallery > .example {
  position: absolute;
  top: 30px;
  left: 15px;
  color: #fff;
  display: none;
}
.blueimp-gallery-controls > .description, .blueimp-gallery-controls > .example {
  display: block;
}
于 2016-04-29T13:01:14.593 回答
3

抱歉，如果迟到了，但我找到了一种方法，只需将 JS 更改为：

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));
            }
        }
    }
);

对此：

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].innerHTML = text;
            }
        }
    }
);
于 2014-07-19T20:20:48.210 回答
2 
          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));
              }
              }
          });

http://jsfiddle.net/2B3bN/25/

看看这个，它是一个工作的。只需检查与我相比你做错了什么。

于 2014-01-09T07:26:56.917 回答
0

这仅适用于第一个链接...

我试图让它与数据描述中的 html 一起使用。我让它工作并提取描述文本，但是你如何解析 html 以作为链接工作？

http://jsfiddle.net/LXp76/

<a href="http://lorempixel.com/200/200/"  title="This is the title element 1" data-gallery="1" data-description="This is a description.<a href='http://google.com' target='_blank' class='btn btn-warning'>This is link 1</a>"><img src="http://lorempixel.com/80/80/" alt="" ></a>

在这里它与 FancyBox 一起工作，http://jsfiddle.net/yShjB/2/

但我更愿意使用 BlueImp Gallery ..

于 2014-07-12T21:54:38.570 回答
0

利用

document.getElementById('links').getElementsByTagName('a') or .children()
于 2014-07-10T13:33:32.080 回答