Display image from Repeater to Lightbox

[leana-lahom-cristoba]

I wish to display an image on a lightbox for larger view when clicked from a Repeater on Dynamic Category Page . The lightbox is trigged when the image is clicked but the image is not displayed. Kind help please with the codes. This is my dynamic category page code and screen:

import wixWindow from ‘wix-window’;

export function image4_click(event, $w) {
wixWindow.openLightbox(‘SpecimenPhoto’, $w(‘#dynamicDataset’).getCurrentItem());
}

Lightbox code and screen:

import {lightbox} from ‘wix-window’;

$w.onReady( () => {
let item = lightbox.getContext();
$w(“#Dorsal”).src = item.Dorsal;
});

• Dorsal in item.Dorsal is the database field name

A newbie here Thanks in advance!
Leana

[tomer-wix]

Hi Leana,
This is a great idea!
I tried your code, and it worked for me. Do you get any errors in the developer console?
Also, note that you need to use the field key in the code, it is not necessarily the same as the field display name. For example, notice how the field name is " D orsal" whereas the field key (which we need to use in the code) is " d orsal":

[leana-lahom-cristoba]

Hi Tomer!
I got it and it’s working fine. Thank you very much for your help, I can sleep soundly now

Papilionidae

Best,
Leana

[cwvega76]

No errors on Sending Page, but on Lightbox code:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import {lightbox} from ‘wix-window’;

$w.onReady( () => {
let item = lightbox.getContext();
$w(“#LBoepartno”).src = item.oe_part_no;
$w(“#LBcomments”).src = item.comments;
});

I am trying to implement this and am getting error:

‘src’ does not exist on '#LBoepartno;
‘src’ does not exist on '#LBcomments;

WHAT IS WRONG HERE???
Thanks

JD

[_tal]

Are the ’ #LBcomments ’ and ’ #LBoepartno ’ IDs of image elements? Have you tried console log the “item” variable to make sure that you get the object when using " lightbox.getContext(); " ?

[cwvega76]

Yes, I logged item on both sending page and the lightbox. I see all the elements of the database.

the assignment of the item elements to the #placehoders gives that error… Also notice that it cant read the photoURL which is the MAIN thing I want ot show on this lightbox.

DEBUG LOG
Loading the code for the site. To debug this code, open masterPage.js in Developer Tools.
Loading the code for the CV-PartXREF-PIC popup. To debug this code, open va6l4.js in Developer Tools.
Loading the code for the CVOA-PartsXREF (All) page. To debug this code, open lcqdw.js in Developer Tools.
undefined
undefined
TypeError: Cannot read property ‘photo_image_url’ of undefined
Loading the code for the CV-PartXREF-PIC popup. To debug this code, open va6l4.js in Developer Tools.
undefined
{“_id”:“2”,“gm_group”:“0.01”,“description”:“GASKET SET - engine (lower end)”,“oe_part_no”:“N.S.”,“qty_per_car”:1,“model_usage”:“71-77 Vega (122 140)
75-77 Astre (140)
75-77 Monza (140)
76-77 Sunbird Starfire (140)”,“part_no_history”:“N/A”,“aftermkt_vendor_part_no”:“[a] CVOA-PT-03”,“comments”:“CVOA set includes:
- oil pan set
- oil pump set
- rear main seal set
- water pump gasket

see also Gasket Set (lower end - aftermarket) / Gr. 0.289 - for complete overhaul

does this include the seal for crankcase vent pipe (Gr. 1.745)?”,“aftermkt_interchange”:“[a] CVOA Parts Project”,“newField3”:null,“image_url”:null,“_updatedDate”:“2018-06-11T22:05:47.250Z”,“_createdDate”:“2018-06-11T22:02:14.061Z”,“link-CVOA-PartsXREF-all”:“/CVOA-PartsXREF/”}

[cwvega76]

I got rid of the error by changing and eliminating the # in front of the placeholder text property name.
$w(" #LBoepartno “).src = item.oe_part_no;
$w(” #LBcomments ").src = item.comments;
so NO longer have any errors on page
Here is current Lightbox code to display all item in the lighbox:

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import {lightbox} from ‘wix-window’;

$w.onReady( () => {
let item = lightbox.getContext();
console.log(item)
$w(“CVPartImg”).src = item.photo_image_url;
$w(“LBdescription”).src = item.description;
$w(“LBoepartno”).src = item.oe_part_no;
$w(“LBcomments”).src = item.comments;
});

HOWEVER. NO items show up on lightbox. Does the lightbox have to have the dynamic database attached?

[cwvega76]

I also console.logged each of the item. and they showed in the log. It appears that the assignment of the values is not working?

[cwvega76]

OK. Progress is finally being made: I modified the code as follows and now all repeater elements are displayed in the Lightbox with the exception of the IMAGE, which is an IMG_URL?

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import {lightbox} from ‘wix-window’;
$w.onReady( () => {
let item = lightbox.getContext();
let repimg = item.image_url;
let repdesc = item.description;
let reppart = item.oe_part_no;
let repcomments = item.comments;

$w("#CVPartImg").url = repimg;  <---ERROR :  'url' does not exist on #CVPartImg 
$w("#LBdescription").text  = repdesc; 
$w("#LBoepartno").text = reppart; 
$w("#LBcomments").text = repcomments; 

});

[cwvega76]

REAL CLOSE… PLEASE, SOMEBODY HELP ME!!!

Current Lightbox Code:

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import {lightbox} from ‘wix-window’;
$w.onReady( () => {
let item = lightbox.getContext();
// console.log(item)
// console.log(“===========================================================REPEATER DATA===================================”)
let repimg = item.image_url;
console.log(“from Repater”,item.image_url)
console.log(“derived for LB”, repimg)
let repdesc = item.description;
let reppart = item.oe_part_no;
let repapart = item.aftermkt_vendor_part_no;
let repcomments = item.comments;
$w(“#CVPartImg”).link = repimg;
$w(“#LBdescription”).text = repdesc;
$w(“#LBoepartno”).text = reppart;
$w(“#LBaftermkt”).text = repapart;
$w(“#LBcomments”).text = repcomments;
console.log(repimg)
console.log(‘#CVPartImg’).link;
});

See Uploaded Error Log from Preview Mode:

[_emg]

Following! Same Errors!
Hi Leana, can you please show us the code that you’re using? I was trying your code but I’m stock. I hope you can help us.
Thanks!

[cwvega76]

Problem Solved… changed:
$w(" #CVPartImg “).link = repimg;
TO
$w(” #CVPartImg ").lsrc = repimg;

[leana-lahom-cristoba]

Hi eMG! Here is my simple code. I made a simpler lightbox that shows only one image and text to demonstrate.

(1) On the Dynamic category page: Code and screen shot (modified to show links):

import wixWindow from ‘wix-window’;
import wixData from ‘wix-data’;

export function image4_click(event, $w) {
wixWindow.openLightbox(‘Dorsal_Photo’, $w(‘#dynamicDataset’).getCurrentItem());
}

(2) Lightbox code and screen shot modified to show links to lightbox and database:

import {lightbox} from ‘wix-window’;

$w.onReady( () => {
let item = lightbox.getContext();
$w(“#Dorsal”).src = item.dorsal;
$w(“#Sciname”).text = item.sciname;

});

Hope this helps. Good luck!

Leana

[michalyy56117]

thank you for that!! it worked perfect for me.
thank you for being so precise- it was a great treat for a challenged begginner as i am.

[vineee1985]

Hi, I have the same the issue and I cannot follow through the thread. Little amateur in coding.

Issue
I am creating a restaurant menu with repeater with dataset named ‘MenuStarter’.
Hi, I have the same issue and I cannot follow through the thread. Little amateur in the coding light box should open with a particular image.

Data Set Name. - MenuStarter
Image field key is - ImageStarter
Lightbox Name is - Starters
ImageClick19 is the event key

will be having different data sets for each section in the menu but that I can manage if get the first one sorted.

Any help would be much appreciated!