How to avoid ugly preloading in Galleria Javascript Gallery?

[rotipom]

Hi everyone,

I am new to the site and a complete NEWBIE in web design. Don't know anyone who does it and it's a constant struggle to do and understand simple tasks.....

 

 

I just created a bunch of portfolio galleries using Galleria for my site and find that while it looks and works really great, I am getting this ugly pre-loading thing, where a column of the large images are showing up for a split second while its loading before they become thumbnails.

 

click on the portfolio pages

 

 

David's demo2 doesn't seem to have that problem. Is there something I'm not doing or can do to remedy this? Would appreciate the advice or a link to a previous tutorial, thanks so much!!

 

Amy

Edited January 19, 2010 by rotipom

[PicnicTutorials]

Hi Amy, most likely your going to have to do one of these... http://www.visibilityinherit.com/code/add-css-with-javascript.php

 

You may have to say display none (or similar) with js to prevent that flash.

[rotipom]

Hi Amy, most likely your going to have to do one of these... http://www.visibilityinherit.com/code/add-css-with-javascript.php

 

You may have to say display none (or similar) with js to prevent that flash.

 

 

Thanks Eric!!! I have no idea what it all means yet, but I am going to try to process it and hopfully figure it out...

[rotipom]

Hey Eric,

 

I tried a bunch of things but it was like stabbing in the dark and I'm still getting that flash of unstyled content.

 

What I did was to try to insert the script of method3 into the source html (is that correct?) of my page. and where it says #method3 {color:green;} I replaced it with the entire contents of div_sb2 which contains my unordered list of unstyled images. Is that what I was supposed to do? Nothing removed that flash of content, and I tried the other methods doing the same...

 

The Galleria demo2 (link inserted in my original post) does not flash its unstyled content and I tried to look in the source code to see what he has added to prevent this but can't find anything (that I know of, which isn't much).

 

Help, what am I doing wrong?

 

Thanks in advance!!

Amy

[PicnicTutorials]

OK, I see it. So first just try adding some css (AKA display none on the large image class) to make that stop. The javascript (Galleria) should override it once you click on the thumbs. Once you've figured out that works, then add the css in via the javascript routine in the tut I showed you. This is done so when javascript is off, you large images are not stuck on display none.

Edited January 20, 2010 by Eric

[rotipom]

OK, I see it. So first just try adding some css (AKA display none on the large image class) to make that stop. The javascript (Galleria) should override it once you click on the thumbs. Once you've figured out that works, then add the css in via the javascript routine in the tut I showed you. This is done so when javascript is off, you large images are not stuck on display none.

 

 

Hey Eric, thanks much for that last bit of tip, that really helped though I had to jog around the virtual 'block' several times before I managed to implement it right. All. So. New.

 

BUT I think I might have a breakthrough FINALLY!!! Check it out if you can at

 

http://www. treespacestudio .com/portfolio_faitmain_printmaking.htm

 

The only problem now is those little bullet points that show up next to the images before they were turned off, has remained. So I don't see the flash of images now but i see bullet points...

[PicnicTutorials]

Good! Did you figure out the js part? And are the bullets still there, I couldn't see them?

[rotipom]

Good! Did you figure out the js part? And are the bullets still there, I couldn't see them?

 

Awesome Eric, that means I did the right thing by creating a list-style none entry in the css style! In the middle of implementing your suggestions and creating a css style for the unstyled content, I stumbled another reason for the unstyled content showing on mine and why they weren't doing it for David's Demo2.

 

His instructions included creating a 'gallery' identifier for the pictures and I think he also meant a 'gallery' css-style in the galleria.css, (I already had the list identified as ul gallery but didn't create a css-style for it) So that was the step I apparently missed!

 

BUT the coolest thing is, your method (method3) for some reason, solve the problems I was having with IE8 not loading the thumbnails properly!! (I had to individually create a new 'gallery_unstyled' identifier and css-style for each image in order for your method to work) So, neato and thanks for your help!!

 

cheers,

Amy