So back to you…
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.
- You were using a WixProGallary (APP), which is not that easy to manage, especially for someone who just started with wix!
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…
What we can see here → This was your old Wix-Gallary-Pro, which is not able to be modified, since the buttons of this gallery are not compatible with CODE.
You can’t control the integrated buttons of the Wix-Pro-Gallery (previous/next) by code The conclusion → that means you also were not able to control the titles on the right side (at least not by using CODE).
- Your new SETUP → using a custom made → Gallary (out of already mentioned elements → repeater, textbox, box +buttons)…
I just tried to make a simple identical design (you will have to work on the DESIGN of course).
- As you can see…
a) The TITLE (left upper corner) → “13” gets loaded automatically.
b) The IMAGE of course, too.
c) Under the loaded IMAGE you see the REPEATER, which holds all other pictures out of the GALLARY-DATA.
You can click on of of them and see what happens.
- I did not understand why you used a → DYNAMIC-PAGE <— at all, since you don’t have generated dynamic items (you did not use it) —> so → page-transformation back to normal page (by the way → CODER do not need dynamic pages at all → they generate them on their own).
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…
- You can test your new CUSTOM-MADE-GALLERY here…
https://www.pourkouchak.com/blank-3
—> CHANGE THE URL OF YOUR PAGE LATER !!! <—
- On your START-PAGE (i called it start-page)…
…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 !!!
- For example your wished NEXT & PREVIOUS - functionality.
This for take a look onto the following CODE-PART…
$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.
- and a lot more…
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…
- Number one → 2x loaded items inside GALLERY… (all is good!!!).
- Number two → 8x loaded items inside GALLERY… (all is still good!!!).
- Number three → more then 8x loaded items inside GALLERY… (bad & ugly!!!).
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 !!!
