RESOLVED- Adding a URL to a Lightbox on a dynamic page

Ask the community
,
1

I want to link text to a URL for a lightbox, so that the lightbox pops up when the text is clicked. This seems like it should be simple! I followed these instructions, and it still isn’t working for me. I am linking to text in a dataset that flows into a dynamic page. The text will not link to anything, and even when I try to put in the lightbox URL directly it gives me a 404 not found error page.

My code is in the screenshot below. The line 'import wixLocation from ‘wix-location’; isn’t visible because it’s further up the code, but its in there.


The lightbox is called ‘7100 Help Screen.’ So the lightbox URL should be: https://www.teratec.us/FiberOpticTestEquipment/FTE-7100-MICROTDR/?name=7100_Help_Screen

But alas! It does not work. Any suggestions?
Many thanks.

2

Hi there! Lightboxes do not have their own URL, so you can’t link a text to them this way. You can find more information about it here: https://support.wix.com/en/article/about-lightboxes

Here is, however, how you can add a link to a lightbox within your site: https://support.wix.com/en/article/linking-to-a-lightbox

3

@anhelinak The code’s express purpose is to provide that missing functionality and it definitely does work.

@Sara
That’s not what the lightbox URL should be. A query string should be appended to the end of the page name/path. You include an extra slash which changes the meaning. It’s the page that isn’t found, not the lightbox.

So the URL should probably be this. Though there’s still no lightbox for some other reason. Show the name of the lightbox and the rest of your code.
https://www.teratec.us/FiberOpticTestEquipment/FTE-7100-MICROTDR?name=7100_Help_Screen

You can see that it does work:
https://sbrreach.wixsite.com/corvid/mat/test?name=7100_Help_Screen

4

I’m a bit confused by why you’ve copied this code example if you only want to open the lightbox on a button click. You’d be better off declaring a click handler on the button and calling only wixWindow.openLightbox(). Or is it because you want the URL to change so people can copy and paste /share it?

5

@Lee, thank you for looking into this with me. Here is some more information:

The text I want to link to the lightbox pop-up is in this page here: https://www.teratec.us/FiberOpticTestEquipment/FTE-7100-MICROTDR . You can see the last bullet says ‘View the detailed Help Screen.’ It currently does not link to anything. This is a dynamic page, and all of the text is contained in a dataset. The bulleted text is in rich text format and should be linkable within the dataset cell.

The lightbox is called ‘7100 Help Screen.’ Here is a screenshot.

1107×650 36.5 KB

As you requested, here is all the code on this dynamic page. The only relevant code for the lightbox is at the very bottom.

import {local} from 'wix-storage';
import wixLocation from 'wix-location';
export function DescriptionTab_click(event)
{$w('#slideshow1').changeSlide(0);
$w('#DescriptionTab').hide();
$w('#OrderingInfoTab').show();
$w('#SpecsTab').show();
$w('#VidTab').show();
}
export function OrderingInfoTab_click(event)
{$w('#slideshow1').changeSlide(1)
$w('#DescriptionTab').show();
$w('#OrderingInfoTab').hide();
$w('#SpecsTab').show();
$w('#VidTab').show();
}
export function SpecsTab_click(event)
{$w('#slideshow1').changeSlide(2)
$w('#DescriptionTab').show();
$w('#OrderingInfoTab').show();
$w('#SpecsTab').hide();
$w('#VidTab').show();
}
export function videoimg_click(event)
{$w('#slideshow1').changeSlide(3)
$w('#DescriptionTab').show();
$w('#OrderingInfoTab').show();
$w('#SpecsTab').show();
$w('#VidTab').hide();
}
export function VidTab_click(event)
{$w('#slideshow1').changeSlide(3)
$w('#DescriptionTab').show();
$w('#OrderingInfoTab').show();
$w('#SpecsTab').show();
$w('#VidTab').hide();
}
$w.onReady(doOnReady);
function doOnReady()
{
assignDynamicLinks()
}
function assignDynamicLinks()
{
if(local.getItem('dynamicPageURLs1') && local.getItem('numberOfItems1'))
{
const debug = true
const dynamicPageURLs = local.getItem('dynamicPageURLs1').split(',');
const numberOfItems = parseInt(local.getItem('numberOfItems1'), 10)
const currentPage = '/' + wixLocation.prefix + '/' + wixLocation.path.join('/');
const currentPageIndex = dynamicPageURLs.indexOf(currentPage);
if(debug)
{
console.log("Number of items: " + numberOfItems);
var i;
for(i = 0; i < numberOfItems; i++)
{
console.log("Item " + String(i) + " = " + dynamicPageURLs[i])
}
}
//Set previous button link
if(currentPageIndex > 0)
{
$w("#imagePrevious").link = dynamicPageURLs[currentPageIndex-1];
}
else
{
$w("#imagePrevious").link = dynamicPageURLs[numberOfItems-1]
}
//Set next button link
if(currentPageIndex < dynamicPageURLs.length - 1)
{
$w("#imageNext").link = dynamicPageURLs[currentPageIndex + 1];
}
else
{
$w("#imageNext").link = dynamicPageURLs[0];
}
if(debug)
{
console.log("Previous link: " + $w("#imagePrevious").link)
console.log("Next link: " + $w("#imageNext").link)
}
}
}
$w.onReady( function() {
$w("#FiberOpticDataset").onReady( () => {
$w("#RelatedImg1").tooltip = "";
$w("#RelatedImg2").tooltip = "";
$w("#RelatedImg3").tooltip = "";
$w("#RelatedImg4").tooltip = "";
})
})
import wixWindow from 'wix-window';
function open_Lightbox(){
let query = wixLocation.query;
var goto = query.name;
wixWindow.openLightbox(goto);
}
$w.onReady(function () {
open_Lightbox();
});

As you can see, I’m not using a button to open this lightbox- only dynamic text. I don’t really need the URL to be shareable, I’m only concerned that the selected text opens this lightbox.

Thank you for your input! I look forward to your feedback.

6

@Lee, I just ran the code and noticed this error. Not sure how to fix it, but maybe this is the issue?

1913×106 7.23 KB

It says “Wix code SDK error: The name parameter that is passed to the openLightbox method cannot be set to the value . It must be of type string.
FiberOpticTestEquipment (Title)
Line 112”

7

@saratisch2
So the link you gave above had underscores between the words, but the name of the lightbox has spaces.

This works:
https://www.teratec.us/FiberOpticTestEquipment/FTE-7100-MICROTDR?name=7100%20Help%20Screen

The error you’ve screenshotted is because the code always passes the query string (even if there isn’t one) to wixWindow.openLightbox(). You’d ordinarily want to check if it was empty first.

From my limited testing it looks like if you try to navigate to the same page but with an added query string the navigation isn’t detected / no lightbox is shown. So I’d go with my initial recommendation and use a click handler.

$w.onReady(() => {
$w(‘#textOrButton’).onClick(() => wixWindow.openLightbox(‘7100 Help Screen’));
});

To make this dynamic you can parse out the model number from the path or since you’ll be naming all the lightboxes manually anyway just give them the same name.

$w(‘#textOrButton’).onClick(() => wixWindow.openLightbox(wixLocation.path[1] + ’ Help Screen’));

Here you’d name the lightbox “FTE-7100-MICROTDR Help Screen”.

8

@lee1 Thank you so much for your help!