Hi. I have connected images to a gallery on a dynamic page. So far so good. However, each item in my database doesn't have the same number of images- sometimes there are 5, sometimes less. For the times when there is no image, it shows up black in the previewed gallery. I read in the forum that you can add push to solve this. But I can't get it to work. Could you look at my code below and let me know what I have done wrong please? Thanks for any help.
export function uniProperty_ready() {
$w.onReady(() => {
$w('#uniProperty').onReady(() => {
let item = $w('#uniProperty').getCurrentItem();
$w('#gallery1').items = [
{src: item.plan},
{src: item.kitchenimage},
{src: item.bed1Image},
{src: item.bathroom},
{src: item.buildingimage}
];
var items = ["#gallery1"];
items.push("plan","kitchenimage","bed1image","bathroom", "buildingimage",);
});
});
}
Yes I don't want them to show id there is no image in the database- we are still acquiring images for each property
if (item.plan.length>0) {items.push({src: item.plan});}
If you do this for all the images then items should only contain the images whose length is greater than zero.
So you want to hide images if item.bed1Image is null you mean?
Hi Andreas,
Sorry if I'm not getting this, but if the "image array" is defined as the items in the #gallery1, do I have to list the src.'s individually again or it picks them up from the code above it? I am trying to muddle my way through this and have added this under the original code but it's still not hiding the blank images
export function uniProperty_ready() {
$w.onReady(() => {
$w('#uniProperty').onReady(() => {
let item = $w('#uniProperty').getCurrentItem();
$w('#gallery1').items = [
{src: item.plan},
{src: item.kitchenimage},
{src: item.bed1Image},
{src: item.bathroom},
{src: item.buildingimage}
];
let imageArray = [$w('#gallery1').items];
imageArray = { };
var items = [$w('#gallery1').items];
items.push(imageArray);
});
});
}
What am I missing or what should the code look like?
Hey
First of all the $w.onReady(() should not be inside of a function, this is the onReady object for the page itself and has to be top placed and not inside anything else.
Then the function is uniProperty_ready and inside that you have $w('#uniProperty').onReady(() which all seem like double to me.
Then this code sets the gallery items
$w('#gallery1').items = [ {src: item.plan}, {src: item.kitchenimage}, {src: item.bed1Image}, {src: item.bathroom}, {src: item.buildingimage} ];
And this line var items = ["#gallery1"]; can't work right? You are trying to push items into an array but the array is defined somewhat strange.
let imageArray = [];
imageArray = {
src: urlOfImage,
src: urlOfImage2
}
var items = [];
items.push(imageArray);
That would push the contents of your imageArray into the items array and then you can set the gallery to use those items by using $w('#gallery1').items = items;
Does that help in any way?