views:

589

answers:

2

I'm using the galleria jQuery plugin on a site. When the gallery first loads, all of the images appear briefly & vertically in ie 7 & 8. This doesn't happen when i isolate the gallery, only when i put it on a somewhat heavy page. This leads me to believe that it happens when the page is a little slow to load.

Does anybody know a way to fix this? I feel like an overflow: hidden should fix this, but I've applied it along with a height in every container I could think of.

Anybody have any ideas?

Here is my css:

.galleria{list-style:none;width:350px; overflow:hidden; height: 70px;}
.galleria li{display:block;width:50px;height:50px;overflow:hidden;float:left;margin:4px 10px 20px 0;}
.galleria li a{display:none;}
.galleria li div{position:absolute;display:none;top:0;left:180px;}
.galleria li div img{cursor:pointer;}
.galleria li.active div img,.galleria li.active div{display:block;}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display: inline;padding-top:.5em; width: 300px; }
* html .galleria li div span{width:350px;} /* MSIE bug */

html:

            <ul class="gallery"> 
            <li class="active"><img src="1.jpg" cap="A great veiw by so and so. This is a long block of info.<br /><span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li>
            <li><img src="2.jpg" cap="A mountain <span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li> 
            <li><img src="3.jpg" cap="Another witty caption <span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li> 
            <li><img src="4.jpg" cap="<span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li>  
            </ul>
A: 

how about

.galleria li{display:none}
.galleria li.active{display:block}

edit: hmm without knowing how you want the gallery to work,

.galleria li{float:left;width:120px;}

so just line up nicely horizontally

Funky Dude
Not a bad thought, but not only does this not work, but it hides all but the active thumbnails. The way this plug in works, the thumbnails are just resized versions of the large image, so they can't be set to display: none. Thanks though.
The .galleria li is already floated left and is unrelated to the original problem.
A: 

I've figured out a solution. If you set .gallery li img {display:none}, this will briefly hide the image stack in the moment before the jQuery overrides it.