尝试使用 Fancybox 在标题上方添加标题答案

【问题标题】：Trying to add title above caption with Fancybox尝试使用 Fancybox 在标题上方添加标题
【发布时间】：2020-09-01 19:31:37
【问题描述】：

我已经看过其他一些关于此的帖子，但我似乎无法在我的 fancybox 库中显示标题。我想在标题上方有一个标题，这样我就可以单独设置它的样式。也许它与 data-fancybox="images" 标签有关，但我不确定。非常感谢任何帮助。

https://codepen.io/tomogram/pen/xxwybMO

$('.mob-btn').click(function(){
        $(this).toggleClass("click");
        $('.mob-nav').toggleClass("show");
        $('.imglist').toggleClass("move-right");
        $('.cov-box').toggleClass("move-right");
        $('.page-heading').toggleClass("move-right");
    })

    $('.gal-btn').click(function(){
        $('nav ul .gal-show').toggle(200);
        $('nav ul .rotate').toggleClass("rotate");
    });

    $('.nav ul li').click(function(){
        $(this).addClass("active").siblings().removeClass("active");
    })

.imglist {
    margin-left: 0;
    margin-right: 0;
    padding-top: 4.5rem;
    transition: 0.2s ease-in-out;
}

.imglist.move-right {
    margin-left: 120px;
    margin-right: -120px;
}

a img {
    max-width: 96%;
    padding: 1.5px;
    overflow: hidden;
    border-radius: 0;
    transition: 0.2s ease-in-out;
}

a img:hover {
    transform: scale(1.01);
    opacity: .9;
}

@media (min-width: 620px){
    .page-heading {
        font-size: .5rem;
        letter-spacing: .8rem;
        padding: 0 1rem 0 2rem;
    }

    a img {
        max-width: 45%;
        padding: 2px;
    } 
  
  }

  @media (min-width: 920px){
    .page-heading {
      text-align: center;
      position: absolute;
      left: 20%;
      right: 20%;
      padding: 0 0 0 0;
    }

    .page-heading.move-right {
      opacity: .5;
      margin-left: 120px;
      margin-right: -120px;
    }

    a img {
        max-width: 30%;
    }
  }

  @media (min-width: 1400px){
    a img {
        max-width: 20%;
    }

    .imglist {
        margin-right: -4rem;
        margin-left: -4rem;
    }
  }


.imglist {
    text-align: center;
}

.fancybox-caption {
    color: white;
    font-size: .8rem;
    letter-spacing: .3rem;
    line-height: 1.3rem;
  
}

