Table with images that show a popup of the image when clicked?

Ask the community
,
1

Hi,

I have a table connected to Dataset on a dynamic page. The table contains a column of images.

I’m trying: when an image is clicked show a popup of the image.

I did the following steps:

  1. 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);			
		}
}
  1. Create a lightbox and add an image as a placeholder.
  2. 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;
});

*events: table1 onClick - table1_cellSelect

I’m getting the error:

TypeError: Cannot read property 'indexOf' of undefined

Please help !

2

In table1_cellSelect() , cellData is apparently undefined as the error message states. You need to check how you are populating your Table.

3

Yes, cellDatta is undefined.

But I don’t fully understand your comment.

As usual, the images is uploaded to Image column in Products Database from Media (site files). table1 is located in a dynamic page and connected to Products Database . The first column in table1 retrieves images from the Products Database.

(note i have empty cells in the Image column of Products Database since the site content is not fully prepared - but the error appears when i click on images and not empty cells).

Do you need some more info to help me understand how i’m solving this?

4

@noa

If you have setup your table with the cells selected in the table settings, then it will open in a new window or the same window for you.
This event is only fired if the table is set in the Editor to select cells when clicked.
https://support.wix.com/en/article/table-settings
https://www.wix.com/corvid/reference/$w.TableCellEvent.html

Have a read of this Stack post too, especially the replies from Sam (Wix Mod).
https://stackoverflow.com/questions/51636471/wix-programmatically-connect-a-table-to-a-product-page

5

@yisrael-wix
@givemeawhisky : )

As i wrote in me first post - the table is set on the Editor to select cells when clicked.

Unfortunately I don’t understand how the Stack post @givemeawhisky sent me can help…

Please supply me the correct code.

Thank You :slight_smile:

6

Hi @yisrael-wix

I still have trouble with the above.
Getting now this Error:

TypeError: cellData.indexOf is not a function

Refresh =>
I have a table in a dynamic page connected to a dataset, the first column of the table retrieves images (uploaded to database from media > site files, yes the type of column in the database is correct).
I’m trying to link the images that in the table to a Lightbox, i.e. when a cell populated with an image is clicked the image will popup.

Using the following Code:
code inserted in Lightbox:

import wixWindow from 'wix-window';

$w.onReady(function () {
 
 const recievedImage = wixWindow.lightbox1.getContext();  
    $w('#image1').src = recievedImage;
});

code inserted in dynamic page:

import wixWindow from 'wix-window';

export function table1_cellSelect(event, $w) {
 let cellData = event.cellData; 
 
 //the cell contains an image
 if (cellData.indexOf("image://") !== -1){
            wixWindow.openLightbox("lightbox1", cellData);  
        }
}

table1 properties:
Select by cells
OnCellSelect - table1_cellSelect

I will appreciate your help

Noa