Create a random gallery each time reaload browser

Ask the community
,
1

Hey Guys,

So I’m working on a page, using a Pro Gallery Wix we want to show new pictures everytime we reload the browser or get back on the home page. If we click on the picture we open a link on a blank tab of the browser to the artist page.

Here is my code :

My Gallery is #galleryhome
My data is #datagallery
In the data I have :
Image : for the picture in the Gallery
Artiste : Name of the Artist
URL : link of the page

import wixWindow from ‘wix-window’ ;
import wixData from ‘wix-data’ ;

$w . onReady ( async function () {
if ( wixWindow . rendering . env === ‘browser’ || wixWindow . viewMode === ‘Preview’ ) {
let res = await wixData . query ( “datagallery” ). find ();
let items = $w ( “#galleryhome” ). items ;
let items = shuffle ( items );
$w ( “#galleryhome” ). items = items ;
}
});
export function shuffle ( array ) {
for ( let i = array . length - 1 ; i > 0 ; i --) {
const j = Math . floor ( Math . random () * ( i + 1 ));
[ array [ i ], array [ j ]] = [ array [ j ], array [ i ]];
}
return array ;
}

I can’t figure why my gallery don’t get randomize and why my links don’t work anymore…

I don’t found why I can’t use two times ‘items’ at line 7 and 8.

Thanks for helps.

2

Hi, the problem with the ‘let items’ is because you’re defining twice a variable with the same name.
You can change for example the name of the second variable as ‘let shuffledItems’. Or just remove the ‘let’ keyword to overwrite the variable.

About your shuffling function i did not check if it actually works. I do not fully understand what your algorithm should do.

I suggest you another method for shuffling the items using the sort method:
credits: https://sebhastian.com/shuffle-array-javascript/

let shuffledItems = items.sort(function () {  return Math.random() - 0.5;});
3

Unfortunatly that doesn’t work, I tried to set a new item call “image” and put your fonction on it then set the value of the fonction to my data
$w . onReady ( async function () {
if ( wixWindow . rendering . env === ‘browser’ || wixWindow . viewMode === ‘Preview’ ) {
await wixData . query ( “datagallery” ). find ();
let image = $w ( “#galleryhome” ). items ;
let shuffleItems = image . sort ( function () { return Math . random () - 0.5 ;});
$w ( “#galleryhome” ). items = shuffleItems ;
}
});

4

Hi, I actually have a gallery on my website and it works just fine with 1 line:


$w.onReady(function () {

    $w('#gallery1').items = $w('#gallery1').items.sort(function () {  return Math.random() - 0.5;});
});

Be sure that in your gallery there are more images that normally rotate. You don’t really need to query the dataset if the images are already saved inside the gallery.

1 Like
5

I just tried pasting that code in the Velo area, but the preview shows the gallery entirely blank. I looked in the inspector and don’t see anything for #gallery1. Not sure what to replace the #gallery1 with, but I’m thinking that’s the issue. Can anyone help clarify how to get this solution working for a randomized gallery slider?

6

Are you able to share a screenshot of the code you have? Are you seeing any red lines under any of the code?