强大的弹出窗口为图像添加属性data-pin-no-hover=“true

Question

因为pinterest小部件不能在android平板电脑上运行，所以我想从Magnific弹出窗口将data-pin-no-hover="true“(pinterest)添加到img容器

这是我的代码

/**
* jQuery Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/)
**/
$('.open-gallery-link').click(function(event) {
event.preventDefault();
$('.mfp-container img').attr('data-pin-no-hover', 'true');
var items = [];
  $($(this).attr('href')).find('a').each(function() {
  items.push( {
      src: $(this).attr('href'),
      title: $(this).attr('alt'),
      img: $('.mfp-container img').attr('data-pin-no-hover', 'true')
    } );
  });
  $.magnificPopup.open({
  type:'image',
  preload: [0,2],
  items:items,
    gallery: {
      enabled: true
    },

  });
});

有人知道解决方案吗？

Answer 1

只有在打开弹出窗口后，

• .mfp-container才在DOM中可用。
• 使用回调(如change )来访问当前项http://dimsemenov.com/plugins/magnific-popup/documentation.html#events

的内容

Answer 2

这似乎很管用。作为参考，我的解决方案

/**
* jQuery Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/)
**/
$('.open-gallery-link').click(function(event) {
event.preventDefault();
var items = [];
  $($(this).attr('href')).find('a').each(function() {
  items.push( {
      src: $(this).attr('href'),
      title: $(this).attr('alt')
    } );
  });
  $.magnificPopup.open({
  type:'image',
  preload: [0,2],
    callbacks: {
      change: function() {
       this.content.find('.mfp-img').attr('data-pin-no-hover', 'true')
      },
    },
  items:items,
    gallery: {
      enabled: true
    },
  });
});