Temporary image render issue during page load.

[hilarycam]

Hi,

When using Random Tiled Gallery using the Zenfolio 'photosets' short code (with XX-Large images enabled, for retina screens), I have noticed that during the inital page load, the images appear large (unscaled native resolution, is my guess), transparent and overlap each other, for a second or two until the load is finished before snapping into the grid mode as expected.

Here is a screen shot of the page during load and once complete:



Any ideas of how to hide this rendering process and display only the finished layout?

Thanks,
Hilary

[sayontan]

There is CSS in place to explicitly hide this. Not sure if you have something that is overriding that CSS.

[hilarycam]

There is CSS in place to explicitly hide this. Not sure if you have something that is overriding that CSS.

Hi again Sayontan, would you be able to cut/paste the CSS in question so I can try to track down my own conflicting code.

Thanks again - very impressed with the support for this plugin.

[sayontan]

There is this:

Code: Select all

.photonic-random-layout .photonic-pad-photos { display: none; }

Do check one thing first: Under the options for Zenfolio Photos you will see a setting "Constrain Photos Per Row". Is that set to "Fix the padding around thumbnails", or "Fix the number of thumbnails per row"? I believe the above CSS will apply to the photos if your setting is the former.

[hilarycam]

I can confirm I have "Fix the padding around thumbnails" set under "Constrain Photos Per Row". Strange.

You can view the render issue here: http://www.hilarycam.com.au/blog/2013/01/testing/

[sayontan]

I do see quite a few issues:
1. There are some warnings / errors due to other plugins - Panorama, and something that says "MM_swapImage". You might want to disable those first.
2. The class being assigned corresponds to 5 photos per row. Are you passing a "columns" attribute to your shortcode? You might want to remove that.
3. Also, I am seeing a replica of your images showing up once again in the lower half. That might be due to the change of code you put in from your other thread, though. We can troubleshoot that after you have resolved the previous two issues.

[hilarycam]

I do see quite a few issues:
1. There are some warnings / errors due to other plugins - Panorama, and something that says "MM_swapImage". You might want to disable those first.

I have temporarily disabled both of these on this page. No change to report.

2. The class being assigned corresponds to 5 photos per row. Are you passing a "columns" attribute to your shortcode? You might want to remove that.

Not sure exactly what you mean here. My zenfolio photoset settings are (I tried both options under "Constrain Photosets Per Row" but no change):



and my shortcode is (keeping in mind I have changed the shortcode label 'gallery' to 'zenfolio' within Photonic to avoid conflict with an existing plugin:

Code: Select all

[zenfolio type='zenfolio' view='photosets' object_id='p950420936']

3. Also, I am seeing a replica of your images showing up once again in the lower half. That might be due to the change of code you put in from your other thread, though. We can troubleshoot that after you have resolved the previous two issues.

Not sure I understand on this one.

Thanks for all your superb help

[sayontan]

That particular setting is under "Zenfolio Photo Settings"

[hilarycam]

That particular setting is under "Zenfolio Photo Settings"

Haha ok, that fixed it. Sorry to waste your time, I think you told me to do that much earlier, but I did it in the wrong section.

Fix was:

[hilarycam]

May I ask what you meant by:

3. Also, I am seeing a replica of your images showing up once again in the lower half. That might be due to the change of code you put in from your other thread, though. We can troubleshoot that after you have resolved the previous two issues.

I did just notice the images appear twice strangely.