DEVHIDE
Login Or Sign up

Fancybox with Isotope

21 Views Asked by At

I would like my fancybox to only show thumbnails of the currently selected filters in isotope. I haven't succeeded in doing this yet though. I suspect that the snippet I've found from 2017 simply don't work with the current version of Fancybox. Here's the code I have:

$grid = $('.portfolio-grid').isotope({
                itemSelector: '.portfolio-item',
                percentPosition: true,
                masonry: {
                    columnWidth: '.portfolio-sizer'
                },
                gutter: 15
            });

            // store filter for each group
            var filters = {};
    
            $('.portfolio-filters').on('click', '.btn', function (event) {
                var $button = $(event.currentTarget);
                // get group key
                var $buttonGroup = $button.parents('.js-radio-button-group');
                var filterGroup = $buttonGroup.attr('data-filter-group');
                // set filter for group
                filters[filterGroup] = $button.attr('data-filter');
                // combine filters
                var filterValue = concatValues(filters);
        
                // set filter for Isotope
                $grid.isotope({ filter: filterValue });
        
                // Remove active class from all buttons within the same group
                $buttonGroup.find('.btn').removeClass('active');
                // Add active class to the clicked button
                $button.addClass('active');
            });
    
            // change active class on buttons
            $('.js-radio-button-group').each(function (i, buttonGroup) {
                var $buttonGroup = $(buttonGroup);
                $buttonGroup.on('click', '.btn', function (event) {
                    $buttonGroup.find('.active').removeClass('active');
                    var $button = $(event.currentTarget);
                    $button.addClass('active');
                });
            });
            // flatten object by concatting values
            function concatValues(obj) {
                var value = '';
                for (var prop in obj) {
                    value += obj[prop];
                }
                return value;
            }

            // Initialize Fancybox
            Fancybox.bind('[data-fancybox="portfolio"]', {
                caption: function (_fancybox, slide) {
                    const figcaption = slide.triggerEl?.querySelector("figcaption");
                    return figcaption ? figcaption.innerHTML : slide.caption || "";
                },
                thumbs: {
                    autoStart: true,
                    hideOnClose: true,
                    axis: 'x'
                },
                afterLoad: function(instance, current) {
                    var filteredThumbnails = '';
                    var $filteredItems = $grid.isotope('getFilteredItemElements');

                    $filteredItems.each(function() {
                        var thumbnailSrc = $(this).find('img').attr('src');
                        filteredThumbnails += '<a href="' + thumbnailSrc + '" data-fancybox="gallery" class="filtered-thumbnail"></a>';
                    });
                    current.$thumbBar.html(filteredThumbnails);
                }
            });
.portfolio-filters .button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #eee;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient(to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2));
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.portfolio-filters .button:hover {
  background-color: #8cf;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.portfolio-filters .button:active,
.portfolio-filters .button.active {
  background-color: #28f;
}

.portfolio-filters .button.active {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.portfolio-filters .button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

.portfolio-filters .button-group:after {
  content: '';
  display: block;
  clear: both;
}

.portfolio-filters .button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
  background-color: rgba(0, 0, 0, .5);
}

.portfolio-filters .button-group .button:first-child {
  border-radius: 0.5em 0 0 0.5em;
}

.portfolio-filters .button-group .button:last-child {
  border-radius: 0 0.5em 0.5em 0;
}

.portfolio-grid:after {
  content: '';
  display: block;
  clear: both;
}

.portfolio-item .item-surround {
  margin: 15px 0;
  position: relative;
  overflow: hidden;
  background-color: #303038;
}

.portfolio-item img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: text-bottom;
  width: 101% !important;
  position: relative;
  will-change: transform, opacity;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.portfolio-item .portfolio-item-info {
  text-align: center;
  transition: all .5s ease 0s;
  -webkit-transition: all .5s ease 0s;
  -ms-transition: all .5 ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  overflow: hidden;
  /* z-index: 20000; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.portfolio-item .portfolio-link {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  /* padding: 20px; */
  outline: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
}

.portfolio-item h4 {
  bottom: 40px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  text-align: left;
  position: absolute;
  left: 30px;
  margin: 0;
  transition: all .5s ease 0s;
  -webkit-transition: all .5s ease 0s;
  -ms-transition: all .5 ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
}

.portfolio-item h6 {
  font-size: 10px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .7);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  color: #555;
  padding: 5px 8px;
  top: 25px;
  left: 30px;
  position: absolute;
}

.portfolio-item h6 i {
  font-size: 10px;
  color: #555;
  margin-right: 5px;
}

