Question

这是网站的链接：https://www.silvanacasciaro.it/ 画廊是紧随其后的3个圆形图像集中展示鞋子和包包的画廊，旁边是“ i nostri品牌”。问题是，无论您单击什么图像，左上角的小标题都将显示第一个图像的名称，无论该名称是什么，然后从此处开始，而不是显示所单击照片的实际名称。任何帮助将不胜感激。

这是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">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
        <!-- The modal dialog, which will be used to wrap the lightbox content -->
        <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>

这是js：


    <script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
    <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/bootstrap-image-gallery.min.js"></script>

    <script>
    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,
              onclose: function () {
                        // Callback function executed when the Gallery is about to be closed.
                        jQuery('body').css('overflow','auto !important');
                    },
              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-title', '.title', self);
              }
            },
            links = this.getElementsByTagName('a');
          blueimp.Gallery(links, options);

    };
    </script>

Answer 1

问题是让父元素。在此行中，您尝试让父元素：

link = target.src ? target.parentNode : target,

但是实际上它会得到

<div class="image_wrapper">
<img class="" alt="Tronchetto | Silvana Casciaro" src="https://www.silvanacasciaro.it/wp-content/uploads/2019/04/CHIARINI-BOLOGNA-tronchetto.jpg">
</div>

您唯一需要解决的问题是将target.parentNode替换为target.parentNode.parentNode并获取此信息：

link = target.src ? target.parentNode.parentNode : target,

在这种情况下，变量“ link”将获得正确的对象，并且代码将开始工作：

<a href="https://www.silvanacasciaro.it/wp-content/uploads/2019/05/LIU-JO-–-Zaino-Romantica2.jpg" data-title="Zaino Romantica" data-gallery="#blueimp-gallery" class="maggiori_info" title="Zaino Romantica">
      <div class="image_wrapper">
              <img class="" alt="Zaino Romantica | Silvana Casciaro" src="https://www.silvanacasciaro.it/wp-content/uploads/2019/05/LIU-JO-–-Zaino-Romantica2.jpg">
            </div><!--image_wrapper-->
       <h4 class="prod_title">Zaino Romantica</h4>
       <button class="btn btn-lg">Scopri</button>
     </a>

p.s。您的代码还存在其他一些问题，您可能需要在浏览器控制台中对其进行调试。

基于产品的图库，动态标题无法正常工作

1 个答案: