Question

我使用的插件是：http://dimsemenov.com/plugins/magnific-popup/

我想知道是否有办法将标题设置为图像标题以外的其他内容。我想从特定的标签/类中获取标题。

我的结构是这样的：

<a class="image-link" href="path.jpg">
<img src="path.jpg">
<p>Want this as caption</p>
</a>

我认为它是“titleSrc：'title'，”参数，但我不知道如何为标题选择p标签（如果需要，可以附加一个类或id）。

非常感谢任何帮助。

Answer 1

你可以尝试

titleSrc: function(item){
    return item.el.find('p').text()
}

Answer 2

据我所知，您使用的是一个弹出窗口（一个图像，而不是一个图库）。因此，您只需要“请求”一次标题， - 在打开弹出窗口后（在图库中，您需要在每次图像/其他内容更改时获取文本）。首先，让我们看看文档并找出如何定义回调：link 1

您可以在callbacks选项中定义回调。除此之外，还使用目标元素上的triggerHandler调度所有Magnific Popup事件（或者如果元素不存在则记录）。

$('.image-link').magnificPopup({
  // you may add other options here, e.g.:
  preloader: true,

  callbacks: {
    open: function() {
      // Will fire when this exact popup is opened
      // this - is Magnific Popup object
    },
    close: function() {
      // Will fire when popup is closed
    }
    // e.t.c.
  }
});

看起来'open'回调正是我们所需要的。您也可以浏览整个列表， - 将来可能会有用。

我们的下一步我将分成3个较小的部分：

打开弹出窗口后获取您单击的元素。
找到其中的段落并获取其中包含的文字。
将此文本附加到打开的弹出窗口中的所需元素中。

让我们来看看文档的下一部分， - 公共属性。

magnificPopup.st.el // Target clicked element that opened 
                    //popup (works if popup is initialized from DOM element)

这将返回

<a class="image-link" href="path.jpg">
<img src="path.jpg">
<p>Want this as caption</p>
</a>

所以我们可以得到这样的段落文本

magnificPopup.st.el.find('p')

或者，没有定义magnificPopup变量，

this.st.el.find('p')

现在您应该选择要添加此文本的元素。我没有看到您更改了标准标记（如果您愿意，您肯定可以这样做 - 例如，当内置标记不够而且您需要添加额外元素时， - 您可以在文档中找到一些信息），所以我可以建议将图片顶部的标题添加到<div class="mfp-header"></div>。这里有另一个公共财产来帮助：

magnificPopup.content // direct reference to jQuery DOM element 
                      //that you open in popup

现在让我们改进我们的代码：

callbacks: {
    open: function() {
        // store the text in imgCaption variable, - if you will need this later on
        var imgCaption =  this.st.el.find('p');  
        // append the text to the element 
        this.content.find('.mfp-header').html(imgCaption); 
     }     
 }

因此，整个脚本应如下所示：

jQuery(document).ready(function () { 
     $('.image-link').magnificPopup({ 
          type:'image', 
          closeOnContentClick:'true', 
          mainClass: 'entry', 
          image: {
               titleSrc: function(item) { 
                   return item.el.attr('title') 
          // Actually, you don't need it now, because the text of paragraph 
          // plays the title role, but if you need both things, for example
          // 'title' for title and <p> for description, you can leave this method
               } 
          },
          callbacks: {
               open: function() {
                   var imgCaption =  this.st.el.find('p');  
                   this.content.find('.mfp-header').html(imgCaption); 
               }     
          }
      }); 
 });

希望你能得到这个想法。随意提出任何问题，将尽力提供帮助。

Answer 3

您的titleSrc必须在HTML 中指定

例如：

<img src="path.jpg" title="Image Title">

为此，你的jQuery将是：

image: { titleSrc: 'title' }

您也可以使用data-title代替title。您可以使用其他data-属性添加更多参数，例如标题 ,.

例如：

<img src="path.jpg" title="Image Title" data-caption="Image Caption">

为此，你的jQuery将是：

image: { titleSrc: function(item) { return item.el.attr('title') + item.el.attr('data-caption'); } }

您还可以在函数中添加HTML样式元素：

image: { titleSrc: function(item) { return '<strong>' + item.el.attr('title') + '</strong><br />' + item.el.attr('data-caption'); } }

如何将标题设置为特定的div类

3 个答案: