Hi all, I hope someone can help me.
I have a table of image titles linked to a dataset. I have set this so that when the image title is clicked it links to the image url (which is in the media upload area).
This then opens the image in a new window and displays no problem.
What I really want is for the image to NOT open in a new window but in a popup view that can then be closed easily (typically with a cross in the top right). I think this is like the normal pop up view.
My question is can this function be embedded somehow into the url i have in the dataset? or is there another way?
The reason for this being in a dataset rather than a gallery is that a photography judge will be submitting their feedback into another writeable dataset.
a couple of screenshots attached.
Your help on this would be really appreciated.
thank you so much for your reply - i will certainly investigate this as it sounds like what i need.
Please don’t think i haven’t been searching and have just come one to have someone tell me the answer - the previous 4hours were spent trying to find the answer to this. It helps though to have the right search terms as everywhere else in the wix builder they refer to it as pop up or expand…not lightbox.
Hi,
I use Wix Pro Gallery to solve that issue.
You can bind the Image source to your collection field Image
Attention to use Links. There is a strange bug with this thing. If you connect this field, the onClick event will go to the URL instead of Open in extend view. I did fix this by iterating with a ForEach on the gallery.items and give the .link attribute the URL . It then opens the image in Expand mode, and it shows the link nice on the side.
thank you for this. I had thought about using a gallery but as i am setting it up as a competition, i am trying to minimise how much the judge sees before seeing the image fullscreen. Hence why i wanted it to be a click on title job rather than click on image.
Hi GOS,
I have been looking at the articles you posted and also one that was active a couple of yrs ago that was essentially the same thing but with video ( https://www.wix.com/corvid/forum/community-discussion/dynamic-lightboxes-for-videos-using-a-dataset-url )
I feel i am REALLY close with this now but am struggling with the lightbox display.
To recap of my progress:
The interesting part is that when i connect the placeholder image to the dataset, i can connect 2 things. Image is connected to Image. Link is also connected to image (i have tried both pure image and url)
So…
the light box opens
That last bit to me proves the image is definitely there…just not displaying properly?
Any ideas?..so close yet so far.
that said i seem to have just broken the bit where i could get the image to load in a new window 
Page code:
export function Lresultstable_rowSelect(event, $w) {
wixWindow.openLightbox(“LandscapeLB”,event.rowIndex);
}
Lightbox code:
import wixWindow from ‘wix-window’;
$w.onReady( function () {
const dataFromTableRow = wixWindow.lightbox.getContext(); // equals to the index number of the item in the dataset
$w(‘#dataset1’).setCurrentItemIndex(dataFromTableRow)
.then(() => {
const currentItem = $w(‘#dataset1’).getCurrentItem();
$w(‘#LBimage’).src = currentItem.link;
});
});
@techofficer
Okay, so if you want to use that previous forum post then it would work like this.
https://givemeawhisky.wixsite.com/imageexpand
Have a read of Image if you are not sure of what src, tooltip and alt are used for.
https://www.wix.com/corvid/reference/$w.Image.html
Page Code
import wixWindow from 'wix-window';
$w.onReady(function () {
});
export function table1_rowSelect(event) {
wixWindow.openLightbox("ImagePhoto",event.rowIndex);
}
Lightbox Code
import wixWindow from 'wix-window';
$w.onReady(function () {
const dataFromTableRow = wixWindow.lightbox.getContext();
$w('#dataset1').setCurrentItemIndex(dataFromTableRow)
.then(() => {
const currentItem = $w('#dataset1').getCurrentItem();
$w('#image1').src = currentItem.imagePic;
$w("#image1").tooltip = currentItem.title;
$w("#image1").alt = currentItem.title;
});
});
If you just had the image on the page then you don’t need to use a lightbox or gallery, as you could just use the click action settings in Wix Editor or through code as well - although this doesn’t work with your table!
https://www.wix.com/corvid/reference/$w.Image.html#clickAction
clickAction
Sets or gets the action that occurs when an image is clicked.
Description
Setting the clickAction property sets what happens when an image is clicked.
The value can be set to:
-
“none”: Nothing happens.
-
“expand”: The image opens in a popup window
-
“link”: The image’s link opens.
-
“magnified”: The cursor becomes a magnifying glass when a visitor hovers over the image.
Getting the clickAction property returns what happens when an image is clicked.
Examples
Get the action that occurs when an image is clicked
let action = $w("#myImage").clickAction; // "magnified"
Set the action that occurs when an image is clicked
$w("#myImage").clickAction = "magnified";
Hi @Tom
I’m trying to achieve the same thing with a Pro Gallery attached to a Dataset. It seems like the bug is still present.
Can you share your work-around (ForEach) code?
I am a coder, but very new to Wix.
Many thanks,
George
What I meant was that if you use Links and direct it to a field from an URL, it doesn’t work, you have to build up the Gallery your own. I’ll share the code hee under.
BUT , I must say that since a few days (probably weeks), the onItemClick event doesn’t fire, not even for me. SO we have to wait until they fix it. I will log a ticket for that…
So, I’m fetching my data through a router and redirects to a generic gallery page to display any gallery item that I have in my database using the same page.
This is part of my backend function called from within the router.js
export async function buildGalleryItems()
{
//... some code
let itemList = [];
//... some code
photoResults.forEach((photo) => {
//galleryitem attributes are the same as for the Photo gallery but we build it in the backend
let galleryItem = new GalleryItem();
galleryItem.slug = photo._id;
galleryItem.title = photo.phototitle;
galleryItem.description = translateExpression(lang, photo.photodescription);
galleryItem.src = photo.photo; //image from database
galleryItem.link = photo.photographerUrl; //url;
itemList.push(galleryItem);
return {"title": galleryTitle, "items": itemList };
}
Eventually the return is sent to the router and the router sends it to the page
let gallery = await buildGalleryItems();
return ok("gallery", gallery , photoData.gallery);
This is part of the router page where the gallery component is on
function waitForLoading() {
setTimeout(() => {
$w('#preloader').collapse();
$w("#gallery1").expand();
}, 1000);
}
$w.onReady(async function () {
$w("#gallery1").collapse();
let routerData = wixWindow.getRouterData();
$w("#txtTitle").text = routerData.title;// + ">>>" + JSON.stringify(routerData);
$w("#gallery1").items = routerData.items;
}
waitForLoading();
})
Thanks Tom, much appreciated.
If it’s still limited by another bug (no onItemClick event), I’ll wait and try following up with Wix, and see if they will address the primary issue. I raised it with them 4 days ago, but haven’t had a response yet.
