Create Dynamic Gallery/Slideshow

Ask the community
,
1

Ok guys, I’m almost done with this client’s site… I’m eager to share everything I’ve learned using Wix Code!

But before I’m done, my last Giant… how to create dynamic galleries or slideshows?

Let me elaborate : The client has a portfolio of projects, that I’m handling as a DB collection, and each project has images and videos but they’re not consistent in the amount of elements per project. Some project may have only 2 images and then another project may have 3 images and a video…

The idea : is that using Wix Code I could be able to set whatever container for those elements ( either gallery or slideshow , the one that’s capable to achieve what I need) to be dynamic in size so that when the project has only 2 images, then the container has only 2 elements in its array, and when it has 3 images and a video the container would have 4 elements in its array…

The catch : The images are loaded into the database as images, the video is loaded as a URL.

1031×225 68.2 KB

What do you say? can this be done?

2

Hey,
You can simply connect the gallery to your DB collection to display the images:

As for videos- currently there’s no option to create a dynamic video gallery. However, you can display videos at your dynamic item page by getting the current item’s video URL and set it as your video URL:
https://support.wix.com/en/article/how-to-add-a-dynamic-item-page

https://www.wix.com/code/reference/$w.Video.html

You can find further information about dynamic pages here:
https://support.wix.com/en/wix-code/dynamic-pages

Have a good day,
Tal.

3

Thank you Tal but this does not answer my need. As you can see on the image from my collection, the images i’m trying to load into the gallery are coming from the same record (ie Image1, Image2 and Image3). When I try to connect the gallery to the collection it can only select 1 image from each entry on the collection.

Hope you can help me.

4

Hey,

If you have different number of images for each record, and you wish to display all images of the same record, I recommend the following:

  1. Adding an image as placeholder for each " ProjectImage " column of your DB collection.
  2. Connect each placeholder image to the relevant image source as demonstrated here .

Now, lets say that for a specific record you have only two images and the ’ ProjectImage3 ’ field has no image. In order to make sure that there’s no empty space, you will need to collapse the third image placeholder:

$w.onRender(function () {
	const imageURL = $w('#dynamicDataset').getCurrentItem();
		
	if(imageURL.ProjectImage3 === undefined){
		$w("#imagePlaceholder").collapse();
	}
	else{
		$w("#imagePlaceholder").expand();
	}
});

I hope that it answers your question.

Have a good day,
Tal

5

Couldn’t do it with simple images because I needed them to be full width… here’s my solution using columnStrips. Thank you Tal, you helped me restart my loop :slight_smile:

 let images = 0; 
 let projectImages = [itemObj["projectImage1"], itemObj["projectImage2"], itemObj["projectImage3"]]; 
 setInterval(function () {
	console.log(projectImages[images]);
	if (projectImages[images] === undefined) {
		images=0;
	} else {
		$w('#imagePlaceholder').background.src = projectImages[images];
		images++;
	}
  }, 5000);
6

Hey Tal, now that you helped me with this one, would you mind looking into this other issue? https://www.wix.com/code/home/forum/questions-answers/wix-window-formfactor-not-working

Thank you!!

7

Would love to see how this works on the website. Do you mind sharing the link?