как добавить пользовательский заголовок из атрибута в увеличенное окно iframe - PullRequest
Новая
       26

как добавить пользовательский заголовок из атрибута в увеличенное окно iframe

0 голосов
/ 09 апреля 2019

У меня есть страница портфолио с несколькими столбцами с изображениями. Когда какой-либо проект выбран и нажата, он откроет великолепный всплывающий слайдер. Внутри объединена галерея с изображениями и iframe. Я хочу, чтобы в каждый проект добавлялся пользовательский заголовок из атрибута, который присваивается изображению и фрейму.

У меня есть следующий HTML 

<div class="col-md-4 items web graphic">
    <div class="item-img">

        <img src="{{'thumb/logo-thumb.jpg'|media}}" alt="image">
        <div class="item-img-overlay">
            <div class="overlay-info v-middle text-center">
                <h6 class="sm-titl">Title</h6>
                <div class="icons">

                    <span class="icon link">
                        <a class="toggle-modal" href="#gallery-4">
                            <span class="icon-magnifying-glass"></span>
                        </a>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="portfolio-gallery" id="gallery-4">

        <a href="{{'full/photo.jpg'|media}}" title="title" data-web_source="" data-web_title="">
            <img src="{{'full/photo.jpg'|media}}" alt="...">
        </a>

        <a href="{{'full/photo-1.jpg'|media}}" title="title 1" data-web_source="" data-web_title="">
            <img src="{{'full/photo-1.jpg'|media}}" alt="...">
        </a>

        <a href="{{ 'custom-page' | page}}" class="mfp-iframe" data-title_title="title for iframe" data-web_source="https://www.custom-page.com" data-web_title="www.custom-page.com">
        </a>

        <a href="{{ 'custom-page-1' | page}}" class="mfp-iframe" data-title_title="another title for iframe" data-web_source="https://www.custom-page-1.com/" data-web_title="www.custom-page-1.com">
        </a>

    </div>

</div>

а вот мой js 

 $(document).ready(function() {

      let web_title = document.querySelector('.mfp-iframe').dataset.web_title;
      let web_href_title = document.querySelector('.mfp-iframe').dataset.web_source;
      let title_title = $('.mfp-iframe').each(function() {
         console.log($(this).data('title_title'));
          });

    $('a.toggle-modal').on('click', function(event) {
      event.preventDefault();

      var gallery = $(this).attr('href');

      $(gallery).magnificPopup({
        delegate: 'a',
        type:'image',
        image: {
          markup: '<div class="mfp-figure">'+
          '<div class="mfp-close"></div>'+
          '<div class="mfp-img"></div>'+
          '<div class="mfp-bottom-bar">'+
          '<div class="mfp-title"></div>'+
          '<div class="mfp-counter"></div>'+
          '</div>',                                  
                          cursor: 'mfp-zoom-out-cur',
                          verticalFit: true,

                          titleSrc: function(item) {
                            return item.el.attr('title') + ' &middot; <a class="image-source-link-image" href="' + item.el.attr('data-web_source') + '" target="_blank">' + item.el.attr('data-web_title') + '</a>';
                          },

                          tError: '<a href="%url%">The image</a> could not be loaded.'
                          },

                        gallery: {
                          enabled: true,
                            tCounter: '<span class="mfp-counter">%curr% z %total%</span>'
                        },

                        iframe: {
                         markup: '<div class="mfp-iframe-scaler">'+
                                    '<div class="mfp-close"></div>'+
                                    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                                    '<div class="mfp-counter"></div>'+
                                    ' &middot; <a class="image-source-link-image" href="' + web_href_title + '" target="_blank">' + title_title + '</a>' +
                                  '</div>'
                      }
                       }).magnificPopup('open');
                });
              });

для изображений я использовал функцию titleSrc, но для iframe это не работает. поэтому я создаю свою собственную переменную, чтобы получить этот набор данных 

let web_title = document.querySelector('.mfp-iframe').dataset.web_title;

но это будет только первый атрибут, а не изменение текста при перемещении фреймов. Поэтому я создаю цикл, чтобы получить все атрибуты, но я могу получить выбранный, чтобы отобразить текущий заголовок для этого iframe 

let title_title = $('.mfp-iframe').each(function() {
         console.log($(this).data('title_title'));
          });

Пожалуйста, я новичок в программировании, и я не знаю, как выбрать и отобразить текст в атрибуте, который изменится при скольжении по фреймам? Спасибо

...