Instantiate Jquery

Bootstrap Studio Help
1

I'm trying to use this http://yiotis.net/filterizr/ When I get to the third step "INSTANTIATE FILTERIZR" I have no idea what this means.

What I've done so far.

  1. Added the CDN to external JS files (https://cdnjs.cloudflare.com/ajax/libs/filterizr/1.2.4/jquery.filterizr.min.js)
  2. Created Custom Code block and pasted the "CREATE YOUR GALLERY" and "SET UP YOUR CONTROLS" into it.
  3. Have no idea what to do with the "INSTANTIATE FILTERIZR"
  4. I'm assuming that the answer to the third step will tell me where to put the "CUSTOMIZING FILTERIZR" code as well if needed.

Any help is appreciated.

2

Revised What I’ve done so far.

  1. Added the CDN to external JS files (https://cdnjs.cloudflare.com/ajax/libs/filterizr/1.2.4/jquery.filterizr.min.js)
  2. Created Custom Code block and pasted the “CREATE YOUR GALLERY” and “SET UP YOUR CONTROLS” into it.

  3. I took the following code and put it into a custom.js file

    $(document).ready(function() {<br /> var options = { animationDuration: 0.5, //in seconds filter: 'all', //Initial filter callbacks: { onFilteringStart: function() { }, onFilteringEnd: function() { }, onShufflingStart: function() { }, onShufflingEnd: function() { }, onSortingStart: function() { }, onSortingEnd: function() { } }, delay: 0, //Transition delay in ms delayMode: 'progressive', //'progressive' or 'alternate' easing: 'ease-out', filterOutCss: { //Filtering out animation opacity: 0, transform: 'scale(0.5)' }, filterInCss: { //Filtering in animation opacity: 0, transform: 'scale(1)' }, layout: 'sameSize', //See layouts selector: '.filtr-container', setupControls: true }

    var filterizd = $('.filtr-container').filterizr(options); });

It's still not working though. Thoughts?

3

Made a typo, now I can't edit my own reply, so here it is again:

$(document).ready(function() {       
var options = {
    animationDuration: 0.5, //in seconds
    filter: 'all', //Initial filter
    callbacks: { 
        onFilteringStart: function() { },
        onFilteringEnd: function() { },
        onShufflingStart: function() { },
        onShufflingEnd: function() { },
        onSortingStart: function() { },
        onSortingEnd: function() { }
    },
    delay: 0, //Transition delay in ms
    delayMode: 'progressive', //'progressive' or 'alternate'
    easing: 'ease-out',
    filterOutCss: { //Filtering out animation
        opacity: 0,
        transform: 'scale(0.5)'
    },
    filterInCss: { //Filtering in animation
        opacity: 0,
        transform: 'scale(1)'
    },
    layout: 'sameSize', //See layouts
    selector: '.filtr-container',
    setupControls: true 
} 

var filterizd = $('.filtr-container').filterizr(options);
});
4

Nevermind - I figured out what was wrong. I had the wrong version of JQuery set.

5

Good to hear, because I was just about to reply :)

The customizing filterizr box basically answers your question for you because they added in the instantiate filterizr code at the bottom. So you if had just copy/pasted everything but the last script line and the comment it would have worked for you then. :)

Saj

6

I believe had you gone with the instantiate filterizr box I think the code would something like this with the options built in it

var filterizd = $('.filtr-container').filterizr({
    animationDuration: 0.5, //in seconds
    filter: 'all', //Initial filter
    callbacks: {
     onFilteringStart: function() { },
     onFilteringEnd: function() { },
     onShufflingStart: function() { },
     onShufflingEnd: function() { },
     onSortingStart: function() { },
     onSortingEnd: function() { }
    },
    delay: 0, //Transition delay in ms
    delayMode: 'progressive', //'progressive' or 'alternate'
    easing: 'ease-out',
    filterOutCss: { //Filtering out animation
        opacity: 0,
        transform: 'scale(0.5)'
    },
    filterInCss: { //Filtering in animation
        opacity: 0,
        transform: 'scale(1)'
    },
    layout: 'sameSize', //See layouts
    selector: '.filtr-container',
    setupControls: true 
});

Saj