Gallery & repeaters

Discussion Ask a question
,
1

Hi there,
This topic discusses how to create a dynamic gallery if all the images are in the same row. This topic discusses how to add a photo gallery to a dynamic page.

I would like to use this technique for repeaters, but as a result all the containers display the same photos. I missed something, but I can’t understand what exactly… Any ideas?

2

Can you share your code, collection fields, and any error messages you receive?

3

Hi Sam,
Sample Code

$w(‘#dataset1’).onReady(() => {
var title = $w(“#dataset1”).getCurrentItem().title;
$w(‘#dataset2’).setFilter(
wixData.filter()
.eq(‘title’, title));
});

The gallery is connected to dataset2.

If the repeater contains only one item, this code works. If the repeater contains many items - photos are everywhere the same. There are no errors or messages. This code works fine on standard dynamic pages, however I want to show the photogallery in repeaters.

4

Hi,
You need to add ForEachItem to your code after the code given in this topic.
The code should look like this:

import wixData from 'wix-data';
$w.onReady(function () {
	wixData.query('collectionName').eq('name', 'test')
		.find().then(result => {
			const rowInDatabase = result.items[0];
			const imagesToShow = [];
			for (let key in rowInDatabase) {
				if (key.includes('photo')) {
					imagesToShow.push({
						src: rowInDatabase[key]
					});
				}
			}
			console.log(imagesToShow);
			$w("#repeater1").forEachItem(($w, itemData, index) => {
				$w("#image1").src = imagesToShow[index].src;
			});
		});
});

Good luck

1 Like
5

Hi,
Can you look at the example of my website that I did wrong? Thanks!
https://wixmanns.wixsite.com/izbalux6/apartments-kotelnicheskaya

6

You didn’t copy the “forEachItem” properly. You should use the index and the src like in the example code I published.

7

But I need to connect the data collection to the gallery and not to the image. In this case I get an error…

8

Hi Or,
Really looking forward to your reply.

9

In this case you should use this code instead of the “forEachItem” :

$w('#gallery').items = imagesToShow;

so the code should look like this:

wixData.query("Apartments-ru").eq('title', 'Kudrinskaya Superior Apartments')
		.find().then(result => {
			const rowInDatabase = result.items[0];
			const imagesToShow = [];
			for (let key in rowInDatabase) {
				if (key.includes("photo")) {
					imagesToShow.push({
						src: rowInDatabase[key]
					});
				}
			}
		$w('#gallery').items = imagesToShow;
		});

Good luck

10

But then each repeater contains the same photos.
https://wixmanns.wixsite.com/izbalux6/apartments-kotelnicheskaya
Depending on which row I will write here
wixData.query(“Apartments-ru”).eq(‘title’, ‘Kudrinskaya Superior Apartments’)

Maybe I’m trying to achieve the impossible?

11

Hi Eugene,

You actually need a combination of both forEachItem and Or’s last example code.

You will need to use Or’s example to find all the images before populating the repeater, creating an object with the urls. Urls in index 0 should match the first apartment, urls in index 1 should match the second one etc.

Once you have the object ready, you can populate the repeater using forEachItem.
Every time passing only the relevant urls from the previously made array using the ‘index’ variable given by the forEachItem function.

Good luck

1 Like
12

Can you elaborate on this code a bit more please Ido or Eugene? I’m having trouble too and an example would be great?

13

Hi,
You can find the documentation for repeaters here .
To populate a repeater by code first create the items object, pass to the repeater (repeater data ) and then populate it with forEachItem .

14

Thanks Ido, I do understand the principle but not exactly putting it into action:

import wixData from ‘wix-data’;

$w.onReady(function () {
wixData.query(“Properties”).contains(‘location’, ‘Queensland’)
.find().then(result => {
const rowInDatabase = result.items[0];
const imagesToShow = [];
for (let key in rowInDatabase) {
if (key.includes(“image”)) {
imagesToShow.push({
src: rowInDatabase[key]
});
}
}
$w(‘#repeater1’).forEachItem(($w, itemData, index) => {
let image1 = imagesToShow[index].src;
let image2 = imagesToShow[index].src;
let image3 = imagesToShow[index].src;
let image4 = imagesToShow[index].src;
let image5 = imagesToShow[index].src;
let image6 = imagesToShow[index].src;
$w(“#gallery2”).items = [ { src: image1, }, { src: image2, }, { src: image3, }, { src: image4, }, { src: image5, }, { src: image6, } ];
});

});
});

15

Ido could you look at this if you get a chance Please?

16

Hi,

The code will not work since attaching galleries to repeaters is not possible yet. However you can implement a gallery-like element by adding multiple image elements to a repeater.

1 Like
17

Thanks Ido, I have done that with next and previous arrows, images etc so that works great

18

Hi @ido I’m having some weird issues with this and the repeater if you could please take a look?

19

Hi All. Just a quick question, and sorry if its been asked before. With the repeater being limited to 1000 and if I set my dataset which is linked to said repeater to display only 20 items from many hundreds of items which the repeater could display, why is it that the repeater does not allow you to load another 20 items and display them like the standard grid display. I really do not want to set my Dataset to 1000 as its gonna take forever to load. Thanks in advance for any help
cheers

20

Hi,

The number of dataset items controls the number of items shown ‘per page’.
To load the next page of items, use the loadMore() function