Display table image via Lightbox

Discussion Ask a question
,
1

Please help to assist as still unable to display the image thru Lightbox.
Not sure if it is coding issues or database issue?

Successfully displayed the search dataset table results with all the fields (incl one photo column) from the database. However when trying to implement user select the cell from the result dataset table, not unable to display the click selected image of the dataset table via Lightbox.

Many thanks for helping me out on this issue.

import wixData from ‘wix-data’;
…
…
export function searchButton_onClick() {
$w(‘#dataset1’).onReady(function () {
wixData.query(‘WixRunningEventsDB’)
…
…

import wixWindow from ‘wix-window’;

export function table1_cellSelect(event) {
$w(‘#dataset1’).setCurrentItemIndex(event.itemIndex)
.then(() => {
wixWindow.openLightbox(‘ImagePhoto’,
$w(‘#dataset1’).getCurrentItem());
});
}

1920×1080 310 KB

2

Hey
First your code says #Dataset1 is not a valid data selector. This is crucial to solve, the dataset you have on your page, click on it and look in the property panel for it’s ID. Put that ID inside your code where you get that error.

If the Dataset1 is not configured correct your dataset actions won’t work.

Then also make sure you have row select activated in the Table and not Cell select. That will make it easier.

3

Thanks Andreas for the quick reply. Really appreciate your help.

Unfortunately I’m still having issues even after changing to row select. Dataset name looks correct as have no issue before and without Lightbox implementation.

Hope some wix code expert can assist on my issue.

4

Hi,
In line 65 you have a mistake.

$w('#dataset1').setCurrentItemIndex(event.rowIndex) // instead of event.itemIndex

Good luck
Roi

5

Hi Roi,

Many thanks for your time. I changed as suggested but still unable to pass the table results (i.e the photo column) to Lightbox and displayed it.

Appreciated if you can check my codes as to what could be the issues? Please help to show me how to pass the table column details to Lightbox and displayed it.

Trying desperately to solve this last requirement.

Regards

6

Hi,
I would do it differently.
Tell me what you think,

export function table1_rowSelect(event, $w) {
	wixWindow.openLightbox('ImagePhoto', event.rowData);
}

And in the Lightbox:

$w.onReady( () => {
    let item = lightbox.getContext();
    $w('#image6').src = item.photo;
});

Roi

2 Likes
7

Thank you Mr Roi Bendet for your great solution. Works perfectly and love it.
Really appreciated for your time in helping to solve my problem.

Have a great week ahead.
Cheers

8

Hi Roi,

Can you please help to look at my page (wow2wow.com) again. In editor the page name is “Display Image By Lightbox”.

  1. Used to displayed the image from the result table perfectly but now unable and only displayed the default image photo and not the photo from the result table when clicked. This code was working fine a few months ago. There is error msg currently as below.

Did not changed anything from last time.

  1. How can i change the size of the photo display once click the table row (to have full screen or larger than current default table output size).

Thanks again for your help.
Ming.

1920×1135 248 KB

9

Hi,

Is anyone able to help out with this issue?

Thanks

10

I’m still having this issue and no one replied.

Anyone able to help urgently? Many thanks.

11

Still no reply on my issue.
Any kind person able to help me out?
Many thanks in advance.