0

I am currently in the process of creating a masonry grid gallery, using a lightbox alternative called Fancybox. I'm having issues figuring out how to add text to the fancybox modal (once you click an image) and I can't seem to find the physical HTML components to add p tags. How can I add text within the pop-up modal? Is this even possible? 

$(function() {
  // Masonry Grid
  $('.grid').isotope({
    filter: '*',
    // itemSelector: '.grid-item',
    masonry: {
      columnWidth: 180,
      fitWidth: true, // When enabled, you can center the container with CSS.
      gutter: 10
    }
    // layoutMode: 'fitRows'
  });

  $('.filter a').click(function() {
    $('.filter .current').removeClass('current');
    $(this).addClass('current');

    var selector = $(this).data('filter');
    $('.grid').isotope({
      filter: selector
    });
    return false;
  });

  // Fancybox
  $('.fancybox').fancybox({
    helpers: {
      overlay: {
        locked: false
      }
    }
  });
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#masonry-body {
  background: #F2F2F2;
  padding: 20px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.wrapper {
  margin: 50px auto;
  background: #fff;
  max-width: 1200px;
}

.filter {
  padding: 40px 0 20px 0;
  margin-bottom: 20px;
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
}

.filter a {
  margin-right: 10px;
  color: black;
  text-decoration: none;
  border: 2px solid black;
  padding: 10px 20px;
  display: inline-block;
}

.filter a.current {
  background: #ff6767d1;
  border: 1px solid #ff6767d1;
  color: #f9f9f9;
}

.grid {
  margin: 0 auto;
  padding: 10px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.grid-item {
  width: 360px;
  height: 250px;
  margin-bottom: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.fancybox {
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: all .5s;
}

.grid-item:hover .fancybox {
  transform: scale(1.1);
}

.grid-item:nth-child(1) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554817648.jpg);
}

.grid-item:nth-child(2) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818116.jpg);
}

.grid-item:nth-child(3) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818123.jpg);
}

.grid-item:nth-child(4) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818130.jpg);
}

.grid-item:nth-child(5) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818137.jpg);
}

.grid-item:nth-child(6) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818181.jpg);
}

.grid-item:nth-child(7) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818162.jpg);
}

.grid-item:nth-child(8) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818146.jpg);
}

.grid-item:nth-child(9) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818155.jpg);
}

.grid-item:nth-child(10) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818175.jpg);
}

.grid-item:nth-child(11) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818188.jpg);
}

.grid-item:nth-child(12) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818169.jpg);
}

.grid-item:nth-child(13) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818196.jpg);
}

.grid-item:nth-child(14) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818221.jpg);
}

.grid-item:nth-child(15) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818231.jpg);
}

.grid-item:nth-child(16) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554890117.jpg);
}

.grid-item:nth-child(17) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554890169.jpg);
}

.grid-item:nth-child(18) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818239.jpg);
}

.grid-item:nth-child(19) .fancybox {
  background-image: url(https://cdn1.feelunique.com/img/imglibrary/il1554818246.jpg);
}

.grid-item:nth-child(4n-5) {
  height: 280px;
}

.grid-item:nth-child(2n) {
  height: 300px;
}

.grid-item:nth-child(3n) {
  height: 280px;
}

/*MOBILE STYLES*/

@media screen and (max-width: 767px) {
  * {
    margin-top: 0 !important;
  }
  #h1-valentines {
    padding: 20px 5px 10px 5px !important;
  }
  .wrapper p {
    padding: 0 20px;
  }
  #masonry-body {
    background: #F2F2F2;
    padding: 0px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
  }
  .grid {
    width: 100% !important;
    padding: 0 auto !important;
  }
  .grid-item {
    width: 45%;
    height: 140px;
    margin-bottom: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
  }
  .wrapper {
    margin: 50px auto;
    background: #fff;
    max-width: 800px;
  }
  .filter {
    padding: 20px 0;
    margin-bottom: 20px;
    text-align: center;
    font-size: 16px;
  }
  .filter a {
    margin: 7px auto;
    color: black;
    text-decoration: none;
    border: 2px solid black;
    padding: 10px 20px;
    display: inline-block;
  }
  .filter a:nth-child(1) {
    display: table;
  }
  .grid-item:nth-child(4n-5) {
    height: 150px;
  }
  .grid-item:nth-child(2n) {
    height: 260px;
  }
  .grid-item:nth-child(3n) {
    height: 180px;
  }
  .filter a.current {
    background: #ff6767d1;
    border: 1px solid #ff6767d1;
    color: #f9f9f9;
  }
}
<link href="https://poiemaweb.com/assets/vendor/fancybox/jquery.fancybox.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet">
<head>
  <meta name="keywords" content="Masonry, Masonry Gallery, Social Feed">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body id="masonry-body">
  <div class="wrapper">

    <h1 id="h1-valentines" style="text-align: center;padding:20px 20px 10px 20px;">Valentine's Love Shop</h1>
    <p style="text-align: center;">Put down the teddy bear. We’ve rounded up the gifts you really need to treat yourself (or S/O) this V-Day</p>

    <div class="filter">
      <a href="#" data-filter="*" class="current">Discover All</a>
      <a href="#" data-filter=".sharelove">Share the Love</a>
      <a href="#" data-filter=".selflove">Self-Love</a>
    </div>
    <div class="grid">
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554817648.jpg"></a>
      </div>
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818116.jpg"></a>
      </div>
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818123.jpg"></a>
      </div>
      <div class="grid-item sharelove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818130.jpg"></a>
      </div>
      <div class="grid-item sharelove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818137.jpg"></a>
      </div>
      <div class="grid-item sharelove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818181.jpg"></a>
      </div>
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818162.jpg"></a>
      </div>
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818146.jpg"></a>
      </div>
      <div class="grid-item sharelove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818155.jpg"></a>
      </div>
      <div class="grid-item sharelove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818175.jpg"></a>
      </div>
      <div class="grid-item sharelove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818188.jpg"></a>
      </div>
      <div class="grid-item sharelove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818169.jpg"></a>
      </div>
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818196.jpg"></a>
      </div>
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818221.jpg"></a>
      </div>
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818231.jpg"></a>
      </div>
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554890117.jpg"></a>
      </div>
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554890169.jpg"></a>
      </div>
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818239.jpg"></a>
      </div>
      <div class="grid-item selflove">
        <a class="fancybox" href="https://cdn1.feelunique.com/img/imglibrary/il1554818246.jpg"></a>
      </div>
    </div>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

<!-- begin snippet: js hide: false console: true babel: false -->
Anonymous
  • 21
  • 4
  • Hi & welcome to Stackoverflow. You should try to focus your question on a small snippet of code rather than a massive blob. Have a look at https://stackoverflow.com/help/minimal-reproducible-example – Cukic0d Oct 23 '19 at 11:42
  • Try to add a title attribute on `a` tag – ReSedano Oct 23 '19 at 13:10

0 Answers0