显示宏弹出窗口的标题和标题

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

如果只是不希望在悬停图像时出现任何内容，那么如何使用数据属性而不是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> 

根据评论，我添加了两个回调来调整标题的位置。 查看更多API