Click 'next' to view next image from returned query

Hi everyone

I have a repeater on my page with a picture on it. I have a query that returns images with the same ID code as the repeater. I have a next/back button on the repeater and I want it to show the next/back images returned from the query.

The code (kinda) works. However, after clicking either the back or forth button for the total amount of images returned from the query (e.g. 4 images returned, 4 clicks later) it starts returning " TypeError: Cannot read property ‘images’ of undefined " . and then won’t allow me to click any more.

It’s also a bit buggy when you start to jump between the back and forth button.

The repeater/image setup looks like this:


Here’s my code so far:

$w.onReady(function () {

$w("#repeater3").onItemReady( ($w, itemData, index) => {
    	
let refID = $w("#text151").text; // the text used for the ID ref
let i =0
    	wixData.query("images")
   		.eq("title", result)
        	.find()
        	.then((results)=> {
        					
			let resultLength = results.length;
			let item = results.items[i];
			let image = item.images;
			$w("#image16").src = image;

			$w("#button71").onClick(() => { // move forward button

				if (i >= item.length) {
        				i = 0;
    				} else {
					let next = results.items[i+1];
					let pic = next.images;
        				$w("#image16").src = pic;
        				i++;	

    				}
							
	
			$w("#button72").onClick(() => { // move back button

				if (i >= item.length) {
        				i = 0;
    				} else {
					let next = results.items[i+1];
					let pic = next.images;
        				$w("#image16").src = pic;
        				i--;	

    	                        }

								
                       })
	               .catch( (err) => {
                       let errorMsg = err;
     	
	        });
...
...

Many thanks for any help anyone can give :slight_smile:

Thomas

Hi Thomas!

I’d suggest you to use a galley component instead of a repeater.
The gallery has a built in methods of next() and previous () and will make it easier for you to achieve the scrolling through images sense.

In case this solution doesn’t work for you (or in case it is not what you’re trying to achieve) please reply with a link to your site so we’ll be able to inspect it and provide you with another solution.

Hope it helps!

Doron. :slight_smile: