Hello!
I have a table connected to a database, and it includes an image column. I have looked, but cannot find how to open the full-size image when a user clicks on it.
The page is here:
https://www.seanarenas.com/workout-stats
Thank you!
Maybe use a dynamic lightbox?
You’d need to assign a click event to the button or clickable part of your table where the image is, then tell it to send information to your light box: using something like
import wixWindow from ‘wix-window’;
export function button1_click(event, $w) {
wixWIndow.openLIghtbox(‘yourLightbox’, $w(‘#yourDataset’).getCurrentItem())
}
Then on your Lightbox, import the data and assign it to a variable to use on your lightbox elements.
import {lightbox} from ‘wix-window’;
$w.onReady(() => {
let item = lightbox.getContext();
$w(‘#galleryFullSizeImage’).items = [
{src: item.Image}
];
});
The other way I bet you could do it… is to show/hide or expand/collapse an image or gallery element on the page? It’d be a similar process, on click event, tell the image what image to show and show the image element.
Hi,
In order to do so, please follow the instructions below:
- Get the image data by creating an onCellSelect event, open a lightbox and send the image source to the lightbox. This code should be added to the page section where the table is added:
import wixWindow from 'wix-window';
export function table1_cellSelect(event, $w) {
let cellData = event.cellData;
//the cell containes an image
if (cellData.indexOf("image://") !== -1){
wixWindow.openLightbox("lightbox", cellData);
}
}
Note that you need to change the table settings as explained in the documentation to “Cells”.
-
Create a lightbox and add an image as a placeholder.
-
Get the image source using the getContext function and change the image source to the received image data. This code should be added to the page section of the lightbox:
import wixWindow from 'wix-window';
$w.onReady(function () {
const recievedImage = wixWindow.lightbox.getContext();
$w('#image1').src = recievedImage;
});
I hope it’s clear.
Best,
Tal.
How do I do this step:
“Note that you need to change the table settings as explained in the documentation to “Cells”.”
I tried looking for that in documentation and was unable to find it.
I tried to do everything that you said, but am getting these errors. And the lightbox shows up when I arrive at the page, not when I click.
Hey it’s almost the weekend and I’d like to work on the site, can someone please take a look at this and let me know what I can do to fix it?
Hi Sean,
You should add an image as a placeholder to the llightbox and change its source and explained above.
The id of the placeholder image should be the the same id you set in the property panel .
As for the “Cells” question, I was referring to this image of the documentation .
Best,
Tal.
Hi Tal,
I fixed those things
I think all I’m missing is fixing this:
Where do I need to put that, and how would I “close” it?
You need to add this code to the page to which the table was added.
The name of the lightbox should be added to the openLightbox function (instead of the “lightbox” string).
As for your second query, you don’t need to close it. You can close the lightbox by clicking on the X sign or outside of the lightbox.
I need to add “$w” to the page to which the table and the lightbox was added.
But where in that code do I add it?
See the yellow bang mark telling me that I have never used a $w?
Well, I have never used a $w. This is essentially my first time using a $w. So, I don’t know where in that code to place it. I sat there for 45 minutes putting it in one place, Publishing, didn’t work, moved it to another place, re-published, etc.
I didn’t mean how to “close” the lightbox, I mean how to “close” the $w
This whole question is about how to get the code to work and stop giving me a bang mark.
So could you please just help me figure out how to fix this code? What do I copy/paste or type in what location in that code to make it stop giving me that error?
This is not an error message, this is a warning message. You don’t have to use this functionality. In this case, there’s no need to use the $w object given. There’s no option to remove this warning message. The first method written above (in my first post) should be added to the page to which the table was added. The second method should be added to the page section of the lightbox.
OK at least I’m not chasing down $w
But I still can’t get the lightbox to show up
Here’s the code for the page the table is on:
Here’s the code for the code on the lightbox page:
I changed the name in the openLightbox(“”) a few times trying to figure out if that’s what’s wrong, but I can’t seem to get it.
I must have done something wrong somewhere but can’t figure it out. Click, click, click, no big image.
Here’s the page:
https://www.seanarenas.com/workout-stats
Hi,
I’ve accessed your editor and saw that the name of the lightbox is “Workout Stats” (this is the only lightbox you have). Therefore, you should update the lightbox name, meaning change line 10 of the first image to be:
wixWindow.openLightbox("Workout Stats", cellData);
Should the issue persists, please send us the name of the page ( not the URL, the editor page name ) so that I can have a look.
Thanks,
Tal.
When I’d mentioned that I had changed the name in that field a few times, that was one of the names I had changed it to.
In fact, that’s what it was still at when I went to check just now, the last thing I had changed it to.
It’s referenced on this page if you want to check it out:
https://www.seanarenas.com/workout-stats
Hi,
The function is not added to the properties panel:
Please make sure that the name of the function in the Properties panel i s the same name of the function written in the code section.
Best,
Tal.
Awesommmeee, that worked!
Here’s a link to it working - maybe you can suggest ways to improve it (like changing the background to the lightbox, or maybe removing it, is the first thing that came to my mind when I saw it, lol)
Like I said in the other thread, I’m getting better at implementing your methods!
Thanks!
OK my next step on the page is to let the user sort by column titles.
Is there a function somewhere that basically says, "if (cellData = ColumnHeader) (then sort by that column) ?
Then I could add it to the table1_cellSelect event, yes?
Also, I am trying to link the second column, Workout Series , to the WorkoutSeries Pages (Dynamic) > WorkoutSeries (Series) page, but it does not show up on the Connect Table menu:
I tried including it as a dataset on the page, or not as a dataset on the page, and it doesn’t seem to matter.
How can I link this column to the appropriate Workout Series?
Hi,
I’m afraid that there’s no option to connect a table to multiple datasets. Therefore, there’s no option to link a specific column to a different dataset. Note that you can use Reference Fields to link one collection with other collections. As for your second query, you can either sort or filter the table content by changing the dataset settings as explained here .
Tal.
Can the user (the site visitor) sort based by clicking on the column headers?