Галерея товаров, динамическое название не работает должным образом

Question

Это ссылка на сайт: https://www.silvanacasciaro.it/ Галерея с туфлями и сумками после трех круглых изображений коллекций, рядом с «i nostri brand». Проблема в том, что какое бы изображение вы ни щелкали, маленький заголовок в верхнем левом углу показывает имя первого изображения, независимо от того, что и начинается с него, вместо того, чтобы показывать фактическое имя фотографии, на которую щелкнули. Любая помощь будет принята с благодарностью.

Вот 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. У вашего кода также есть некоторые другие проблемы, и вам может потребоваться отладить его в консоли браузера.