显示Magnific Popup的标题和标题

时间：2018-04-21 08:36:20

标签： javascript jquery magnific-popup

请查看以下示例（建议使用全屏视图）。我们有一个标题，图像，有时甚至是标题的滑块。我设法从属性中获取标题和标题，并将其放在Magnific Popup的titleSrc中。

我不需要titleSrc中的标题和标题，但我想要与slide =＆gt;中相同的标记。标题（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>

1 个答案:

答案 0 :(得分：0)

如果您只是在悬停图片时不想显示任何内容，那么如何使用数据属性代替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

相关问题
最新问题