Unable to Display a Database URL in a Lightbox

Ask the community
,
1

I have a database that includes an URL fields type where the URL points to an image at cloudinary.com. I have created a Repeater to display the items in this database but am trying to display the IMAGE in a lightbox along with additional info from the repeater as pulled from the database.

I am able to write all the elements into the lightbox EXCEPT the image! Here are the details:

WebPage: https://jds-cvoa.wixsite.com/cvoa/CVOA-PartsXREF

Note: there are only four records in the test database and for testing reasons I just added the same url to the database field: Image_URL
HERE IS THE PERTINENT CODE IN THE SENDING PAGE (
import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;
import wixLocation from ‘wix-location’;

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

export function Thumbnail_click(event, $w) {
//Add your code for this event here:
wixWindow.openLightbox(‘CV-PartXREF-PIC’, $w(‘#dynamicDataset’).getCurrentItem());
}

HERE IS THE CODE IN MY LIGHTBOX(CVOA-PartsXREF)

// 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(“========================REPEATERDATA=========================”)

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;
});

THE IMAGE DOES NOT APPEAR IN THE LIGHTBOX… Here is the Debug Log in Preview Mode:

738×243 10.1 KB

My Website is scheduled to go live in ONE WEEK. I desparately need to get this working!
Thanks
JD

2

Hey,

You’re going to kick yourself.

It’s not this:
$w(“#CVPartImg”). link = repimg;
It’s this:
$w(“#CVPartImg”). src = repimg;

The .link property is a link where to go when the image is clicked.

Eazy peazy.

Yisrael

3

Thank You Yisrael! Yep, that fixed it. You know, the example code I was using was in an old post and they had it written as:
$w(" #CVPartImg "). src = item.image_url
and the system kept giving me an error so I setup the intermediate variable to hold the repeater items…

Now that that is fixed. How do I deal with the fact that the Comments field is a database RichText Field… you see all the
tags where they should be line feeds.

Thanks Again!
JD

4

I now have the Rich Text working somewhat correctly…i.e… I no longer see the html tags, but the font is really tiny and gray in color. I see that if I open databases and look at the field, double click the value then I can view the HTML… it shows times roman… even if I change it to Arial and increase size it does not seem to work. Also, I will have 1500 items in this database and I do not want to have to manually change this?

5

Has anyone looked into this? I logged regular support ticket and they could not answer and sent me back to Forum. This is so frustrating. Anything out of the ordinary and its like “pulling teeth” to get a solution!!!

6

In order for us to successfully review this matter further, and properly assist you, please send us a video of the issue using screencast.

Simply recreate the issue while recording the steps. Add the screencast.com URL to your response.

7

Thank You Yisrael, I will try and do that later today. However, I have a real show-stopper for going live issue on a Gallery. I would much prefer you help me with that right now. See post:

Thanks
JD