Magnific Popup的自定义标题

我试图让Magnific Popup根据它使用的目标周围的其他元素显示标题。鉴于以下标记，我希望标题为“Foobar”。Magnific Popup的自定义标题

<div class="container"> 

    <article> 
     <h2>Foo</h2> 
     <figure> 
      <a href="img/img-1.jpg"> 
       <img src="img/img-1.jpg" /> 
      </a> 
      <figcaption> 
       bar1 
      </figcaption>         
     </figure> 
    </article> 

    <article> 
     <h2>Foo</h2> 
     <figure> 
      <a href="img/img-2.jpg"> 
       <img src="img/img-2.jpg" /> 
      </a> 
      <figcaption> 
       bar2 
      </figcaption>         
     </figure> 
    </article> 

</div>

而寻找解决方案在线（包括本上StackOverflow）我已经试过如下代码：

$('.container').magnificPopup({ 
    delegate: 'article figure a', 
    type: 'image', 
    titleSrc: function(item) { 
     return item.el.parent('article').find('h2').text() + item.el.parent('article').find('figcaption').text(); 
    }, 
    gallery:{enabled:true} 
});

塑造的功能可能是一个问题，我甚至一直在努力，简单地返回一个字符串常量，但似乎什么都不做：

titleSrc: function(item) { 
    return "fake Foobar"; 
}

没有人有任何线索，我在做什么错？

注：如果我使用titleSrc，它工作：“标题”，但是这不是我想要的行为，因为它让我有重复的标记内容。

来源

2014-01-22 radu.luchian

你可以只是创建jsfiddle相同，http：//jsfiddle.net – dreamweiver

你确定titleSrc只使用一个字符串？查看文档，你应该把它放在图像下，比如'image：{titleSrc：...}'。 – jazZRo

按照文档titleSrc：{}应该来自内部图像：{}，您可以使用item.el.parents（）代替item.el.parent（）。

纠正代码

 $('.container').magnificPopup({ 
      delegate: 'article figure a', 
      type: 'image', 
      gallery:{enabled:true}, 
      image: { 
      titleSrc: function(item) { 
      return item.el.parents('article').find('h2').html() + item.el.parents('article').find('figcaption').html(); 
      } 
     } 
     });

来源

2014-01-22 11:55:20 krizna

你说得对，问题出在titleSrc：{}以外的位置：{}。所以这个问题其实是我缺乏关注的。感谢@krizna的帮助。 –

我的设计要求我有一个标题&描述每个图像幻灯片，因此我需要庄重弹出一个自定义标题，我试图从@krizna的答案，但我只是得到了title，调试我进入了magnets弹出窗口（jquery.magnefic-popup.js）的js文件，并发现在自定义标记解析时被调用的函数，它被适当调用为“_getTitle”。它获取一个item对象作为参数。我记录了这个item对象，发现它有我们的item参数所在的data属性。

我初始化使用项目选项（在文档初始化3路），在弹出这里是我的自定义项目目标

items: [ 
      { 
       src: 'https://c6.staticflickr.com/9/8785/16698139093_3c30729f1b.jpg"', 
       title: 'We buy Nike shoes', 
       description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' 
      }, 
      { 
       src: 'https://c2.staticflickr.com/8/7662/17307905305_92ae5081bf_b.jpg"', 
       title: 'You can add HTML code dynamically via JS (directly before the initialization), or have it in the page initially (like it\'s done on the demo page)', 
       description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' 
      }, 
      { 
       src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg', 
       title: 'Avoid serving big images (larger than 2000x1500px) for mobile, as they will dramatically reduce animation performanc', 
       description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' 
      } 
     ],

每个项目都有图像的SRC，标题&说明，现在我titleSrc功能是

titleSrc: function(item) { 
       return '<p id="gallery-image-title">' + item.data.title +'</p>' + '<p id="gallery-image-description">' + item.data.description +'</p>'; 
     }

我还修改了“_getTitle”功能，因为它只有在项目对象解析title属性（评论的前两行），我的“_getTitle”现在看起来是这样

_getTitle = function(item) { 
    console.log(item); 
    /*if(item.data && item.data.title !== undefined) 
     return item.data.title;*/ 

    var src = mfp.st.image.titleSrc; 

    if(src) { 
     if($.isFunction(src)) { 
      return src.call(mfp, item); 
     } else if(item.el) { 
      return item.el.attr(src) || ''; 
     } 
    } 
    return ''; 
};

现在我已经控制标记&有2个动态src标题属性。

来源

2016-09-10 12:28:17 carelesslyChoosy

Magnific Popup的自定义标题

回答

相关问题