Problems wih lightbox connection

Ask the community
,
1

Hi,

We are creating a website using a page using a repeater with filters, every time that the user select the filter, have a result. After this functionality works, we add a lightbox, the idea is clicking an image of the repeater after the filter 1st image (cf. 1º image) , it will open a lightbox, that we created with a predefined format with all text links with our database. But we have a problem that we cannot solve concerning the lightbox connected to each company … We would like the elements (connected to the database) to have the same format as on the 2nd image (cf. 2º image), but all the texts are distorted or do not appear (see 3nd image). T he error is the loss of the format and connection like this image.

We were trying with code in HTML for the format, but we change one side and the other not. In the begging the color was black in all text and now is white in all text.
Our asking for help to solve this issue about maintaining the format of templates every time that I click the images in the repeater, I attach the code of lightbox and main page.

Thanks for your help!

916×434 112 KB

720×405 126 KB

1920×1080 238 KB

//Code lightbox

import { lightbox } from 'wix-window';
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';

$w.onReady(() => {
 let theItem = lightbox.getContext();  //this is the item you took from page
 let postID = theItem.title; // this is the field key for the item ID in the database collection

 $w("#dataset1").setFilter(wixData.filter()
   .eq("title", postID)  //we are now filtering to display only the item that matches this ID
  )
  .then(() => {
   console.log("Dataset is now filtered");
  })
  .catch((err) => {
   console.log(err);
  });

});


// Code of main page
import wixWindow from 'wix-window';

$w.onReady(() => {

 $w("#dataset1").onReady(() => {

  $w("#repeater1").onItemReady(($item, itemData, index) => {
   $item('#image2').onClick(() => {
 let item = $item('#dataset1').getCurrentItem();
    wixWindow.openLightbox('Produto', item)
   });
  });

 });

});
2

What are you actually trying to do here? Are you just trying to open the repeater container in a lightbox to show more info about that one company?

Then you can just do this below and change thelightbox name and the lightbox elements and field keys to match your own site.

Page Code

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {    
$w("#repeater1").onItemReady(($item, itemData, index) => {
$item('#image1').onClick(() => {
let item = $item('#dataset1').getCurrentItem();
wixWindow.openLightbox('Lightbox', item)
});
});
});

Lightbox Code

import {lightbox} from 'wix-window';

$w.onReady( () => {
let item = lightbox.getContext();
// For a text box use this... //
$w("#text6").text = item.title;
// For a user input use this... //
$w("#input1").value = item.title; 
});

However you would be better placed to not just doing a onClick event for just the image item, you are best to do an onClick event for the whole repeated container for that company.

That way the user just has to click anywhere in the repeated container to open the lightbox and not just on the image in the repeated container.

It would be very similar to above, just changing it slightly in the page code.
Page Code

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {    
$w("#repeater1").onItemReady( ($w, itemData, index) => {
$w("#container1").onClick((event) => {
wixWindow.openLightbox('Lightbox', $w('#dataset1').getCurrentItem());
});
});
});

Lightbox Code

import {lightbox} from 'wix-window';

$w.onReady( () => {
let item = lightbox.getContext();
// For a text box use this... //
$w("#text6").text = item.title;
// For a user input use this... //
$w("#input1").value = item.title; 
});
3

As for the text in the lightbox itself, do you mean that you want the text in the lightbox sample here.

To be the same as in the preview and live site as shown here.

If yes, then check how you are adding your text to this text box.

If it is coming from a dataset field with the type as Rich Text, then you need to be formatting the text style etc in the dataset field itself.

Then just connect the text box to the dataset field, do not alter anything in the Wix Editor settings for the text box design as this will override any of the rich text settings that you made in the dataset field.

If you have simply used a text field in your dataset, then you need to be setting the text box in the Wix Editor to how you want the text to be shown on your live site.

Simply add some text to the text box and format it as you want it to appear and then when you preview the site or view it live, the used text here will be overwritten with the text from your dataset field.

4

thanks!!! is working now only is not working the color of the right because the database not allow to assign color to the text. I trying to know what could happend because color of text in the light box is white in left and black in right but is still having the issue