Question

在fancybox上我希望主页只显示一组图像示例＆＃34; quadri＆＃34;我不想显示＆＃34; .seri＆＃34;如果我点击＆＃34; serigrafie＆＃34;我希望看到＆＃34; seri＆＃34;我怎么能这样做？这是我的代码：

＆＃13;

<div class="filter-categories filter-mixitup">
        <span class="btn filter " data-filter="quadri">Quadri su legno e varie</span>
        <span class="btn filter " data-filter=".seri">Serigrafie </span>
        <span class="btn filter " data-filter=".mini">Miniature (Prossimamente)</span>
    </div>
    <!-- Filter Categories - End -->
    <!-- Portfolio Items - Start -->
    <div class="filter-items quadri filter-mixitup  inviewport animated " data-effect="fadeIn" id="gallery-mixitup">
        <!-- Item - Start -->
        <div class="filter-item quadri col-lg-3 col-md-4 col-sm-6  col-xs-10 col-xs-offset-1 col-sm-offset-0">
            <img alt="gallery-image" src="img/gallery-1.jpg" class="img-responsive transition">
            <div class="info transition">
                <a class="btn btn-primary fancybox" title="Quadro n° 1 cm: 80 x 78" data-filter="quadri" href="img/gallery-1.jpg"><i class="mdi mdi-image-area"></i></a>
            </div>
        </div>
        <!-- Item - End -->
        <!-- Item - Start -->
        <div class="filter-item quadri col-lg-3 col-md-4 col-sm-6  col-xs-10 col-xs-offset-1 col-sm-offset-0">
            <img alt="gallery-image" src="img/gallery-2.jpg" class="img-responsive transition">
            <div class="info transition">
                <a class="btn btn-primary fancybox" title="Quadro n° 2 cm: 94 x 35"  data-fancybox-group="quadri" href="img/gallery-2.jpg"><i class="mdi mdi-image-area"></i></a>
            </div>
        </div>
        <!-- Item - End -->
        <!-- Item - Start -->
        <div class="filter-item quadri col-lg-3 col-md-4 col-sm-6  col-xs-10 col-xs-offset-1 col-sm-offset-0">
            <img alt="gallery-image" src="img/gallery-3.jpg" class="img-responsive transition">
            <div class="info transition">
                <a class="btn btn-primary fancybox" title="Quadro n° 3 cm: 123 x 103" data-fancybox-group="quadri" href="img/gallery-3.jpg"><i class="mdi mdi-image-area"></i></a>
            </div>
        </div>
        <!-- Item - End -->`
<!-- Item - Start -->
        <div class="filter-item seri col-lg-3 col-md-4 col-sm-6  col-xs-10 col-xs-offset-1 col-sm-offset-0">
            <img alt="gallery-image" src="img/seri/seri-1.jpg" class="img-responsive transition">
            <div class="info transition">
                <a class="btn btn-primary fancybox" title="Serigrafie n° 1 cm: 45x30" data-fancybox-group=".seri" href="img/seri/seri-1f.jpg"><i class="mdi mdi-image-area"></i></a>
            </div>
        </div>
        <!-- Item - End -->
		<!-- Item - Start -->
        <div class="filter-item seri col-lg-3 col-md-4 col-sm-6  col-xs-10 col-xs-offset-1 col-sm-offset-0">
            <img alt="gallery-image" src="img/seri/seri-2.jpg" class="img-responsive transition">
            <div class="info transition">
                <a class="btn btn-primary fancybox" title="Serigrafie n° 2 cm: 45x30" data-fancybox-group=".seri" href="img/seri/seri-2f.jpg"><i class="mdi mdi-image-area"></i></a>
            </div>
        </div>
        <!-- Item - End -->

＆＃13;

Answer 1

我建议您使用Isotope进行过滤，然后手动使用fancyBox打开可见项目：

// Custom click event - open fancyBox manually
$('.fancybox').on('click', function() {
  var visibleLinks = $('.fancybox:visible');

  $.fancybox.open( visibleLinks, {}, visibleLinks.index( this ) );

  return false;
});

工作演示 - http://codepen.io/fancyapps/pen/EZKYPN?editors=1010

Fancybox只在家中展示一组

1 个答案: