Single image w/ 'next button' (display next returned query)

Ask the community
,
1

Hi

I’m trying to get a gallery style format on my repeaters. I have an image on each repeater and a ‘next image’ button. Each repeater has an ID on it and this is used to query an images dataset to get the images.

This is what it looks like:


This is my code. I want it to just keep showing the next image / item (on ‘next’ click) from the returned query.

let refID = $w("#text151").text; // reference number on the repeater from properties dataset (matches to the images dataset)

wixData.query("images") // dataset name
        .eq("title", refID) //ID matched to title field
        .find()
        .then((results)=> {
        					
			let item = results.items[0];
			let image = item.images;
			$w("#image18").src = image; // shows first result

$w("#button66").onClick(() => { // button on the repeater

			let next = results.items[+1];
			let pic = next.images;
			$w("#image18").src = pic; // shows second image (but doesn't work for subsequent images)
								
   })
   .catch( (err) => {
    let errorMsg = err;
     	
});

Any ideas on how to get this to keep displaying the next returned result from the query?

Many thanks for any help!

Thomas

2

just giving this another little nudge :slight_smile:

3

Hi Thomas!

What about getting all the items into an array and move a slot on button_click?
I imagine it’ll look something like that:

import wixData from 'wix-data';

let i = 0;
let data = [];
$w.onReady(function () {
    wixData.query("ImagesCollection")
        .find()
        .then((res) => {
            data = res.items.images;
        });
});

export function nextButton_click(event, $w) {
 if (i >= data.length) {
        i = 0;
    } else {
        $w("#image1").src = data[i];
        i++;
    }
}

Make the adjustments for it to fit to your page and you’re good to go!
Let me know if it worked for you.

Best of luck!

Doron. :slight_smile:

4

Hi Doron

Thanks for the reply!

I’ve managed to get it working with a mash up of the two codes. However, on the first time i click the ‘next’ button , it takes two clicks to get it moving . After that, it then scrolls fine.

Any idea whats happening?

Here’s my code:

$w.onReady(function () {

$w("#repeater3").onItemReady( ($w, itemData, index) => {
    	
let city = itemData.city; // adds item data to repeater
$w("#text142").text = city; // adds item data to repeater

let refID = $w("#text151").text;
let i = 0

wixData.query("images")
       .eq("title", refID)
       .find()
       .then((results)=> {			
                let item = results.items[i];
		let image = item.images;
	        $w("#image18").src = image;

$w("#button66").onClick(() => {

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

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

});

Thanks Again!
Thomas

5

Hi Thomas!

Please share a link to your site so we can inspect it and provide you with an answer.

Doron.

6

Hi Doron

My site is called: www.kreliving.com the page i’m testing this on is called “Map Rental”. (it’s in the process of an over-haul)

I’ve got the forward button working and I’ve added the back button too, but it’s still buggy going back and forth.

However, after clicking for the total amount of images returned from the query (back or forth) it starts returning " TypeError: Cannot read property ‘images’ of undefined " . and then won’t allow me to click any more.

Solved the double click issue with:

let next = results.items[i+1];

Thanks again for the help!

The images on the repeater are at the bottom of the page. Starting around line 135 of the code.

Many thanks

Thomas

7

Hi Doron

Have you managed to figure out what may be happening?

Many thanks again :slight_smile:

Thomas