.fancybox-title {
  color: rgb(28, 28, 28);
  font-family: 'Raleway', sans-serif;
  font-size: .8rem;
  letter-spacing: .3rem;
  line-height: 1.3rem;
  padding: 0 0 10px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>



    <p class="imglist">

        <a href="https://picsum.photos/200/300" class="fancybox" data-fancybox="images"  title="Insert Title Here" data-caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
            
            <img src="https://picsum.photos/200/300" alt="insert alt txt here">

            
        </a>

        <a href="https://picsum.photos/200/301" class="fancybox" data-fancybox="images"  title="Insert Title Here" data-caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
            
            <img src="https://picsum.photos/200/301" alt="insert alt txt here">

            
        </a>
      
              <a href="https://picsum.photos/200/302" class="fancybox" data-fancybox="images"  title="Insert Title Here" data-caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
            
            <img src="https://picsum.photos/200/302" alt="insert alt txt here">

            
        </a>

    </p>

【问题讨论】：

您是否希望在打开fancybox 查看器之前添加一个单独的标题，就像标题标签属性一样悬停在图像上？
不，抱歉没有完全清楚。我的意思是，一旦打开图像，您会在下方看到标题，而在标题下方是标题。
好的，看我的回答...

标签： html jquery css fancybox fancybox-3

【解决方案1】：

您可以简单地在 data-caption 属性中添加 HTML 标记：

data-caption="<h2 class='style'>This is a styled title</h2><p class='more_style'>Here is the caption</p>"

然后像往常一样使用 css 来设置标签的样式。例如，请参见代码片段......

添加代码：

data-caption="<h2 class='style'>This is a styled title</h2><p class='more_style'>Here is the caption</p>"

...<h2> <h3> <h4> 和 <p> 标签类的样式：

.style{
  font-family: Arial, Helvetica, sans-serif;
  color:red;
  text-shadow: 2px 2px 2px  #000;
}

.more_style {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color:#ddd;
  text-shadow: 2px 2px 2px  #000;
}

$('.mob-btn').click(function() {
  $(this).toggleClass("click");
  $('.mob-nav').toggleClass("show");
  $('.imglist').toggleClass("move-right");
  $('.cov-box').toggleClass("move-right");
  $('.page-heading').toggleClass("move-right");
})

$('.gal-btn').click(function() {
  $('nav ul .gal-show').toggle(200);
  $('nav ul .rotate').toggleClass("rotate");
});

$('.nav ul li').click(function() {
$(this).addClass("active").siblings().removeClass("active");
})

.imglist {
  margin-left: 0;
  margin-right: 0;
  padding-top: 4.5rem;
  transition: 0.2s ease-in-out;
}
.style{
  font-family: Arial, Helvetica, sans-serif;
  color:red;
  text-shadow: 2px 2px 2px  #000;
}

.more_style {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color:#ddd;
  text-shadow: 2px 2px 2px  #000;
}

.imglist.move-right {
  margin-left: 120px;
  margin-right: -120px;
}

a img {
  max-width: 96%;
  padding: 1.5px;
  overflow: hidden;
  border-radius: 0;
  transition: 0.2s ease-in-out;
}

a img:hover {
  transform: scale(1.01);
  opacity: .9;
}

@media (min-width: 620px) {
  .page-heading {
    font-size: .5rem;
    letter-spacing: .8rem;
    padding: 0 1rem 0 2rem;
  }
  a img {
    max-width: 45%;
    padding: 2px;
  }
}

@media (min-width: 920px) {
  .page-heading {
    text-align: center;
    position: absolute;
    left: 20%;
    right: 20%;
    padding: 0 0 0 0;
  }
  .page-heading.move-right {
    opacity: .5;
    margin-left: 120px;
    margin-right: -120px;
  }
  a img {
    max-width: 30%;
  }
}

@media (min-width: 1400px) {
  a img {
    max-width: 20%;
  }
  .imglist {
    margin-right: -4rem;
    margin-left: -4rem;
  }
}

.imglist {
  text-align: center;
}

.fancybox-caption {
  color: white;
  font-size: .8rem;
  letter-spacing: .3rem;
  line-height: 1.3rem;
}

.fancybox-title {
  color: rgb(28, 28, 28);
  font-family: 'Raleway', sans-serif;
  font-size: .8rem;
  letter-spacing: .3rem;
  line-height: 1.3rem;
  padding: 0 0 10px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>



<p class="imglist">

  <a href="https://picsum.photos/200/300" class="fancybox" data-fancybox="images" data-caption="<h2 class='style'>This uses an h2 tag with style</h2><p class='more_style'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>">

    <img src="https://picsum.photos/200/300" alt="insert alt txt here">


  </a>

  <a href="https://picsum.photos/200/301" class="fancybox" data-fancybox="images" data-caption="<h3 class='style'>This uses a h3 tag with style</h3><p class='more_style'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>">

    <img src="https://picsum.photos/200/301" alt="insert alt txt here">
    <span></span>

  </a>

  <a href="https://picsum.photos/200/302" class="fancybox" data-fancybox="images" data-caption="<h4 class='style'>This uses a h4 tag with style</h4><p class='more_style'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>">

    <img src="https://picsum.photos/200/302" alt="insert alt txt here">




  </a>

</p>

【讨论】：