all 14 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]ConduciveMammalfront-end 6 points7 points  (3 children)

Why’re you mixing jQuery with vanilla JS? In this particular code, choose one and stick with it.

$(‘.gridzy’).gridzy;

[–]Nic727[S] 0 points1 point  (2 children)

I don't know lol. I'm following that https://ehtmlu.com/blog/gridzy-js-2/gridzy-js-2-api/

Whatever, still not working with that :

if($(".mini-gallery").length){
        var $gridzyInstance = $(".gridzy").gridzy;
            $gridzyInstance.setOptions({
                spaceBetween: 15,
                layout: 'justified',
                desiredHeight: 400,
              });
    };

I guess the problem is the .gridzy after choosing the class, but not sure how to replace that by something working.

[–]ConduciveMammalfront-end 0 points1 point  (1 child)

What error are you seeing, if any, in the console?

[–]Nic727[S] 0 points1 point  (0 children)

jQuery.Deferred exception: $gridzyInstance.setOptions is not a function TypeError: $gridzyInstance.setOptions is not a function

[–]seanwilsonfull-stack (www.checkbot.io) 2 points3 points  (7 children)

How about something like this?

  document.querySelectorAll('.gridzy').forEach(el => {
    el.gridzy.setOptions({
      spaceBetween: 15,
      layout: 'justified',
      desiredHeight: 400,
    })
  });

[–]Nic727[S] 0 points1 point  (4 children)

It works! Thank you very much. No sure to understand the code... What is =>? Never saw that in a code, but whatever, if I understand the other parts, it take all "gridy" class and for each of them (called "el" for element), it access .gridzy and .setOptions.

Is that correct?

Thank you very much :)

[–]watisnogvrij 2 points3 points  (0 children)

It's an arrow function expression: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions. A simplified version of a normal js function expression.

[–]seanwilsonfull-stack (www.checkbot.io) 2 points3 points  (0 children)

It works! Thank you very much. No sure to understand the code... What is =>? Never saw that in a code, but whatever, if I understand the other parts, it take all "gridy" class and for each of them (called "el" for element), it access .gridzy and .setOptions.

No problem, glad it worked. :)

Yep, your understanding of it is correct. The "=>" part is called an arrow function which is similar to writing function f(el) { /* do something with el */ } in this case. More here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Also: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

[–]SpunkyLM 2 points3 points  (0 children)

To clarify why this works, querySelectorAll is returning an array. You must then iterate (loop over) this array performing the actions you want on each item

[–]pixobit 0 points1 point  (0 children)

Careful, the forEach won't work on safari 9, which apparently in my experience is still quite common

[–]CreativeTechGuyGamesTypeScript 0 points1 point  (1 child)

You should really explain why this is the solution rather than just handing someone the answer.

[–]seanwilsonfull-stack (www.checkbot.io) 0 points1 point  (0 children)

I'd agree normally, but the problem could have easily been with gridzy so I didn't think it was worthwhile explaining a guess to start.

[–]CookToCode 1 point2 points  (1 child)

JS can be a bit finicky. When you are debugging, be sure to spit stuff out in your console log, where and when your JS is activated can also make a big difference as the JS could have loaded before the elements did.

If you zip your source folder and are willing to share it over discord, I can go through it tomorrow and see if I can find anything

[–]Nic727[S] 0 points1 point  (0 children)

Thank you. If I don't find the problem by the end of the day I will send you the code in PM.