bootstrap + mixitup filter on load issue

Question

Wir versuchen, unser Portfolio im Bootstrap über MixItUp v3.1.11 Filterung zu zeigen und versuchen, eine bestimmte Kategorie (nicht alle Projekte) zu laden, wenn die Seite geladen wird.

Patrick Kunka hat ein Beispiel zur Verfügung gestellt, wie es gemacht werden könnte here.

Das gleiche Problem wurde gefragt here

Unser Problem ist, dass die reccomended soultion funktioniert nicht. Meine Vermutung ist, dass es auf die Änderung des Wählers durch zusammenhängt + mixitup Fragen im Zusammenhang mit Bootstrap:

Kontrolle: '[data-mixitup-control]'

Hier ist das Stück Code, das ist am Ende der Seite:

var containerEl = document.querySelector('#selector'); 

     var mixer = mixitup(containerEl, { 
      selectors: { 
       target: '.mix', 
       control: '[data-mixitup-control]' 
     }, 
      animation: { 
       effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation 
      }, 
      load: { 
       filter: 'none' // Ensure all targets start from hidden (i.e. display: none;) 
      } 
     }); 

     // Add a class to the container to remove 'visibility: hidden;' from targets. This 
     // prevents any flickr of content before the page's JavaScript has loaded. 

     containerEl.classList.add('mixitup-ready'); 

     // Show all targets in the container 

     mixer.show() 
      .then(function() { 
       // Remove the stagger effect for any subsequent operations 

       mixer.configure({ 
        animation: { 
         effects: 'fade scale' 
        }, 
      load: { 
       filter: '.residential' // Ensure all targets start from hidden (i.e. display: none;) 
      } 
       }); 
      }); 

Wenn ich den Filter zu gewünschten .redential ändern, funktioniert es nicht.

Ich habe auch versucht, dies fügen:

$(function(){ 
    $('#selector').mixItUp({ 
    load: { 
     filter: '.residential' 
    } 
    }); 
}); 

Kein Glück. Irgendeine Idee wo könnte das Problem sein?

Answer 1

Ich habe das Beispiel versucht, und es funktioniert mit der Version 2.1.6.

Hier ist mein Beispielcode:

$(function(){ 
    $('#selector').mixItUp({ 
    selectors: { 
     target: '.item' 
    }, 
    layout: { 
     display: 'inline-block' 
    }, 
    load: { 
     filter: '.residential' 
    } 
    }); 
}); 

Das DOM laden nur mit Positionen im Zusammenhang mit .residential sichtbar.

Hoffe, das hilft.

Answer 2

In Kombination mit MixItUp Version 3.1.11 und Bootstrap 3 versuchen Sie dieses Beispiel.

Add Daten mixitup-Steuerkonflikte mit anderen Daten-Attribute zu vermeiden:

<button type="button" class="control" data-mixitup-control data-filter=".residential">Residential</button> 

initialisieren MixItUp:

var containerEl = document.querySelector('.container'); 

var mixer = mixitup(containerEl, { 
    selectors: { 
     control: '[data-mixitup-control]' 
    }, 
    load: { 
     filter: '.residential' 
    } 
}); 

Sie müssen nicht separat die 'fade scale' Animationseffekt einstellen - es ist die Standardeinstellung. https://www.kunkalabs.com/mixitup/docs/configuration-object/

Answer 3

In Kombination mit MixItUp v3.1.9 und Bootstrap 4 versuchen Sie dieses Beispiel.

data-mixitup-control hinzufügen Konflikte mit anderen Daten-Attribute zu vermeiden:

<button type="button" class="control" data-mixitup-control data-`enter code here`filter=".product">PRODUCTS</button> 

initialisieren MixItUp:

var container = document.querySelector('.portfolio'); 

var mixer = mixitup(container, { 
    selectors: { 
     control: '[data-mixitup-control]' 
    } 
});