如何使用宏大的弹出窗口为画廊添加标题? [英] How to include caption for gallery using magnific popup?

问题描述

在尝试使用华丽的弹出式图库时，我试图在图像下的实际网页上添加标题.使用div和class标题或轮播标题，如果画廊中的图像没有一个接一个地垂直堆叠，我将无法做到这一点.我该怎么办?

I am trying to include a caption on the actual webpage under the image while using the magnificence popup gallery. Using a div and class caption or carousel-caption, I am unable to do so without the images in the gallery stacking vertically one by one. How can I do this?

<a href="img/base/ggg.PNG" title="HELLO" class="chicken">
  <img src="img/base/pop.PNG" alt="remember your alt tag" />
</a>

$(document).ready(function() {
      $('.chicken').magnificPopup({ 
         type: 'image',
         gallery:{enabled:true}
         // other options here
         // end each line (except the last) with a comma
      });
   });

js小提琴: https://jsfiddle.net/sb4btox7/

推荐答案

由于我尚无足够的信誉积分要发表评论，因此我在这里发表评论，除了提供解决方案.

Since I don't yet have enough reputation points to comment, I'm commenting here, in addition to providing a solution.

评论:JSFiddle无法使用您的http://图像，因为JSFiddle试图从https://

Comment: JSFiddle isn't working with your http:// images because JSFiddle is trying to serve them from https://

解决方案:

您已经到一半了.使字幕起作用的过程分为两部分.

You are halfway there. There are 2 parts to making the captions work.

1. 您已正确将链接放置在锚标记中，而不是图片标签

2. 您必须在您的标题中指定标题来源这样的初始化脚本.

1. You correctly have put the link in the anchor tag and not the image tag

2. You must specify your title source in your initialization script like this.

$(document).ready(function() {
    $('.chicken').magnificPopup({ 
        type: 'image',
        gallery:{enabled:true},
        type: 'image',
        image: {
            titleSrc: 'title' 
            // this tells the script which attribute has your caption
        }
    });
});

然后，脚本会自动将标题写入标有 class ="mfp-title"

The script then automatically writes your caption to its div labeled class="mfp-title"

奖励解决方案:我需要在新窗口中打开灯箱图像，以便手机上的用户放大，因此我在第一个 titleSrc 声明之后添加了此图像:

BONUS Solution: I needed my lightbox image to open in a new window for users on their phones to zoom in, so I added this after the first titleSrc declaration:

    titleSrc: 'title',
    titleSrc: function(item) {
        return '<a href="' + item.el.attr('href') + '">' + item.el.attr('title') + '</a>';
        }

此信息在文档中: http://dimsemenov.com/plugins/magnific-图片类型"部分中的-popup/documentation.html

这篇关于如何使用宏大的弹出窗口为画廊添加标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！