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

Posted 2023-05-09

技术标签:

【中文标题】尝试使用 Fancybox 在标题上方添加标题【英文标题】：Trying to add title above caption with 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" >

            
        </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" >

            
        </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" >

            
        </a>

    </p>

【问题讨论】：

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


  </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" >
    <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" >




  </a>

</p>

【讨论】：

以上是关于尝试使用 Fancybox 在标题上方添加标题的主要内容，如果未能解决你的问题，请参考以下文章

将图像数组添加到 Fancybox

Fancybox：在列表中添加每个相关的 html 内容

如何在使用fancybox打开的新页面中将焦点设置在文本框上

向 Fancybox 添加缩放

YouTube 和 FancyBox 视频功能

如何在 fancybox iframe 中显示 ajax 响应