I am creating a team page with repeaters which contain images from a database.
When user clicks image I want lightbox to open, displaying image + biography for that databse row
So presumably it needs to
- recognise which data item is in the repeater
- find that data item from the database
- retrieve image + biography fields for that data item
- open lightbox with that data.
- lightbox closes on clicking close
I have been reading round and though other people have similar queries, I dont see how to bring these elements together so I think the simplest thing now is just to ask; what should the code be?
datacollection is “Team”
Image field is labeled ‘image"
biography field is labelled "Biography’
clicking the repeater creates event: container2_click
Many thanks
Hi Simon:
The repeater is driven from a dataset which links your data collection to the page.
Each image in the repeater needs to be connected to an onClick function that wix will scope to the
dataset item used to display the image.
When the image is clicked the onClick function passes an event argument that contains a context property. You use this context property to access the specific dataset item in the repeater for your lightbox.
When you open the light box simply pass the dataset item to the openLightbox as its data parameter.
You can then access the data in your lightbox by accessing the lightbox.getContext().
So in code
you need a dataset which we will call TeamDataset.
You can use the container2_click if you want but connecting to the image may make more sense either way this should still work
import wixWindow from 'wix-window';
external function container2_click(event) {
// Get the repeater context element scope
let scope = $w.at(event.context);
let teamMemberRecord = scope('TeamDataset').getCurrentItem();
wixWindow.openLightbox('TeamMemberBiography', teamMemberRecord);
}
Then in your lightbox in onReady…
import wixWindow from 'wix-window';
$w.onReady(() => {
let teamMemberRecord = wixWindow.lightbox.getContext();
if (teamMemberRecord) {
// Extract image and biography from record
let image = teamMemberRecord['image'];
// assume property is biography this should be whatever this
// field is called in the data collection
let biography = teamMemberRecord['biography'];
// Add these values to your UI elements...
}
Hope this helps
Steve
Hi Steve
Firstly thank you so much for this help.
The line: external function container2_click(event) { gives parsing error: unexpected token function.
-Should it be export function instead?
then the line let teamMemberRecord = scope(‘TeamDataset’).getCurrentItem(); gives TeamDataset is not a valid selctor. (the dataset exists and is named exactly as the quotes)
Any ideas?
Simon
Hi Simon:
Yes sorry good catch export is the correct verb.
So as I mentioned in my post I don’t know what your page looks like so it isn’t clear to me what the name of the dataset is that you are using to drive the repeater. If you have used the default name that wix gives you then “#TeamDataset” probably needs to be ‘#dataset1’. Basically it needs to be what drives the repeater data.
Hope this helps
Steve
Hi I have finally cracked it. My solution came as follows;
I noticed that although the collection and dataset were named as ‘Team’, that the icon for the dataset on my repeaters page still had the name #dataset1, hence I updated the dataset name to #dataset1 in the code.
I also realised that I needed to update my Lightbox ID to Biography in its properties, even though the Lightbox was named Biography.
Many thanks again for your help getting me started. I wouldn’t have been able to do it without that help.
Simon
Hi I spoke too soon. The lightbox opens but it always pulls in the first record. Any ideas??
Simon:
Make sure you are using the context from the event that fires on the container2_click
let scope = $ w.at (event.context);
don’t use $w because it won’t map to the repeater item that you need. This may be why you are always seeing the first item being passed to the lightbox.
What is the URL of your page? With access to the page it will be easier to debug.
Another thing you can do is use console.log to print the values of objects being passed to and returned from the functions to make sure they are being used correctly.
So for example add one before the openLightbox
console.log('teamMemberRecord = '+JSON.stringify(teamMemberRecord));
wixWindow.openLightbox('TeamMemberBiography', teamMemberRecord);
and after the lightbox loads
let teamMemberRecord = wixWindow.lightbox.getContext();
console.log('teamMemberRecord = '+JSON.stringify(teamMemberRecord));
The output from these log messages will help figure out what is going wrong.
Cheers
Steve
Hi Simon:
I just looked at your page code and the problem you have with the lightbox is you are not assigning anything to the elements on the lightbox page.
The data is being passed to the Lightbox from the page you just need to load up the lightbox elements!
Steve
Hi.Steve
The Lightbox elements have already been connected to the fields in the dataset in the standard way.
How then do we get the data sent to the Lightbox to load up in those elements?
Is it perhaps a problem with this bit?
// Extract image and biography from record
let image = teamMemberRecord[‘image’];
// assume property is biography this should be whatever this
// field is called in the data collection
let biography = teamMemberRecord[‘biography’];
// Extract image and biography from record
Should ‘let image’ be replaced with ‘let #image8’? But that got me a parsing error and having ‘image8’ did not help either.
Simon
Ok now resolved. Thank you Steve!
1 Like
@stcroppe @simon67263 @simon-gouldman
Hello,
i would like to do the same thing but my lightbox is not opening.
Please help me out
export function button3_click(event) {
//Add your code for this event here:
let scope = $w.at(event.context);
let currentPost = scope(‘#dataset1’).getCurrentItem();
wixWindow.openLightbox(“LBcomment”, currentPost);
}
Thank you very much
Is the button3 event still connected in the editor? Sometimes the editor might forget the binding. I generally don’t use the element binding as a result and set the even handler in onReady.
$w.onReady(() => {
$w(“#button3”).onClick(button3_click);
});
1 Like
@stcroppe
hello, thank you for the feedback.
I have added the code below in two forms
like this:
$w.onReady(() => {
$w(‘#button3’).onClick(button3_click);
});
export function button3_click(event) {
//Add your code for this event here:
let scope = $w.at(event.context);
let currentPost = scope(‘#dataset1’).getCurrentItem();
wixWindow.openLightbox(“LBcomment”, currentPost);
}
and like this:
$w.onReady(() => {
$w(‘#button3’).onClick(button3_click);
let scope = $w.at(event.context);
let currentPost = scope(‘#dataset1’).getCurrentItem();
wixWindow.openLightbox(“LBcomment”, currentPost);
});
though here, it says events is not defined error.
But they are both not working.
below is the picture of my editor. the page is main page (search) and the button is labeled comment. The light box is comment (sidebar).
Can you please show me how to get it right?
here is the link to my editor
https://editor.wix.com/html/editor/web/renderer/edit/c04be7a4-7702-42e7-b5c5-eb45db15c154?metaSiteId=5140d697-5b57-4748-ad9d-cab5cf80ed76&editorSessionId=37f34c70-15ba-4bdf-aa29-a315a69cd961&referralInfo=my-account
Thank you very much
Can you do a screen shot of the page list that includes your light box pages? Also please share all of the code in the page your button is on and the code for the light box.
1 Like
Hello,
I am sorry for my absence and i really appreciate you helping me.
from the picture above, i have highlighted the following,
1 - the current page, 2- the lightbox named comment, 3- the onlick event.
The picture below shows the lightbox,
1- is the current lightbox and 2 is the page code
P.S the editor link is in my post above in case you need to look at it yourself.
Thank you very much. I look forward to hearing from you
regards,
@stcroppe hello,
I hope you are still around. I am waiting for your help.
please.
Thank you.
@stcroppe
Hello,
Anyone? help please
How did your resolve this Simon?
Hi! I’m trying to do the same, but I can’t make it work… Anyone there to help me??
Hi! I’m trying to do the same, but I can’t make it work… Anyone there to help me??
