Grey box when using image src in slide

Ask the community
,
1

How can I avoid the grey box if only 4 out of 5 pictures are loaded into my DB?

844×481 377 KB

I am using the following code as all images are in the same collection item:

$w('#dynamicDataset').onReady(() => { 
let item = $w('#dynamicDataset').getCurrentItem(); 
$w('#gallery1').items = [ 
  {src: item.image1}, 
  {src: item.image2}, 
  {src: item.image3}, 
  {src: item.image4}, 
  {src: item.image5}];

Is it possible to look in the DB how many pictures are loaded and then edit the array using programming?

2

yes, there is. You would simply check per image if(image). If this returns true you build a new array with .push (see W3schools for arrays and Push) and when you cycled tru all of them, you hand the new array to the slides.

3

That’s right,
This will be useful:

Feel free to paste here your code if you can’t get it working.
Good luck
Roi

4

I am new to JS and I have tried the following, but it is not working:

let item = $w(‘#dynamicDataset’).getCurrentItem();

 if(item.image1 == true){ 
	$w("#gallery1").items.push({src: item.image1}); 
} 
if(item.image2 == true){ 
	$w("#gallery1").items.push({src: item.image2}); 
}
5

Hi,
I would do it like this:

let item = $w('#dynamicDataset').getCurrentItem();
let itemsForGallery = [];
for (let i = 1; i < 6; i++) {
    if (item[`image${i}`] !== '') {
        itemsForGallery.push({src: item[`image${i}`] })
    }
}

$w("#gallery1").items = itemsForGallery;

Let us know how it goes.
Roi

6

I have written the following code the pictures are still “pushed” even if the field is empty, something with the if condition? I have tried !== null and !== 0 both not working

$w.onReady(function () {

$w('#dynamicDataset').onReady(() => { 
	
	let item = $w('#dynamicDataset').getCurrentItem(); 
	let itemsForGallery = []; 
		for (let i = 1; i < 6; i++) { 
		    if (item[`image${i}`] !== '') { 
		        itemsForGallery.push({src: item[`image${i}`] }); 
		    } 
		} 

	$w("#gallery1").items = itemsForGallery; 
    });

});//end

7

Could you try instead of :

if (item[image${i}] !== ‘’) {

this

if (item[image${i}] ) {

And are you sure the field name (not the label) of your images are really called image1, image2, etc

8

Thank you very much

if (item['image${I}])

is working

9

Thanks for sharing guys! I’ve been trying to figure this one out for a while now