htmljquerycssfancyboxfancybox-3

Trying to add title above caption with Fancybox

I have seen a few other posts on this but I can't seem to get a title showing in my fancybox gallery. I want to have a title just above the caption so I can style it separately. Perhaps it has something to do with the data-fancybox="images" tag but I'm not sure. Any help is much appreciated.

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>

Solution

  • You can simply add HTML tags in your data-caption attribute:

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

    Then use css to style your tag as you normally would. See the snippit for example...

    Added code: 

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

    ...and style for the <h2> <h3> <h4> and <p> tags classes:

    .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>