Randomizing ENTIRE image gallery

Ask the community
,
1

Hello, I’ve seen this question asked many times before so I wanted to clarify the exact issue I’ve been having. A lot of others have asked for help with code to randomize a gallery when a page is loaded. I have implemented the following code in one of my pages in an attempt to randomize the entire gallery of 300+ images:

$w . onReady ( function () {
let items = $w ( “#gallery1” ). items ; items = shuffle ( items ); $w ( “#gallery1” ). 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; }

This code was taken exactly from another user, but when I implement it all I get is a blank page. I implemented the code again, but this time where the first chunk only executes when a button is pressed. When I press this button, it successfully randomizes the first 50 loaded images, but then I can’t scroll down and load any more images. I’m looking for some code that will allow me to randomize all 300+ images, so when I load the page I can have the entire gallery random.

Thank you.

2

How are you populating the Gallery?

3

The gallery itself is a pro gallery that I fill with pictures by clicking on it and doing “add media” → “image” → then selecting images from a folder in my media and adding them to the gallery

4

I’m trying to do this exact same thing! Is there currently a good solution for this?

5

Are you using a Pro Gallery?
If you look here and scroll down to Notes you’ll see that for a Pro Gallery you need to connect the gallery to a dataset first.

6

Are you using a Pro Gallery?
If you look here and scroll down to Notes you’ll see that for a Pro Gallery you need to connect the gallery to a dataset first…

7

Thanks for the quick reply! taking a look now

8

Normaly i would say, that it is not possible to use a PRO-GALLERY for your purposes. But there is a workaround i think (like mentioned by christopherb )

Maybe you really can use the DATASET to solve your issue.

But normaly you should go the CODING-WAY…

Like schon in the following example…
START | My Site 4 (russian-dima.wixsite.com)

This is a quick generated example, using → a normal gallery (NOT-PRO-GALLERY). And also do not need any DATASET-CONNECTIONS.

Everything works like a charm with a normal gallery…(21-items in gallery)

$w.onReady(()=>{    
    let items = $w("#gallery1").items; 
    $w('#button1').onClick(()=>{
        shuffle(items);
    });    
});


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]];
        $w("#gallery1").items = array;
    }
}
9

What is the code for a Pro Gallery?

10

He encontrado este código pero con un repetidor:

import wixData from 'wix-data';

$w.onReady(function () {
    $w("#datasetID").onReady(() => {
        wixData.query("CollectionID")
            .find()
            .then((result) => {
                const shuffledArray = shuffleArray(result.items);
                $w('#repeaterID').data = shuffledArray;
            })
            .catch((err) => {
                let errorMsg = err;
            });
    });
});

function getRandomIndex(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

function shuffleArray(dataArray) {

    for (let i = dataArray.length - 1; i > 0; i--) {
        let index = getRandomIndex(0, i);
        const temp = dataArray[i];
        dataArray[i] = dataArray[index];
        dataArray[index] = temp;
    }
    return dataArray;
}
11

Hi sorry…but what is a NOT-PRO-GALLERY?

12

Hi, @emme_works !!

This means that Wix has an element called ‘Pro Gallery’ and regular gallery elements. :innocent:

1 Like