jquery - 如何在不使用项目选项的情况下向放大弹出窗口添加长描述？

Question

我正在尝试让 Magnific Popup 为我工作，但我遇到了困难。对于 Javascript 和 Jquery，我有点新手。我已经浏览了好几天的文档(字面意思)并搜索 stackoverflow。我在那里找到了一些答案，但似乎不符合我想要的。

我想要做的是通过多个具有某种样式的 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>