Question

我用来添加＆＃34; gallery＆＃34;的数据-fancybox-group属性的代码。仅适用于我单击的最后一个过滤器按钮，而不是当前正在应用的过滤器组合。您可以使用isotope过滤图像，然后单击其中任何一个以加载到灯箱中。如果您到这里http://codepen.io/benslocum/pen/jVQjpo并选择接收器，则可以单击其中一个接收器图像，然后向左或向右按（或使用鼠标滚动滚动）滚动浏览接收器。到现在为止还挺好。如果您再点击厨房，您会看到图片现已过滤到JUST厨房水槽。但是，如果您单击其中一个图像，您将要滚动的图库将是所有KITCHEN图像...包括非接收器。似乎在JS第32行的某处我导致fancybox图库仅应用于您单击的最后一个过滤器按钮，而不是考虑所有已检查过滤器的累积filterValue。我需要更改什么才能使gallery的data-fancybox-group属性应用于组合过滤器，而不仅仅是已检查的最后一个过滤器？

如果codepen消失了，这里是JS

// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.optiones',
layoutMode: 'fitRows'
});

// random order
$grid.isotope({ sortBy : 'random' });

// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});  

// store filter for each group
var filters = {};

$('.filters').on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
    // make the selected images part of fancybox gallery
        var selector = $(this).attr('data-filter');
        if(selector == "*"){
            $(".fancybox").attr("data-fancybox-group", "gallery");
        } else{ 
            $(selector).find(".fancybox").attr("data-fancybox-group", selector);
        }
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

$(".fancybox").fancybox({
    arrows : false, closeClick : true, closeBtn : false
});

// ignoring my NOT selection... trying to make the anyfeature-button NOT be among the buttons that forces the detail button to be selected
$('#feature').not('#anyfeature-button').on('click', function(e){
$('#roomdetails') .find('.is-checked').removeClass('is-checked');
  $('#detail-button') .addClass('is-checked');
  $('#detail-button').trigger('click');
});

$('#fullroom-button').on('click', function(e){
$('#feature') .find('.is-checked').removeClass('is-checked');
  $('#anyfeature-button') .addClass('is-checked');
  $('#anyfeature-button').trigger('click');
});

$('.generic-location').on('click', function(e){
$('#room') .find('.is-checked').removeClass('is-checked');
  $('#anyroom-button') .addClass('is-checked');
  $('#anyroom-button').trigger('click');
});

$('#bathshower-button').on('click', function(e){
$('#room') .find('.is-checked').removeClass('is-checked');
  $('#bathroom-button') .addClass('is-checked');
  $('#bathroom-button').trigger('click');
});

    $('filters a').click(function(event){
        event.preventDefault()

    });

这是html

的简短版本

    <div id="header"><img src="http://sales.newpasaderahomes.com/wp-content/uploads/2015/05/Pasadera_Logo_Horiz.png" alt="Logo" class="logo-img">

    <div class="filters">
      <div class="ui-group" id="roomdetails">
        <div class="button-group js-radio-button-group" data-filter-group="type">
          <button class="button is-checked" id="both-button" data-filter="">both</button>
          <button class="button" id="fullroom-button" data-filter=":not(.detail)">full room</button>
          <button class="button" id="detail-button" data-filter=".detail">detail</button>
        </div>
      </div>
      <div class="ui-group">
        <h3>Room</h3>
        <div class="button-group js-radio-button-group" data-filter-group="room">
          <button class="button is-checked" id="anyroom-button" data-filter="">any</button>
          <button class="button" data-filter=".kitchen">kitchen</button>
          <button class="button" id="bathroom-button" data-filter=".bathroom">bathroom</button>
          <button class="button" data-filter=":not(.kitchen):not(.bathroom)">other</button>
        </div>
      </div>

      <div class="ui-group">
        <h3>Plan</h3>
        <div class="button-group js-radio-button-group" data-filter-group="plan">
          <button class="button is-checked" data-filter="">any</button>
          <button class="button" data-filter=".Plan1">plan 1</button>
          <button class="button" data-filter=".Plan2">plan 2</button>
          <button class="button" data-filter=".Plan3">plan 3</button>
          <button class="button" data-filter=".Plan4">plan 4</button>
          <button class="button" data-filter=".Plan5">plan 5</button>
        </div>
      </div>

      <div class="ui-group" id="feature">
        <h3>Feature</h3>
        <div class="button-group js-radio-button-group" data-filter-group="feature">
          <button class="button anyfeature-button is-checked" id="anyfeature-button" data-filter="">any</button>
          <button class="button" data-filter=".tile">tile</button>
          <button class="button" data-filter=".hardware">hardware</button>
          <button class="button" data-filter=".door">door</button>
          <button class="button" data-filter=".sink">sink</button>
          <button class="button generic-location" data-filter=".lighting">lighting</button>
          <button class="button generic-location" data-filter=".handrail">handrail</button>
          <button class="button generic-location" id="wallceiling-button" data-filter=".wall-ceiling">wall/ceiling</button>
          <button class="button" id="bathshower-button" data-filter=".bath-shower">tub/shower</button>
          <button class="button" data-filter=".cabinet-interior">cabinet interior</button>
        </div>
      </div>

    </div>
      </div>
      <div class="gridholder">
    <div class="grid">
    <div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Bath-Vanity-2-Kichler-6122-NI.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Bath-Vanity-2-Kichler-6122-NI.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Dining-Room-Transglobe-6545-BN.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Dining-Room-Transglobe-6545-BN.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Front-Porch-Kichler-10953-TZ.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Front-Porch-Kichler-10953-TZ.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Garage-Entry-Kichler-10923-TZ.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Garage-Entry-Kichler-10923-TZ.jpg"></a></div>
