Hi. I have a repeater when I clicking on each photo, takes the gallery photos of that photo from the database and displays it in a light box. Now the problem I have is that I need a Next and Previous button to show the next or previous item according to data taken from the repeater. How can I do this ? Please help me.
NOT: I try button connection to next page or next item but it still grey and doesn’t work.
Where is your code?
I don’t have any code !
must be magic.
I also wanna know that trick.
If you want to generate a customized Website → USE CODE and forget about PREDEFINED STUFF!!!
this is my page code
import wixWindow from ‘wix-window’ ;
export function imageX1_click_1 ( event , $w ) {
let projectTitle = $w ( ‘#title’ ). text
console . log ( projectTitle )
wixWindow . openLightbox ( 'portfolio' , projectTitle )
}
an this is my light box code
import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;
let popup = wixWindow . lightbox . getContext ();
console . log ( ‘popup’ )
console . log ( popup )
$w . onReady ( function () {
$w ( "#dataset1" ). onReady (() => {
$w ( "#dataset1" ). setFilter ( wixData . filter (). eq ( "title" , popup ))
. then (() => {
**let** currentItem = $w ( '#dataset1' ). getCurrentItem ();
$w ( '#image' ). src = currentItem . image ;
$w ( '#gallery1' ). items = currentItem . gallery ;
})
})
});
This will only work, if → currentItem is the selected item at same time.
You are filtering your dataset by → “TITLE” <—.
The —>TITLE<— of the currentItem, is the same?
$w("#dataset1").setFilter(wixData.filter().eq("title",popup));
//--------------------------------------------
letcurrentItem=$w('#dataset1').getCurrentItem();
And why you call the “title” → as → “popup” ? → that makes no sense!
Anyway, even if i think, that it won’t really work (my first impression), you can try to bring this idea till end…
import wixData from 'wix-data';
import wixWindow from 'wix-window';
let title = wixWindow.lightbox.getContext();
$w.onReady(()=>{
$w("#dataset1").onReady(()=>{
$w("#dataset1")
.setFilter(wixData.filter()
.eq("title", title))
.then(()=>{
let currentItem = $w('#dataset1').getCurrentItem();
$w('#image').src = currentItem.image;
//$w('#gallery1').items = currentItem.gallery;
}).catch((err)=>{console.log(err);});
$w('#myNextButtonIDhere').onClick(()=>{
let hasNext = $w("#myDataset").hasNext(); // true
if(hasNext) {console.log("Next ITEM found...");
$w("#myDataset").next()
.then((item)=> {
let fieldValue = item.fieldName;
}).catch((err)=> {let errMsg = err;});
}
else {console.log("No more ITEMS found!!!!");}
});
});
});
When taking a closer look onto your provided VIDEO, you can recognize, that when choosing a PIC and clicking onto it, something else is opened, but not the pic, you have chosen.
You did not explain well your setup!
The ELEMENT you are clicking on, is it your GALLARY or REPEATER?
I assume the BOX which pops-up will be your LIGHTBOX.
thanks a lot for your help but it’s not work . excuse me about my English. I am Persian and I don’t know English very well .
when in dynamic page I click on a image that’s open a light box and light box show the gallery and some information about that project .
know i want a next and previous button on light box for move between data set items (projects which show in repeater in dynamic page) in light box .
I have a idea but I don’t have professional knowledge about code .
I think it should count data set items in dynamic page then pass it to lightbox and in lightbox when visitor click on buttons move between the items .
You ask about my filtering . Yes Title is the same with current item title. and about my code I should say that I find it in a YouTube video and it’s work for me ! because of it I didn’t change code !
This is my dataset .
Well first of all →
Do not mix them up!
DATABASE —> here you store all your DATA.
DATASET -----> is some kind of connection-wire, which makes it possible to connect all your elements on your page with your database.
Let’s do some brainstorming…
1) You are currently on your → DYNAMIC-PAGE.
2) On your dynamic page you will have 2x DATASETS …
a) a dynamic one —> connecting your dynamic page with your DATABASE.
on this dynamic page you can show one item ONLY!!!
b) an ordinary dataset → “#dataset1” → this will connect your repeater also with a
database. Your repeater is also placed on your dynamic page.
When you have connected your repeater with the ORDINARY-DATASET, you will now
see all the items from your database inside the repeater.
Now you need a function, which will open a LIGHTBOX by a click on to one of the items inside the repeater. Which of both datasets is now the one we need?
Of course the one which connects the repeater with the database, in this case it is the ORDINARY-ONE (‘#dataset-1’)!!!
What is our aim one more time? → by a click onto one of the items–> we want to open a lightbox of the clicked DATA and further more we want to be able to use NEXT and BACK-BUTTONS on our lightbox.
This for we need to know at which point our INDEX starts. Yes a dataset has an INDEX.
Alll items are indexed. Oh wait → INDEX ???
Din’t i have seen something inside the VELO-API about INDEX when it comes to
DATASETS? Let’s take a look…
https://www.wix.com/velo/reference/wix-dataset/dataset/getcurrentitemindex
Heeeeeyyyy! We found something, maybe we can use in our case.
let itemIndex = $w("#myDataset").getCurrentItemIndex();// 3
So that means whenever we click onto one of our images in our repeater, we need to know the INDEX of the current clicked ITEM. But what for do i need this INDEX? Why i just can’t use TITLE, like already done?
Simple answer → knowing the index you will exactly know your starting point.
Are you able to tell which index you the item has, after you have used a TITLE-FILTRATION ? I did not test it → but probably not !!!
So we know now the INDEX of the clicked ITEM → what next ?
Now we want to open a light box, sending the found index of the iitem to the LIGHTBOX.
Once the LIGHTBOX has been opened and recieved the INDEX-VALUE, now you are able to get a starting point.
On your lightbox, which has elements also connected to the ordinary-dataset (dataset1), you load the item with the current selected INDEX…(recieved index on lightbox) —> first-time loading.
You can see now the item which you have selected on your dynamic page inside the lightbox.
$w.onReady(() => {
$w("#myDataset").onReady(()=> {
$w("#myDataset").getItems(3, 1) // <---INDEX !!!!
.then((result) => {
let items = result.items;
let totalCount = result.totalCount;
let offset = result.offset;
})
.catch((err) => {
let errMsg = err.message;
let errCode = err.code;
});
});
});
Of course there are many possibilities and ways of how to solve your problem.
This is just one of many!!!
EDIT: For example in my case → i woul go an absolute CODING-WAY, with a completely different setup. Everything depends on the SETUP of your page/site.
Thanks a lot again for your time . you explain it very well I but I don’t understand anything and i couldn’t modify code for my case . again thanks a lot for your time .
Send me an invitation to your project, i will take a look directly in your Editor, if you want. You will find my e-mail in my profile.
Thanks a lot . I sent you an invitation
I have spent some time on your project.
Like i assumed, you did not describe your project well.
Also your setup was not really the best for your purposes.
However, what was the problem and how did i solved it.
Just forget about it, this is to hard stuff, to be able to modify it the way you wanted.
Instead we are using now a much more dynamic CUSTOM-SETUP, made of BOXES+REPEATER+some BUTTONS and TEXT-BOXES.
Your old SETUP…
I just tried to make a simple identical design (you will have to work on the DESIGN of course).
You can click on of of them and see what happens.
The used ( and uncompleted ) CODE just right now on your LIGHTBOX is…
import wixWindow from 'wix-window';
$w.onReady(async()=>{let counter = 0;
let data = wixWindow.lightbox.getContext();
//-------------------------------
$w('#txtTitle').text = data.title;
$w('#imgTitle').src=data.image;
//-------------------------------
$w('#repList').data = await add_ID(data.gallery);
//-------------------------------
$w('#btnPrevious').onClick(()=>{counter=counter-1;});
$w('#btnNext').onClick(()=>{counter=counter+1;});
$w('#repList').onItemReady(($i,iData,ind)=>{
$i('#imgPreview').src=iData.src;
$i('#repBox').onMouseIn(()=>{
$i('#repBox').style.backgroundColor = "rgba(155,200,250,0.7)";
});
$i('#repBox').onMouseOut(()=>{
$i('#repBox').style.backgroundColor = "rgba(250,250,250,1)";
});
$i('#repBox').onClick(()=>{
$w('#txtTitleRight').text = iData.title;
$w('#txtDescription').text = iData.description;
$w('#txtItemID').text = iData._id;
$w('#imgTitle').src = iData.src;
});
});
});
function add_ID(dataPackage) {
dataPackage.forEach(element => {
element._id=generateRandomId();
});
return dataPackage;
function generateRandomId() {
let _id = '';
for (let i = 0; i < 10; i++) {
_id += Math.floor(Math.random() * 10);
}
return _id;
}
}
Some additional coding was needed, to be able to make it work.
a) A function, which adds a random identifier (ID) into all your GALLARY-ITEMS —> since the gallary-data has do included —> _id
b) Including a sub-function, which generates random string-IDs.
c) You will need also a further function later to be able to control the repeater which is placed underneath the Tile-Image…
https://www.pourkouchak.com/blank-3
—> CHANGE THE URL OF YOUR PAGE LATER !!! <—
…you will also have to complete the functions…
As you can see, the repeater hides when you open the LIGHBOX.
What you will have to generate is a code, which will unhide the repeater again and show it, after you have closed the LIGHBOX and navigated back to your START-PAGE…
There are is still a lot to be coded !!!
$w('#btnPrevious').onClick(()=>{counter=counter-1;
//Place your code here to load/show previous item...
});
$w('#btnNext').onClick(()=>{counter=counter+1;
//Place your code here to load/show next item...
});
Now you have full-control over your CUSTOM-MADE-GALLARY.
Now you are able to…
-add new elements, features and functions to your own created GALLERY.
-remove existing functions and features.
-working without any boundaries, since you are not bindet onto a dataset anymore.
for example -->you have seen the changing color when hovering over the gallary-items ??? 
Now you can design and control everything on your own.
All you have to do → is to code it !!!
EDIT: Oh by the way → you will face another issue, or even 2, or 3 more issues you will have to handle in future.
For example the mentined problem with chuncked DATA…
Taking a look onto this 2x pictures you will understand the problem…
This was the problem with the (not chunkified-data).
How to solve it???
There are surely a lot of possibilities of how to manage that issue.
Trying to modify REPEATER-OPTIONS. → There are different REPEATER-TYPES given in EDITOR-X and you have a few options. Play around and see if you cand find something useful.
You do it again by CODE…example…of how to code ARRAY-CHUNKS…
// Example array
const longArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
// Call the function to get chunked data
const chunkedData = chunkArray(longArray, 10);
// Output the chunked data
chunkedData.forEach(chunk => {
console.log(chunk);
});
Yeah i know, a lot of work → BUT!!! → Now work = no success !!!
again thanks a lot for your time . I think my describe is not well . I need to control all of lightbox elements with clicking on next or previous button . i don’t need to show thumbnail image in lightbox , i need when visitor click on next button wix pro gallery show next item’s gallery and change title and other elements in lightbox against next item.
I know.
All what you would have to do is to send not just the current itemData over to the Lightbox, instead you also could send over the full database-query to LIGHTBOX, or quering database directly on LIGHTBOX.
You know your starting point, since you have the item-data, which includes all infos you need.
You could change the behaviour of my example-setup within 10-15min, to achieve what you need.
I test too many code but I couldn’t modify right code for my case.