.portfolio-item:hover>img,
.item-surround:hover>img {
  opacity: .15;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

.portfolio-lightbox-link,
.portfolio-item:hover .portfolio-lightbox-link,
.item-surround:hover .portfolio-lightbox-link {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  z-index: 1000;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  text-decoration: none !important;
  background: 0 0;
  color: #fff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  opacity: 0;
  border: 1px dashed;
  transition: all .5s ease 0s;
  -webkit-transition: all .5s ease 0s;
  -ms-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
}

.portfolio-item:hover .portfolio-lightbox-link,
.item-surround:hover .portfolio-lightbox-link {
  opacity: 1;
}

.portfolio-item small {
  font-size: 12px;
  color: #fff;
  text-align: left;
  position: absolute;
  bottom: 20px;
  left: 30px;
  margin: 0;
}

.portfolio-lightbox-link:hover {
  border-color: #f3a395 !important;
  border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  opacity: 1;
  color: #fff;
}

.portfolio-filters .ui-group {
  display: inline-block;
}

.portfolio-filters .ui-group h3 {
  display: inline-block;
  margin-right: 0.2em;
  font-size: 16px;
}

.portfolio-filters .ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}

figcaption {
  display: none;
}

.fancybox__caption .title {
  text-transform: uppercase;
  font-weight: 900;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>


<div class="portfolio-filters">

  <div class="ui-group ms-3">
    <h3>Subject</h3>
    <div class="button-group js-radio-button-group" data-filter-group="subject">
      <button class="btn active" data-filter="" type="button">All Subjects</button>
      <button class="btn farm-animals" data-filter=".farm-animals" type="button">Farm Animals</button>
      <button class="btn landscapes" data-filter=".landscapes" type="button">Landscapes</button>
      <button class="btn still-lifes" data-filter=".still-lifes" type="button">Still Lifes</button>
    </div>
  </div>

  <div class="ui-group ms-3">
    <h3>Medium</h3>
    <div class="button-group js-radio-button-group" data-filter-group="mediums">
      <button class="btn active" data-filter="" type="button">All Mediums</button>
      <button class="btn acrylic" data-filter=".acrylic" type="button">Acrylic</button>
      <button class="btn watercolor" data-filter=".watercolor" type="button">Watercolor</button>
      <button class="btn graphite" data-filter=".graphite" type="button">Graphite</button>
    </div>
  </div>
</div>

<div class="portfolio-grid row">
  <div class="portfolio-sizer col-6 col-md-4"></div>
  <div class="portfolio-item col-6 col-md-4 farm-animals acrylics watercolors">
    <div class="item-surround">
      <img src="https://tinyartstories.themedev.thepixelpixie.com/wp-content/uploads/2023/10/356965015_997080731606537_2077854812917829160_n-480x483.jpg" alt="Springtime Robin" class="img-fluid">
      <div class="portfolio-item-info">
        <a class="portfolio-link" href="https://tinyartstories.themedev.thepixelpixie.com/wp-content/uploads/2023/10/356965015_997080731606537_2077854812917829160_n.jpg" data-fancybox="portfolio">
          <h4>Springtime Robin</h4>
          <small>Acrylic on watercolor, 7 1/2" x 9 1/2"</small>
          <h6><i class="fa-solid fa-folder-open"></i>Farm Animals, Acrylics, Watercolors</h6>
          <span class="portfolio-lightbox-link">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </span>
          <figcaption class="fancybox-caption">
            <span class="title">Springtime Robin</span> | <span class="desc-measure">Acrylic on watercolor - 7 1/2" x 9 1/2"</span>
          </figcaption>
        </a>
      </div>
    </div>
  </div>

  <div class="portfolio-item col-6 col-md-4 landscapes watercolors graphite">
    <div class="item-surround">
      <img src="https://tinyartstories.themedev.thepixelpixie.com/wp-content/uploads/2023/10/371449641_1359858811301592_5992905469574573057_n-480x640.jpg" alt="Investigation" class="img-fluid">
      <div class="portfolio-item-info">
        <a class="portfolio-link" href="https://tinyartstories.themedev.thepixelpixie.com/wp-content/uploads/2023/10/371449641_1359858811301592_5992905469574573057_n.jpg" data-fancybox="portfolio">
          <h4>Investigation</h4>
          <small>Graphite in watercolor, 11" x 13", unframed</small>
          <h6><i class="fa-solid fa-folder-open"></i>Landscapes, Watercolors, Graphite</h6>
          <span class="portfolio-lightbox-link">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </span>
          <figcaption class="fancybox-caption">
            <span class="title">Investigation</span> | <span class="desc-measure">Graphite in watercolor, 11" x 13", unframed</span>
          </figcaption>
        </a>
      </div>
    </div>
  </div>
</div>

The behavior I would like, is that the fancybox overlay thumbnails will only display the images of the currently-selected filters.

fancybox jquery-isotope
Original Q&A
1

There are 1 best solutions below

0
Janis On

Simply update the selector to return only visible items, like this:

Fancybox.bind('.portfolio-item:not([style*="display: none"]) [data-fancybox="portfolio"]', {
  // Your options
});


$grid = $('.portfolio-grid').isotope({
                itemSelector: '.portfolio-item',
                percentPosition: true,
                masonry: {
                    columnWidth: '.portfolio-sizer'
                },
                gutter: 15
            });

            // store filter for each group
            var filters = {};
    
            $('.portfolio-filters').on('click', '.btn', function (event) {
                var $button = $(event.currentTarget);
                // get group key
                var $buttonGroup = $button.parents('.js-radio-button-group');
                var filterGroup = $buttonGroup.attr('data-filter-group');
                // set filter for group
                filters[filterGroup] = $button.attr('data-filter');
                // combine filters
                var filterValue = concatValues(filters);
        
                // set filter for Isotope
                $grid.isotope({ filter: filterValue });
        
                // Remove active class from all buttons within the same group
                $buttonGroup.find('.btn').removeClass('active');
                // Add active class to the clicked button
                $button.addClass('active');
            });
    
            // change active class on buttons
            $('.js-radio-button-group').each(function (i, buttonGroup) {
                var $buttonGroup = $(buttonGroup);
                $buttonGroup.on('click', '.btn', function (event) {
                    $buttonGroup.find('.active').removeClass('active');
                    var $button = $(event.currentTarget);
                    $button.addClass('active');
                });
            });
            // flatten object by concatting values
            function concatValues(obj) {
                var value = '';
                for (var prop in obj) {
                    value += obj[prop];
                }
                return value;
            }

            // Initialize Fancybox
            Fancybox.bind('.portfolio-item:not([style*="display: none"]) [data-fancybox="portfolio"]', {
                caption: function (_fancybox, slide) {
                    const figcaption = slide.triggerEl?.querySelector("figcaption");
                    return figcaption ? figcaption.innerHTML : slide.caption || "";
                },
                thumbs: {
                    autoStart: true,
                    hideOnClose: true,
                    axis: 'x'
                },
                afterLoad: function(instance, current) {
                    var filteredThumbnails = '';
                    var $filteredItems = $grid.isotope('getFilteredItemElements');

                    $filteredItems.each(function() {
                        var thumbnailSrc = $(this).find('img').attr('src');
                        filteredThumbnails += '<a href="' + thumbnailSrc + '" data-fancybox="gallery" class="filtered-thumbnail"></a>';
                    });
                    current.$thumbBar.html(filteredThumbnails);
                }
            });
.portfolio-filters .button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #eee;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient(to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2));
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.portfolio-filters .button:hover {
  background-color: #8cf;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.portfolio-filters .button:active,
.portfolio-filters .button.active {
  background-color: #28f;
}

.portfolio-filters .button.active {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.portfolio-filters .button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

.portfolio-filters .button-group:after {
  content: '';
  display: block;
  clear: both;
}

.portfolio-filters .button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
  background-color: rgba(0, 0, 0, .5);
}

.portfolio-filters .button-group .button:first-child {
  border-radius: 0.5em 0 0 0.5em;
}

.portfolio-filters .button-group .button:last-child {
  border-radius: 0 0.5em 0.5em 0;
}

.portfolio-grid:after {
  content: '';
  display: block;
  clear: both;
}

.portfolio-item .item-surround {
  margin: 15px 0;
  position: relative;
  overflow: hidden;
  background-color: #303038;
}

.portfolio-item img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: text-bottom;
  width: 101% !important;
  position: relative;
  will-change: transform, opacity;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.portfolio-item .portfolio-item-info {
  text-align: center;
  transition: all .5s ease 0s;
  -webkit-transition: all .5s ease 0s;
  -ms-transition: all .5 ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  overflow: hidden;
  /* z-index: 20000; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.portfolio-item .portfolio-link {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  /* padding: 20px; */
  outline: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
}

.portfolio-item h4 {
  bottom: 40px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  text-align: left;
  position: absolute;
  left: 30px;
  margin: 0;
  transition: all .5s ease 0s;
  -webkit-transition: all .5s ease 0s;
  -ms-transition: all .5 ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
}

.portfolio-item h6 {
  font-size: 10px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .7);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  color: #555;
  padding: 5px 8px;
  top: 25px;
  left: 30px;
  position: absolute;
}

.portfolio-item h6 i {
  font-size: 10px;
  color: #555;
  margin-right: 5px;
}

.portfolio-item:hover>img,
.item-surround:hover>img {
  opacity: .15;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

.portfolio-lightbox-link,
.portfolio-item:hover .portfolio-lightbox-link,
.item-surround:hover .portfolio-lightbox-link {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  z-index: 1000;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  text-decoration: none !important;
  background: 0 0;
  color: #fff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  opacity: 0;
  border: 1px dashed;
  transition: all .5s ease 0s;
  -webkit-transition: all .5s ease 0s;
  -ms-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
}

.portfolio-item:hover .portfolio-lightbox-link,
.item-surround:hover .portfolio-lightbox-link {
  opacity: 1;
}

.portfolio-item small {
  font-size: 12px;
  color: #fff;
  text-align: left;
  position: absolute;
  bottom: 20px;
  left: 30px;
  margin: 0;
}

.portfolio-lightbox-link:hover {
  border-color: #f3a395 !important;
  border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  opacity: 1;
  color: #fff;
}

.portfolio-filters .ui-group {
  display: inline-block;
}

.portfolio-filters .ui-group h3 {
  display: inline-block;
  margin-right: 0.2em;
  font-size: 16px;
}

.portfolio-filters .ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}

figcaption {
  display: none;
}

.fancybox__caption .title {
  text-transform: uppercase;
  font-weight: 900;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>


<div class="portfolio-filters">

  <div class="ui-group ms-3">
    <h3>Subject</h3>
    <div class="button-group js-radio-button-group" data-filter-group="subject">
      <button class="btn active" data-filter="" type="button">All Subjects</button>
      <button class="btn farm-animals" data-filter=".farm-animals" type="button">Farm Animals</button>
      <button class="btn landscapes" data-filter=".landscapes" type="button">Landscapes</button>
      <button class="btn still-lifes" data-filter=".still-lifes" type="button">Still Lifes</button>
    </div>
  </div>

  <div class="ui-group ms-3">
    <h3>Medium</h3>
    <div class="button-group js-radio-button-group" data-filter-group="mediums">
      <button class="btn active" data-filter="" type="button">All Mediums</button>
      <button class="btn acrylic" data-filter=".acrylic" type="button">Acrylic</button>
      <button class="btn watercolor" data-filter=".watercolor" type="button">Watercolor</button>
      <button class="btn graphite" data-filter=".graphite" type="button">Graphite</button>
    </div>
  </div>
</div>

<div class="portfolio-grid row">
  <div class="portfolio-sizer col-6 col-md-4"></div>
  <div class="portfolio-item col-6 col-md-4 farm-animals acrylics watercolors">
    <div class="item-surround">
      <img src="https://tinyartstories.themedev.thepixelpixie.com/wp-content/uploads/2023/10/356965015_997080731606537_2077854812917829160_n-480x483.jpg" alt="Springtime Robin" class="img-fluid">
      <div class="portfolio-item-info">
        <a class="portfolio-link" href="https://tinyartstories.themedev.thepixelpixie.com/wp-content/uploads/2023/10/356965015_997080731606537_2077854812917829160_n.jpg" data-fancybox="portfolio">
          <h4>Springtime Robin</h4>
          <small>Acrylic on watercolor, 7 1/2" x 9 1/2"</small>
          <h6><i class="fa-solid fa-folder-open"></i>Farm Animals, Acrylics, Watercolors</h6>
          <span class="portfolio-lightbox-link">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </span>
          <figcaption class="fancybox-caption">
            <span class="title">Springtime Robin</span> | <span class="desc-measure">Acrylic on watercolor - 7 1/2" x 9 1/2"</span>
          </figcaption>
        </a>
      </div>
    </div>
  </div>

  <div class="portfolio-item col-6 col-md-4 landscapes watercolors graphite">
    <div class="item-surround">
      <img src="https://tinyartstories.themedev.thepixelpixie.com/wp-content/uploads/2023/10/371449641_1359858811301592_5992905469574573057_n-480x640.jpg" alt="Investigation" class="img-fluid">
      <div class="portfolio-item-info">
        <a class="portfolio-link" href="https://tinyartstories.themedev.thepixelpixie.com/wp-content/uploads/2023/10/371449641_1359858811301592_5992905469574573057_n.jpg" data-fancybox="portfolio">
          <h4>Investigation</h4>
          <small>Graphite in watercolor, 11" x 13", unframed</small>
          <h6><i class="fa-solid fa-folder-open"></i>Landscapes, Watercolors, Graphite</h6>
          <span class="portfolio-lightbox-link">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </span>
          <figcaption class="fancybox-caption">
            <span class="title">Investigation</span> | <span class="desc-measure">Graphite in watercolor, 11" x 13", unframed</span>
          </figcaption>
        </a>
      </div>
    </div>
  </div>
</div>

Related Questions in FANCYBOX

Related Questions in JQUERY-ISOTOPE

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.