onitemClicked and .next() on progallery

Ask the community
, ,
1

Hello everyone, i am trying to do a simple thing (for it’s just to dumb to not work) : add an onclicked event on a progallery (diaporama, slides, so this has the capacity to be playable), to see the next image of my gallery , but i can’t figure it out with it. I saw previous posts saying the pro gallery was buggy, but i didn’t think of that.

My pro gallery :
On settings :

  • On click : no action (or it will open me something else, like a fullscreen picture)
  • dowload, heart icon, share : disabled
    On design :
  • Navigation arrows : disabled
    On advanced :
  • video playing : on automatically

If you can please try with me to figure it out, i don’t know what is wrong.

The code is bellow, and the console.log does display “galleryClicked”.

$w.onReady(function () {
$w("#gallery1").onItemClicked((event)=>{

        console.log("galleryClicked");  
});})

export function gallery1_itemClicked(event, w$) {
    $w("#gallery1").next();
}
2

You have two event handlers to handle the event of item being clicked. Do you have gallery1_itemClicked() connected in the Properties panel to the Gallery? If not, it won’t run. Which of the two do you want to use? Having two definitions for the same event handler will result in unpredictable behavior.

Using just one of them (the one in the onReady() function), your code should look something like this (untested):

$w.onReady(function () {
    $w("#gallery1").onItemClicked((event)=>{
        console.log("galleryClicked");  
        $w("#gallery1").next();
    });
})

When an item is clicked, it triggers onItemClicked(). You will then see “galleryClicked” displayed in the console, and the gallery should then go to the next item.

3

Hell Yisrael ! Thanks for your answer ! I do follow a lot of your posts :smiley: (Cheering dev fan) !

However, yes the gallery1_itemClicked() is connected !

Ok, but if i erase the code in the $w . onReady ( function ** ** (), it should work ? Right ? However i tried both ways :

export function gallery1_itemClicked(event) {
       $w("#gallery1").next();
    console.log("galleryClicked");
}

Here actually the console.log doesn’t trigger ^^ don’t know why

And here (i did delete the onitemClicked property) :

$w.onReady(function () {
    $w("#gallery1").onItemClicked((event, w$) => {
  $w("#gallery1").next();
    console.log("galleryClicked");
 
    });
})

Error in console log : Gallery failed to activate onItemClicked callbacks TypeError: $w(…).next is not a function

4

@edouard Are you sure that the Gallery that you are using supports next() ?

5

@yisrael-wix It’s slides (diaporama) so yeah for sure

6

@edouard Hmmm - please post your site’s URL so I can take a peek.

7

@yisrael-wix Home | Betterandbetter (editorx.io)
here you go !

8

@edouard
I tried the following code, and as you can see, the Gallery that you are using does not support the next() event handler.

import window from 'wix-window';

$w.onReady(function () {
   let capabilities = $w("#gallery1").galleryCapabilities;
   console.log(capabilities);
})

Note that the import statement needs to go at the top of the file.

Run the above and you will get the following:

900×400 33.7 KB

As you can see, isPlayable is false, which means that the Pro Gallery does not support next() and other event handlers.

If you need that functionality, you will need to change which Gallery element you are using.

9

@yisrael-wix Ok weird it’s not working, it’s sliding, so should get independant items and shoulde be playable ! i wanted to keep the full screen image diaporama, but it’ll try with others templates so … Thanks for your help, sad that it doesn’t work with that ^^

Actually, it will be useful to get a list of what kind of progallery is playable ! Because it seams that all of them aren’t playable ! Does it means i need to use something else than Pro Gallery ?

10

@edouard Yes, you’ll need to choose one of the other (newer) Gallery components.

11

@yisrael-wix in the wix app store ?

12

@edouard One of the screen elements - not the app store.

Editor X is new and is still in Beta, so it might not yet support all of the galleries that are available in the classic Editor.

I’m not really sure what all is available on EditorX. I would suggest r eaching out to Wix Customer Care as they’ll be able to help you on this better than I can.

13

Hello @yisrael-wix ,

i contacted support and no response yet, i’ve tried the same code on the “normal” wix editor and it still not work on gallery pro, any further ideas ?
Do i need to put something else in the code ?

export function gallery1_itemClicked(event) {
       $w("#gallery1").next(); // is that really   $w("#gallery1") that i need to use ? or something like   $w(galleryitem) or else
}
14

@edouard It won’t work on the Pro Gallery in either Editor. The Pro Gallery API is very limited. You will need to use one of the other available Galleries, but I’m not sure if they’re available in Editor X.

If you were on the Classic Editor, I would suggest using a Slide Show to create a gallery. You can check on the Editor X Community Forum and ask there what your options are.