Gallery only hides after page refresh

Quick question - I know nothing about coding - I am learning along the way - so I have a member director page with a content manager and some members have pictures for their galleries and some do not. I got the gallery up and it does collapse on those pages without pictures but the problem is that it shows up when the page first loads as a black box…and only goes away after you hit the refresh.


As I mentioned I don’t know code so I have watched about a million tutorials but nothing addresses this… The code is below - any help would be greatly, and I mean GREATLY appreciated. Thank you in advance!

$w ( “#dynamicDataset” ). onReady ( () => {

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

   if  ( item . mediagallery ) { 

      $w ( "#gallery1" ). show (); 

   }  **else**  { 

$w ( “#gallery1” ). collapse ();

   } 

} );

Run that code and inspect the OUTPUT-RESULT.

$w.onReady(()=>{}
	$w("#dynamicDataset").onReady(()=>{
		let curItem=$w("#dynamicDataset").getCurrentItem();
		console.log("Current-Item: ", curItem);
		if(curItem.mediagallery) {$w("#gallery1").show();}
		else {$w("#gallery1").collapse();}
	});
);

What do you get as RESULT?
For sure you will get an ARRAY/OBJECT.

If ARRAY → [x, y, z]

get x = ARRAY[0]
get y = ARRAY[1]
get z = ARRAY[2]

If OBJECT → {x:“xxx”, y: “yyy”, z:“zzz”}

get x = OBJECT.x
get y = OBJECT.y
get z = OBJECT.z

Velo-Ninja,

This is what I get when I run it in developer mode…and as I mentioned I am really trying to learn but I am not even sure where the file is that they are referring too

And thank you in advance for any help you can lend…It is GREATLY appreciated!

Hello there,

First, the gallery should have the " collapsed " property " Checked " on the gallery’s properties panel.

Then, you must use your dynamic dataset’s onReady() event handler to check if there are any pictures being held in the database for that particular item, and expand() the gallery if and only if images were found.

$w.onReady(() => {
    const dataset = $w('#dynamicDataset');
    dataset.onReady(() => {
        const item = dataset.getCurrentItem();
        
        // Check the if there are any items
        if (Array.isArray(item?.mediagallery) && item.mediagallery.length > 0) {
            // Expand the gallery
            $w('#gallery1').expand();
        }
    })
})

Hope this helps~!
Ahmad

Ahmad,
Thank you for the help - I pasted that in and I am getting the same code I posted below so I am wondering if there is something wrong with my content manager or code…
And again thank you in advance for your help!
michele

Please provide a link to the page, and a screenshot on the databse (content manager) showing the field ID of the gallery.

Also, did you set the gallery to be collapsed on load from its properties panel?

Ok, as i can see you already got another answer from Ahmad, which seems to be the solution for your issue.

if(Array.isArray(item?.mediagallery)&& item.mediagallery.length >0){// Expand the gallery$w('#gallery1').expand();}

Checking the resulting ARRAY if it is an ARRAY and also checking if the ARRAY-length is bigger then 0. If so EXPAND.

I would even add this…to make sure that it is collapsed if it’s not an ARRAY or if the ARRAY is empty.

else{$w("#gallery1").collapse();}

However, i wanted to lead you step by step through your issue.
As you can see you got your CONSOLE-LOG-RESULT…

But you did not open the resulting ARRAY → yes you got an ARRAY as result -->[…] <— here inside this ARRAY you will have all the results.
Click onto the ARRAY…to get results viewed on screen…


After you have clicked on it, the ARRAY will be opened and will show you all the data whats inside.

Thank you!! It WORKS!! here is a link to one of the member pages that does not have the gallery - www. banwpa. com /member-directory/fixed—hhs

And one who does have a gallery www. banwpa. com/member-directory/shenley-schenk-interior-design—kitchen-%26-bath

I had to put a space in the web address because my membership wouldn’t allow me to link it??

THANK YOU FOR YOUR HELP!

And since you are so knowledgeable about all of this - any chance you would know why when you are on a member page and click the back button

it takes you the category accounting and not the category you were on? Say you clicked through to interior design to get to the above page - there are 2 listings and if you click that back button it automatically takes you to the accounting listing and not the listing you were on. I am sure there is some code or something I am missing lol If that even makes sense - any help on this would be appreciated.

Thank you - michele