Custom code to view different image on slideshow/gallery every time the website is opened or reloaded

Ask the community
, ,
1

Using Wix editor

I am wondering if there’s a custom code, way or possibility to make the slideshow/gallery on my homepage agrmmishra.com to show images in a way that every time someone opens the website or reloads it - the first image of the slideshow/gallery is different.

Please note - I have used the standard wix gallery and not the wix pro gallery.

If there’s a possibility to do this, then I am also not aware of how to change the code. Please guide me in brief.

2

You could create a custom dataset (CMS) with the images you want, beign an image per line, description and title for each image.

Them, put the gallery on the site and set a code to randomly grab an image from your collection.

wixData.query("myCollection")
  .find()
  .then( (results) => {
    let randomNumber =  Math.floor((Math.random() * results.items.length)); 
    let randomItem = results.items[randomNumber];

Remember to change “myCollection” to your collection name.

Then, you would also need a code to atribute the randomItem to your gallery, you can check this: https://www.youtube.com/watch?v=rKwx5jnf0Wc

Or, click here.

There are two approaches: to fill the gallery with the random generated number as a index for you array (collection) or using the first random generated number and adding 1 from there. The first one has the probblem that the numbers can repeat, so you should solve this.

1 Like
5

I have a tutorial that talks about randomizing content. My sample uses text connected to a dataset, but you can apply the same logic and steps to a gallery connected to a dataset.

Link: https://www.velo.totallycodable.com/post/create-timed-content-scheduled-content-and-randomized-content

6

Thanks for the tutorial but I am a beginner in this, and I am unable to use that logic to apply it to the gallery. I have tried different codes. It’s just not working :frowning: .

If there is code that is for a single image that is different everytime, that works too.

I found a code but it’s not working:

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

$w.onReady(async function () {

// Check the render cycle so this is just done once.
// Otherwise, server-side will render, and then the image
// switches to the image that the client-side rendered.
if (wixWindow.rendering.renderCycle === 1) {
let res = await wixData.query(“ImageID”).find();
let items = res.items;
let count = items.length; // how many images do we have?
let rnd = Math.floor(Math.random() * count);
$w(‘#imageFieldKey’).src = items[rnd].image; // get a random image
}

7

This is the code that worked for me. ChatGPT 4 worked it out for me. I created a Wix Pro Gallery and a collection that contained several items and each item had the field of a single image rather than a gallery, as having a single item with a gallery in the collection wasn’t randomizing the data for me. This code also further randomizes the first item shown everytime if the items are less in the collection, so this make sure the first image is different everytime.

This is the code if anyone needs it:

import wixData from 'wix-data';

$w.onReady(function () {
  randomizeAndDisplayGalleryImages();
});

function randomizeAndDisplayGalleryImages() {
  wixData.query('Projects') // Use your collection's actual name
    .find() // Fetch all items in the collection
    .then((results) => {
      if(results.items.length > 0) {
        let items = results.items;
        let randomizedItems = shuffleArray(items);

        // Prepare the items for the gallery
        let imagesForGallery = randomizedItems.map(item => {
          return {
            src: item.image, // Assuming 'image' is the field key for images in your collection
            title: "", // Optional: Add title if you have a title field
            description: "" // Optional: Add description if you have a description field
          };
        });

        $w('#gallery3').items = imagesForGallery;
      } else {
        console.log('No items found in the collection.');
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

function shuffleArray(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]]; // Swap elements
  }
  return array;
}