Next /previous buttons in a lightbox

Ask the community
,
1

Hello everyone,

I am making a team page and want to browse each team member’s info in a lightbox. I add next and previous buttons in the lightbox and connect these buttons to the dataset and set the click action to be ‘connects to next item’ and ‘connects to previous item’. However when the lightbox is opened the next and previous buttons show disabled. To open the lightbox when clicking an item in a repeater I use the code from Code Queen. https://support.totallycodable.com/en/article/open-a-lightbox-when-clicking-an-item-in-a-repeater-using-a-button

Any ideas to make next and previous buttons working in a lightbox?
Thanks

1800×718 39.7 KB

2

Hi,
Please share your code so we can assist.

3

Hi Or,

Here is the code of lightbox :

import { lightbox } from ‘wix-window’ ;
import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;

$w.onReady(() => {
let theItem = lightbox.getContext(); //this is the item you took from page
let postID = theItem._id; // this is the field key for the item ID in the database collection

$w( “#dataset1” ).setFilter(wixData.filter()
.eq( “_id” , postID) //we are now filtering to to
)
.then(() => {
console.log( “Dataset is now filtered” );
})
. catch ((err) => {
console.log(err);
});

});

Code of the page :

import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;

$w.onReady( function () {
wixData.query( “Board” )
.find()
.then((results) => {
$w(#repeater1).data = results.items;
})
. catch ((err) => {
let errorMsg = err;
});

    $w(`#repeater1`).onItemReady(($w,repeaterItem) => { 
        console.log(repeaterItem); 
        $w(`#image1`).onClick((event)=>{ 
            wixWindow.openLightbox( "teambox" , repeaterItem);     
        }); 
    });

});

Thank you!