Simple Example of Gallery in Repeater

I’ve been digging through the forum and haven’t found a solid post/discussion about image galleries within Repeaters. The short answer is Yes, you can do it but with limitations.

Only non-pro galleries are compatible, and not all of them.

You’ll have to test out which ones work for your application: Add the gallery you want onto the page, get rid of all the placeholder images, and resize it to fit within your Repeater Container, you’ll get the blue prompt of attaching it to the container if it’s compatible. In my case, the Slider (spheres) gallery works.

You cannot use Pro Galleries because they can’t be contained inside the repeater container.

Regarding my example: I wanted a mobile product gallery where users could slide back and forth between two images within a repeater.

Step 1: Connect the Repeater to the Dataset you want to pull data from (only to the repeater, not the container)

Step 2: Design your container (this is where you “attach” the compatible gallery). In this case, I added, the Slider (spheres) gallery, removed all the images, changed the gallery design from circles to a 3:4 rectangle.

Step 3: Code your repeater

$w.onReady( function() {
    $w("#repeater1").onItemReady(($item, itemData, index)=>{
        $item("#gallery2").items = [
            {src: itemData.image1},
            {src: itemData.image2}
        ];
    }
});

I’m just loading two images from my data set without anything else, for additional functionality like link, title, description, just follow the Gallery API on what you can put there.

A note for anyone just starting to use repeaters, make sure you’re using $item and not $w, because you’re referring to objects in the repeater, not the page. Look at the examples from the Repeater API.

For basic things like the styleNum text field, i just used the Connect to Data option. But just as easily I could have coded it with:

$item("#styleNum").text = itemData.styleNum;

A simple screenshot of the finished product:

Not sure if they’re going to keep these “legacy” gallery types around, I’ve noticed they’ve removed a few of the original Grid types with each subsequent release of Pro Gallery variants.

4 Likes

Thank you for sharing your work Ken!

1 Like