如何在不使用 item 选项的情况下向 Magnific Popup 添加长描述？

Question

我正在尝试让 Magnific Popup 为我工作，但我遇到了困难。当谈到 Javascript 和 Jquery 时，我有点新手。我已经浏览了几天的文档（字面意思）并搜索stackoverflow。我已经找到了一些答案，但它似乎不适合我想要的。

我想要做的是通过缩略图在多个 div 中显示一个画廊，这些 div 有一些样式。最好我希望隐藏长描述，直到通过单击各个画廊项目打开画廊。然后在 mfp-imag 的右侧（向右浮动）显示长描述（我将向左浮动）。

HTML

<div class="fourColumns">
  <div class="fourColumnsHeader">
    Image Title<br>
    <a class="with_caption" title="This is the Caption" href="/images/image.jpg"><img src="/images/image.jpg" alt="Image" width="223" height="131"></a>
    <div>
      This is one long discription<br>
      This is some more detail...<br><br>
      - Bullet<br> <!-- This is just a placeholder for an ul -->
      - Bullet<br>
      - Bullet
    </div>
  </div>
</div>

<div class="fourColumns">
  ...
</div>

<div class="fourColumns">
  ...
</div>

<div class="fourColumns">
  ...
</div>

我想我需要这样的东西 Javascript

<script type="text/javascript">
$('.fourColumns').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  // other options
  gallery: {enabled: true},
  image: {
  markup: '<div class="mfp-figure">'+
          '<div class="mfp-close"></div>'+
          '<div class="mfp-img"></div>'+
          '<div class="mfp-description"></div>'+
          '<div class="mfp-bottom-bar">'+
            '<div class="mfp-title"></div>'+
            '<div class="mfp-counter"></div>'+
          '</div>'+
        '</div>', // Popup HTML markup. `.mfp-img` div will be replaced with img tag,  `.mfp-close` by close button

  cursor: 'mfp-zoom-out-cur', // Class that adds zoom cursor, will be added to body. Set to   null to disable zoom out cursor. 

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

  preloader: true,
  callbacks: {
    elementParse: function(item) {
    // Function will fire for each target element
    // "item.el" is a target DOM element (if present)
    // "item.src" is a source that you may modify
        // store the text in imgCaption variable, - if you will need this later on
        var imgCaption =  item.el.find('p');                    // This is wrong.
        // append the text to the element     
        item.content.find('.mfp-description').html(imgCaption); // This is wrong.
    },     
  }

});
</script>

我希望这足够彻底。任何帮助将不胜感激。谢谢！ :)

Answer 1

所以我想出了自己的解决方案。查看Magnific Popup 的主页，我注意到示例单图像灯箱。我注意到标题可以包含 HTML 并且可以移动。

所以我将 HTML 放入链接中的我的 title="" 中，如下图所示。如果您不想在鼠标悬停时显示此内容，则必须在图像上添加标题。我还在 mfp 中移动了标题 div，如下所示。

代码如下：

<div class="fourColumns">
  <div class="fourColumnsHeader">
    Image Title
  </div>
  <a title="This is the Caption <!-- notice this is left open -->
    <ul class=&quot;mfp-ul&quot;> <!-- if you want to use classes you have to quote this way. Other wise it will crash. -->
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
    " href="/images/image.jpg"><img src="/images/image.jpg" title="Image" width="223" height="131">
  </a> <!-- Above notice the title is set for the image. This will keep you code from showing on mouse-over. -->
</div>

<div class="fourColumns">
  ...
</div>

<div class="fourColumns">
  ...
</div>

<div class="fourColumns">
  ...
</div>

Javascript

<script type="text/javascript">
$('.fourColumns').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  // other options
  gallery: {enabled: true},
  image: {
  markup: '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+ // Floated left
            '<div class="mfp-title"></div>'+ // This is floated right shows up on the right side
            '<div class="mfp-bottom-bar">'+
              '<div class="mfp-counter"></div>'+
            '</div>'+
          '</div>', // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button

  cursor: 'mfp-zoom-out-cur', // Class that adds zoom cursor, will be added to body. Set to null to disable zoom out cursor. 

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

  preloader: true,

});
</script>

Answer 2

文档中的另一种方式： http://dimsemenov.com/plugins/magnific-popup/documentation.html

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>'+
          '</div>', // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button

  cursor: 'mfp-zoom-out-cur', // Class that adds zoom cursor, will be added to body. Set to null to disable zoom out cursor.

  titleSrc: 'title', // Attribute of the target element that contains caption for the slide.
  // Or the function that should return the title. For example:
  // titleSrc: function(item) {
  //   return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
  // }

  verticalFit: true, // Fits image in area vertically

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