Is it's possible to customize the expanded mode on the Pro Gallery with Velo?

Ask the community
,
1

For example… Is it possible to rearrange the dimensions of the description field? Or add a gallery in the image field instead of showing the same imagem that I used to open the expanded mode…

2

There is no possibility of your problem. But there is a workaround using lightbox.
disable expended mode on image.
add onClick event on Image.
open a lightbox on onClick event with passing Id of that row where gallery saved in database.
Add gallery on the lightbox with dataset.
Filter the dataset with that passed ID.

Gallery will be displayed on lightbox.

3

Rashid, thank you very much for the answer. I’m a beginner, so although I understood the logics, I am having a hard time to connect the lightbox to the proGallery and to connect the dataset to the lightbox. I feel I’m almost there, but it doesn’t work. Would you describe those steps with more details? I am not a programmer but I do understand the logics, I just don’t have to vocabulary or the knowledge to program those steps! I will detail the steps I’ve been able to do:

  1. I disabled the expanded mode of the ProGallery. (option "nothing happens)

  2. I added a lighbox into the page.

  3. I wrote the following code to the page:

export function gallery1_itemClicked ( event ) {
$w ( “#lightbox1” ). show ();
}
4 . It keeps saying that there is no lightbox1 connected to the page… I don’t understand why.

Also, I tried to connect the lightbox to the dataset that I created using Dynamic Pages and it kinda connected… But it doesn’t work properly…

Could you help me?

4

See this code to know how to open lightbox with passing filter ID.

// page code from where you want to open a lightbox

import wixWindow from'wix-window';

wixWindow.openLightbox("LightBoxName", {
    "filterId": "The id of the row of the gallery in the dataset"
  })

//Lightbox page code

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

$w.onReady(async function () {
  let filterId = wixWindow.lightbox.getContext().filterId;
  await $w("datasetId").filter(wixData.filter.eq("_id",filterId))
} );