<div class="optiones Plan1 detail kitchen sink tile "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2597.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2597.jpg"></a></div>
<div class="optiones Plan1 detail wall-ceiling "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2602.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2602.jpg"></a></div>
<div class="optiones Plan1 detail hardware "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2603.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2603.jpg"></a></div>
<div class="optiones Plan1 detail kitchen sink tile "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2606.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2606.jpg"></a></div>
<div class="optiones Plan2 detail kitchen "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2664.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2664.jpg"></a></div>
<div class="optiones Plan2 cabinet-interior detail kitchen "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2665.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2665.jpg"></a></div>
    </div>  </div>
      </div>

最后，有点css

* { box-sizing: border-box; }

body {
  font-family: sans-serif;
}

#header {
    background-color: #00A8A5;
    height: 115px;
  width: 100%;
}


.logo-img {
    margin: 10px;
    float: left;
    max-width: 350px;
}

h1 {
  margin: 0;
padding: 0;
}

/* ---- button ---- */
.filters {
position: relative;
  top: 20px;
  left: 30px;
}

.button {
  display: inline-block;
  padding: 0.5em .8em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.15) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

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

.button:active,
.button.is-checked {
  background-color: #fdbe10;
}

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

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

/* ---- button-group ---- */

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

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: none;
}

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

/* ---- isotope ---- */

.grid {
  background: lightgray;
  max-width: 1920px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ui group */

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

.ui-group h3 {
  display: inline-block;
  vertical-align: top;
  line-height: 5px;
  margin-right: 0.2em;
  font-size: 16px;
}

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

/* options */

.optiones {
  margin: 5px;
  float: left;
}

.optiones img {
  display: block;
  max-width: 100%;
}


/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
    position: relative;
    background: #f9f9f9;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
    position: relative;
}

.fancybox-inner {
    overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch;
}

.fancybox-error {
    color: #444;
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 15px;
    white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_sprite.png);
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    background-position: 0 -108px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 8060;
}

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_loading.gif) center center no-repeat;
}

.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}

.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    background: transparent url(http://benslocum.com/pasadera-options/fancybox/source/blank.gif); /* helps IE */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 8040;
}

.fancybox-prev {
    left: 0;
}

.fancybox-next {
    right: 0;
}

.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
}

.fancybox-prev span {
    left: 10px;
    background-position: 0 -36px;
}

.fancybox-next span {
    right: 10px;
    background-position: 0 -72px;
}

.fancybox-nav:hover span {
    visibility: visible;
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: visible !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_overlay.png);
}

.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8050;
    text-align: center;
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    background: rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}

.fancybox-title-inside-wrap {
    padding-top: 10px;
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, .8);
}

/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){

    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
        background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_sprite@2x.png);
        background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
    }

    #fancybox-loading div {
        background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_loading@2x.gif);
        background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
    }
}

如果它对其他人有帮助，当我试图让Fancybox完全尊重任何过滤时，我发现了这些。他们都没有工作＆＃34;按原样＃34;但是当我拿走它的时候

var selector = $(this).attr('data-filter');
        if(selector == "*"){
            $(".fancybox").attr("data-fancybox-group", "gallery");
        } else{ 
            $(selector).find(".fancybox").attr("data-fancybox-group", selector);
        }

并将其放入已经使用过滤器的代码中，它的工作范围我在上面解释过。

现在对于那些对我没用的东西，但让我走上正确的轨道

$('filters a').click(function(event){
    event.preventDefault()
    var selector = $(this).attr('data-filter');

    if(selector == "*"){
        $(".fancybox").attr("data-fancybox-group", "gallery");
    } else{ 
        $(selector).find(".fancybox").attr("data-fancybox-group", selector);
    }
});

这两个都没有。

$('#filters a').on("click", function(){
var selector = $(this).attr('data-option-value'); 
$('#container').isotope({ filter: selector }, function(){
if(selector == "*"){
 $(".fancybox-thumbs").attr("data-fancybox-group", "gallery");
} else{ 
 $(selector).find(".fancybox-thumbs").attr("data-fancybox-group", selector);
}
});
return false;
});

这是我发现并试图定制的另一个......它对我来说也不起作用。

// filter buttons
    $('#filters a').click(function(){
          var selector = $(this).attr('data-filter');
      $('#isotopegallery').isotope({ filter: selector }, function(){
        if(selector == "*"){
         $(".fancybox").attr("data-fancybox-group", "gallery");
        } else{ 
         $(selector).find(".fancybox").attr("data-fancybox-group", selector);
        }
      });
      return false;
    });

任何人都知道如何使用我的设置来完成这项工作？

如何让fancybox图库尊重图库中的同位素组合过滤？

0 个答案: