Hey there
I tried to make a pro gallery (entries are filled in from a Database) and make an onItemClicked event. but when i click on an image in the gallery, nothing happens. This is the code i used for Testing:
export function test(event, $w) {
console.log(“test”)
}
and this is the wix pro gallery:
Am I missing something obvious?
try to use onClick:
doesn’t work
hmm it means that the
console.log("test")
part is corrupted
but i do not know how to fix it
Has this bug been resolved? I just spent hours in the editor… only to realize it doesn’t work on the Live site when published…
You’re not doing anything wrong, it’s not working right now. Maybe @yisrael-wix could check it out?
There seems to be numerous issues with the Pro Gallery causing the Pro Gallery to not be so pro, including videos added to the gallery through code not playing. I would also love to have an update on this, since it’s been an issue for months now with no signs of it being very high on the priority list.
For the moment, it’s probably better to just use the normal gallery as that does seem to work with item changed and clicked or even use a repeater and make your own.
I’ve the same problem. All ok in preview mode but not in Live.
OK… I think I found a work around…
We know this doesn’t work on Live:
export function gallery1_itemClicked(event) {
console.log(“galleryClicked”);
}
But this seems to work:
$w.onReady(function () {
$w(“#gallery1”).onItemClicked((event)=>{
console.log(“galleryClicked”);
});
This seems to work to get it to fire, but with this I am still unable to get the item index for the click. Trying to print it in the log results in undefined. Anyone have success with this?
Honestly it appears that the Pro Gallery is very bugged which also results into far longer page loading whenever it’s included on a page (at the time that I was working on my site it seemed that even after it was removed that there was still overhead because it was still included upon load through code and the Java sentry was catching all the bugs to prevent the whole thing from crashing).
What I wanted to do was open up a video player on click of the first item, after some failed attempts I tried injecting the video into the player through code, this however caused the video to not be playable due to a separate bug involving the Pro Gallery.
In the end I opted to just go for a workaround with 2 galleries both linked to the same database media gallery, one showing a bigger version of the image and one below it showing smaller images acting as thumbnails. I unshift the thumbnail gallery and add a video thumbnail image from the database, then when I click on that it opens the video player with a youtube video (this also allows me to offload some of the loading to youtube’s servers which in turn also means less bandwidth used and it means it doesn’t have to be loaded upon webpage load. Then when I click on any other thumbnail image than the first it checks to see if the player is open and if it is it will stop the youtube video playback and hide the player. It then shows the image in the big viewer based on [the item clicked]-1.
All in all this leads to a much faster site load time as well as the functionality we’re (most likely) looking for without having to wait for it to be fixed (it’s been borked for almost a year now if not longer, so I don’t expect it to be fixed soon and at this time it’s better to look for workarounds to what you need).
If you’re curious as to how it works and what it looks like in action you can have a look at this page: https://www.dennisvdharst.com/project/Ragnarok (desktop only due to not having taken the time yet to fix the mobile version).
Hope this helps a bit!
Cheers,
Dennis van der Harst
@jtguenard Try doing a console.log using the event item. Here’s an example of what I have for mine right now:
$w.onReady(function () {
$w(" #gallery1 ").onItemClicked((event)=>{
console.log("Gallery Item Title = "+ event.item.title);
}
});
Yes I’ve been struggling with this issue for weeks, trying to improve load times with Pro Gallery. I am working specifically with images.
I’ve tested extensively with using SSR doing query promises, then onReady loading the images the Pro Gallery using promises. And I’ve noticed… one thing that affects load times regardless of whatever I do… it has to do with the number of image elements in total being loaded up then rendered into the Pro Gallery. The fewer the elements the faster it goes.
I’m using this page for my testing since most of my users are coming from mobile, and I’m testing using an older iPhone6 and also an iPhoneX. https://www.kennethwinston.com/test3
The most significant improvement I’ve found is when I switched over to using a dataset, and limiting how many elements actually show up upon load, for Desktop, I set it to 12 items. Then when the user starts scrolling, I use a onViewPortLeave handler to loadMore()
By the time (seconds after) initial load, and the user loads, the rest of the images have already loaded/rendered and simply show up “faster” to the user.
My next tests will be to do what you suggested, to have a specifically sized super optimized tiny thumbnail image to load into Pro Gallery… then upon click it will lead to a product page with the larger res images in a Masonry Pro Gallery.
It seems with using a dataset vs manually doing the queries/promises is very similar in actual load time for the user experience.
Also, Pro Gallery seems to behave/load a littler differently on Mobile, and also the Expand Mode is more conducive for Mobile browsing than on Desktop (i.e., expand mode on Desktop is a little useless for my use case). The work around I’ve used here is to literally have two pro galleries with two different link behaviors. Desktop opens a link, Mobile opens up in Expand.
The fastest loading galleries I’ve used NON-Pro Gallery have been the normal none-pro Grid galleries. The issue with those is that if you use the “stretch to width” feature on desktop, the height of each thumbnail image stays static, meaning on higher resolution monitors it will look super “thin”. The non-pro masonry gallery sorta gets around this but is listed in design control.
Yea I’ll keep sharing “loading optimization” solutions as I discover them. I’ll post back when I get all my thumbnails created and connected with some load time numbers to compare.