Question

我的投资组合页面带有一些带有图像的列。选择并单击某个项目后，它将打开放大弹出式滑块。内部是结合了图片和iframe的图库。我想为每个项目从提供给image和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时，该属性仅具有第一个属性，而不会更改文本。因此，我创建了一个循环以获取所有属性，但是我可以检索选定的属性以显示此iframe的当前标题

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

请问我是编程的新手，我不知道如何选择和显示在iframe上滑动时会改变的属性中的文本？谢谢

如何将自定义标题从属性添加到大型弹出iframe

0 个答案: