Dynamic Lightboxes for Videos using a Dataset URL?

sachin-tandon · February 18, 2018, 8:46am

I have a dataset with text fields and a URL field
I have created a table, and want do display the video that relates to the row that is selected in a lightbox.
How do you do that?

The Table has fields as follows:
“Title”
“Description”
“Author”

The dataset it is linked to also has a field called
“Link” (which is a URL type field)

I’ve not though shown this field in the Table displayed on the page (the URLs are too long).

I’ve looked at the onrowselect, and row commands, and oncurrentindexchange and get selected item commands, but cannot get the wix window open lightbox functions to work properly.

The Tabel ID is “Video Tutorials”
The Lightbox page and Lightbox ID are called “Video Lightbox”

Any help would be greatly appreciated!

sachin-tandon · February 19, 2018, 11:15am

WixTeam and Forum Members,

Any luck with solving this?

Problem is similiar to another post using Table Cell Select to open that image in a Lightbox.

My problem is slightly different. I want to load the video into a lightbox.

Dataset:
The videos are on youtube, and their URLs are referenced in a dataset called “Video Tutorials”, in a field called “Link” , with field type “URL”

On the page I’ve created: The Table has fields as follows:

“Title”
“Description”
plus a few more purely decriptive text fields

The Table is linked to a dataset called “Video Tutorials”, which has a field called
“Link” (which is a URL type field) - where the Video URLs are stored

Right now, I’ve just included the Video URLs as a linkpath to the first column (Called “Title” of the Table)

See here >> (bottom half of page)

https://sachin1882.wixsite.com/startechcapital/guides

I’d like it so that when a particular row is selected, it opens the video (related to that row) in a lightbox
OR, that
when the linkpath of the first column is clicked, that it doesn’t open the link in a new window - as it currently does -, but opens it in a lightbox

I don’t think the second option is possible, and I’m failing at the first. : - (

Sachin

roi-bendet · February 19, 2018, 1:02pm

Hi,
Here are some references for your issues:

Please update with your progress
Roi

sachin-tandon · February 19, 2018, 8:33pm

I’ve now created the lightbox, and connected it to my video tutorial dataset, connecting its source to the Video URL in that Dataset.

I’ve used the onclick event to call the onrowselect function for the Table object (which is located on another page), and called the open lightbox function.

The ligthbox does open, with the video that plays. The only problem is that, regardless of which row in the table I click on, the “same” video loads into the lightbox.

See here>> https://sachin1882.wixsite.com/startechcapital/guides
Table is at the bottom of the page. Try clicking on any row (but don’t click on the first column’s linkpath).
The same video opens no matter what?

Sachin

sachin-tandon · February 23, 2018, 7:55am

Guys,

I made some progress, but, the same video keeps loading, regardless of which row I select…

Any thoughts on a solution?

Sachin

roi-bendet · February 25, 2018, 8:14am

Hi Sachin,
Yes, it is possible to add props when opening a lightbox.
My suggestion is to add the source url and to use getContext method when is opens.
Please update in your progress.
Roi

sachin-tandon · February 25, 2018, 9:34am

Hi Roi,

How would I do this?

Currently, the code in this page (https://sachin1882.wixsite.com/startechcapital/guides) for the Table at the bottom is:

import wixWindow from ‘wix-window’;

export function table1_rowSelect(event, $w) {
//Add your code for this event here:

//$w("#VideoTutorialsDataset").onCurrentIndexChanged((event, $w) { 
	//let itemData = $w("#VideoTutorialsDataset").getCurrentItem(); 
//}); 
//let cellData = itemData["Link"]; 

wixWindow.openLightbox("Video Tutorial");

}

The lightbox (which is it’s own page) has no code, but is linked to the Video Tutorials Dataset which itself has the URLs (youtube links) for each video.

The GetContext( ) guides and instructions aren’t very clear (at least to a novice like me)

Thanks in advance,

Sachin

roi-bendet · February 25, 2018, 10:12am

Hi again,
On rowSelect function open the lightbox with props.
Like this:

wixWindow.openLightbox("Video Tutorial",event.rowIndex);

In the lightbox page you need to disconnect the video element from the dataset and add some code.
The code should look like this:

import wixWindow from 'wix-window';
$w.onReady(function () {
	const dataFromTableRow = wixWindow.lightbox.getContext(); // equals to the index number of the item in the dataset
	$w('#yourDataset').setCurrentItemIndex(dataFromTableRow)
		.then(() => {
			const currentItem = $w('#yourDataset').getCurrentItem();
			$w('#yourVideo').videoUrl = currentItem.link;
		});
});

Please update in your progress.
Good luck!
Roi

sachin-tandon · February 25, 2018, 10:54am

Hi i tried this

Tutorial Code:

$w.onReady(function () {
//TODO: write your page related code here…

});

import wixWindow from 'wix-window'; 

export function table1_rowSelect(event, $w) { 
wixWindow.openLightbox("Video Tutorial");

}

Lightbox Code:

import wixWindow from ‘wix-window’;

$w.onReady(function () {
const dataFromTableRow = wixWindow.lightbox.getContext(); // equals to the index number of the item in the dataset
$w(‘Video Tutorials’).setCurrentItemIndex(dataFromTableRow)
.then(() => {
const currentItem = $w(‘VideoTutorials’).getCurrentItem();
$w(‘Link’).videoUrl = currentItem.link;
});
});

The name of the lightbox is: ‘Video Tutorials’
The name of the dataset is: ‘VideoTutorials’
The name of the field in the dataset with the link is: ‘Link’

I now get an error in the Preview editor that says:

TypeError: $w(…).setCurrentItemIndex is not a function

And the lightbox just loads the default Wix Basketball Video, regardless of which row of the table you select?

Sachin

sachin-tandon · February 25, 2018, 11:58am

Any thoughts?

roi-bendet · February 25, 2018, 12:04pm

Hi again,
If this is your error :TypeError: $w(…).setCurrentItemIndex is not a function so you got the wrong name of the dataset element.
“Video Tutorials” is the name of the database collection and not the dataset element’s name.
Go to “view properties” on the menu’s element and you will see the id of the element.
Roi

sachin-tandon · February 25, 2018, 12:54pm

Hi,

I think I’m very very close, though didn’t quite get your description. I didn’t quite get what you meant by “view properties” on the menu’s element. What is the menu element?

Is the dataset the ID of the Table element, or ID of the LightBox?

I tried both this:

$w.onReady(function () {
const dataFromTableRow = wixWindow.lightbox.getContext(); // equals to the index number of the item in the dataset
$w(‘LightBoxVideo’).setCurrentItemIndex(dataFromTableRow)
.then(() => {
const currentItem = $w(‘LightBoxVideo’).getCurrentItem();
$w(‘Link’).videoUrl = currentItem.link;
});
});

and this:

$w.onReady(function () {
const dataFromTableRow = wixWindow.lightbox.getContext(); // equals to the index number of the item in the dataset
$w(‘VideoTutorials’).setCurrentItemIndex(dataFromTableRow)
.then(() => {
const currentItem = $w(‘VideoTutorials’).getCurrentItem();
$w(‘Link’).videoUrl = currentItem.link;
});
});

In summary:

The name of the lightbox is: ‘Video Tutorial’
The name of the datacollection is: ‘VideoTutorials’
The name of the field in the datacollection with the link is: ‘Link’
The ID of the Table is: ‘VideoTutorials’
The ID of the Lightbox is ‘LightBoxVideo’

The same error still appears in the developer:

TypeError: $w(…).setCurrentItemIndex is not a function

roi-bendet · February 25, 2018, 1:38pm

You need to set the correct name of the dataset.
Here is example:

The name of the database collection is Members but the name of the dataset is ‘dataset1’.
So, if I want to reach it in code I should write:

$w('#dataset1')

sachin-tandon · February 25, 2018, 2:17pm

Did as you said, but it Still doesn’t work:

Guide Page Code:
$w.onReady(function () {
//TODO: write your page related code here…

});

import wixWindow from 'wix-window'; 

export function table1_rowSelect(event, $w) { 
wixWindow.openLightbox("Video Tutorial");

}

Lightbox Code:

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

import wixWindow from ‘wix-window’;

$w.onReady(function () {
const dataFromTableRow = wixWindow.lightbox.getContext(); // equals to the index number of the item in the dataset
$w(‘VideoDataset’).setCurrentItemIndex(dataFromTableRow)
.then(() => {
const currentItem = $w(‘VideoDataset’).getCurrentItem();
$w(‘Link’).videoUrl = currentItem.link;
});
});

Name of Dataset

Name of Lightbox

Erro when I click on any row in the Table

Any ideas?

https://sachin1882.wixsite.com/startechcapital/guides

roi-bendet · February 25, 2018, 2:34pm

You missed # sign
$w(’ # VideoDataset’).setCurrentItemIndex(dataFromTableRow).
Roi

sachin-tandon · February 25, 2018, 2:59pm

Thanks.

But that doesn’t appear to be it:

Lightbox Code:

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

import wixWindow from ‘wix-window’;

$w.onReady(function () {
const dataFromTableRow = wixWindow.lightbox.getContext(); // equals to the index number of the item in the dataset
$w(‘#VideoDataset’).setCurrentItemIndex(dataFromTableRow)
.then(() => {
const currentItem = $w(‘#VideoDataset’).getCurrentItem();
$w(‘#Link’).videoUrl = currentItem.link;
});
});

Guides Page Code:

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady(function () {
//TODO: write your page related code here…

});

import wixWindow from 'wix-window'; 

export function table1_rowSelect(event, $w) { 
wixWindow.openLightbox("Video Tutorial");

}

Dataset Name

Error when I click on any row in the table:
Video pops up (the default WIX basketball one), and this shows in the developer console

I’m starting to think, this won’t actually work : (

roi-bendet · February 25, 2018, 3:10pm

Hi,
I checked your site.
You need to add props when you open the lightbox

wixWindow.openLightbox("Video Tutorial",event.rowIndex);

And you need to add dataset element to the lightbox
Roi

sachin-tandon · February 25, 2018, 3:28pm

Ok,

I think I’ve done the first bit:

I changed the Guides page code to:

$w.onReady(function () {
//TODO: write your page related code here…

});

import wixWindow from 'wix-window'; 

export function table1_rowSelect(event, $w) { 
wixWindow.openLightbox("Video Tutorial", **event.rowIndex** );

}

(I’ve included the event.rowIndex in the OpenLightBox function

What did you mean by this - “And you need to add dataset element to the lightbox”

I linked the VideoDataset to the Lightbox Again… but left Video URL connects to, to Not Connected (see below)

I’m also pretty sure the names of the dataset on the lightbox page are all correct

There is now no error, but it loads only the default WIX video, regardless of which row in the table I select

roi-bendet · February 25, 2018, 3:35pm

What is #Link element ?

sachin-tandon · February 25, 2018, 3:50pm

The name of the field in the dataset which has the video urls

Topic		Replies	Views
Links to images in a Gallery with Dataset Ask the community code , question	2	688	January 10, 2020
connect dataset field (containing html code) to dynamic html element Ask the community code , wix-blog , question	0	128	October 24, 2020
Lightboxes and Dynamic Page Data Ask the community wix-studio , general	3	102	May 2, 2023
Dynamic tables that link to external URL? Ask the community code , question	5	245	August 14, 2020
how to change embed video with different video links from dataset Ask the community code , question	4	216	July 24, 2023

Dynamic Lightboxes for Videos using a Dataset URL?

Related topics