显示 Magnific Popup 的标题和标题

Question

请查看下面的示例（推荐全屏视图）。我们有一个带有标题、图像，有时甚至是标题的滑块。我设法从属性中获取标题和标题，并将其放入 Magnific Popup 的 titleSrc 中。

我不需要 titleSrc 中的标题和标题，但我想要与滑块中相同的标记 => 标题 (h3)、图像 (img) 和标题 (p) 在彼此下方。

遗憾的是，Magnific Popup 不提供标题和标题元素。任何人都可以想办法实现这一目标吗？

提前致谢，马克

$(".slider__wrapper").each(function() {
  let $slider_wrapper = $(this);
  let $slider = $slider_wrapper.find(".slider");
  let $slider_items = $slider.find(".slider__items");
  var options = {
    adaptiveHeight: true,
    infinite: true
  }

  $slider_items.slick(options);

  $slider_items.magnificPopup({
    delegate: ":not(.slick-cloned) a",
    type: "image",
    gallery: {
      enabled: true,
      tCounter: ""
    },
    image: {
      titleSrc: function(item) {
        var markup = '';
        if (item.el[0].hasAttribute("title")) {
          markup += '<h3>' + item.el.attr('title') + '</h3>';
        }

        if (item.el[0].hasAttribute("caption")) {
          markup += '<p>' + item.el.attr('caption') + '</p>';
        }
        return markup
      }
    },
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>


<div class="slider__wrapper">
  <div class="slider__wrapper__item">
    <div class="slider">
      <div class="slider__items">
        <div class="slider__item">
          <h3>Title 1</h3>
          <a href='https://placeimg.com/640/480/nature' title="Title 1" caption='Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum' class="slider__item__image">

            <img src="https://placeimg.com/640/480/nature">
          </a>
          <p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
        </div>
        <div class="slider__item">
          <h3>Title 2</h3>
          <a href='https://placeimg.com/640/480/people' title="Title 2" class="slider__item__image">

            <img src='https://placeimg.com/640/480/people'></a>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

如果您只是不想在悬停图像时出现任何内容，那么使用 data-attribute 代替 title 和 caption 怎么样？

$(".slider__wrapper").each(function() {
  let $slider_wrapper = $(this);
  let $slider = $slider_wrapper.find(".slider");
  let $slider_items = $slider.find(".slider__items");
  var options = {
    adaptiveHeight: true,
    infinite: true
  }

  $slider_items.slick(options);

  $slider_items.magnificPopup({
    delegate: ":not(.slick-cloned) a",
    type: "image",
    gallery: {
      enabled: true,
      tCounter: ""
    },
    image: {
      titleSrc: function(item) {
        var markup = '';
        if (item.el[0].hasAttribute("data-title")) {
          markup += '<h3>' + item.el.attr('data-title') + '</h3>';
        }

        if (item.el[0].hasAttribute("data-caption")) {
          markup += '<p>' + item.el.attr('data-caption') + '</p>';
        }
        return markup
      }
    },
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>


<div class="slider__wrapper">
  <div class="slider__wrapper__item">
    <div class="slider">
      <div class="slider__items">
        <div class="slider__item">
          <h3>Title 1</h3>
          <a href='https://placeimg.com/640/480/nature' data-title="Title 1" data-caption='Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum' class="slider__item__image">

            <img src="https://placeimg.com/640/480/nature">
          </a>
          <p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
        </div>
        <div class="slider__item">
          <h3>Title 2</h3>
          <a href='https://placeimg.com/640/480/people' data-title="Title 2" class="slider__item__image">

            <img src='https://placeimg.com/640/480/people'></a>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

或者...您确实需要删除这些属性，然后只需使用一个数组来存储所有图像信息并更改 titleSrc 函数。

var picInfo = [{
    title: 'Title 1',
    caption: 'Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum'
  },
  {
    title: 'Title 2',
    caption: 'Foo?'
  },
  {
    title: 'Title 3',
    caption: 'Bar!'
  }
]

$(".slider__wrapper").each(function() {
  let $slider_wrapper = $(this);
  let $slider = $slider_wrapper.find(".slider");
  let $slider_items = $slider.find(".slider__items");
  var options = {
    adaptiveHeight: true,
    infinite: true
  }

  $slider_items.slick(options);

  $slider_items.magnificPopup({
    delegate: ":not(.slick-cloned) a",
    type: "image",
    gallery: {
      enabled: true,
      tCounter: ""
    },
    image: {
      titleSrc: function(item) {
        var index = $(item.el[0]).index('.slider__item__image') - 1
        index = index == -1 ? index + picInfo.length : index
        index %= picInfo.length;
        var top = $('figure').height()
        var title = '<h3 id="pic_title" style="display:none">' + picInfo[index].title + '</h3>';
        var caption = '<p>' + picInfo[index].caption + '</p>';
        var markup = title + caption;
        return markup;
      },
    },
    callbacks: {
      updateStatus: function(data) {
        SetTitleTop(data)
      },
      resize: function(data) {
        SetTitleTop(data)
      },
    }
  });
});

function SetTitleTop(data) {
  if (data) {
    if (data.status == "ready") {
      var top = $('.mfp-img').height()
      if (top) {
        $('#pic_title').css({
          top: -top - 50,
          position: "absolute",
          display: "block"
        })
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>


<div class="slider__wrapper">
  <div class="slider__wrapper__item">
    <div class="slider">
      <div class="slider__items">
        <div class="slider__item">
          <h3>Title 1</h3>
          <a href='https://placeimg.com/640/480/nature' class="slider__item__image">

            <img src="https://placeimg.com/640/480/nature">
          </a>
          <p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
        </div>
        <div class="slider__item">
          <h3>Title 2</h3>
          <a href='https://placeimg.com/640/480/people' class="slider__item__image">

            <img src='https://placeimg.com/640/480/people'></a>
        </div>
        <div class="slider__item">
          <h3>Title 3</h3>
          <a href='https://placeimg.com/640/480/any' class="slider__item__image">

            <img src='https://placeimg.com/640/480/any'></a>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

根据评论，我添加了两个回调来调整标题的位置。 See more API

显示 Magnific Popup 的标题和标题

Display Title and Caption for Magnific Popup

javascript

jquery

magnific-popup