I'm using jcarousel and I'm loading in a large list of image thumbnails (200 - 600). The problem is that the while the page loads, the thumbnails show up on the page briefly, and then once they finish loading the jcarousel takes over and hides them. I'm wondering if there is a way to hide them from the get go.
A:
You can just declare the thumbnails' CSS to be display: none to begin with.
Actually, when is jcarousel being initialized? It could also be that you're initializing jcarousel on document.onload, which is AFTER everything has loaded. By running the initialization code within $( initialize_function ), it will run when the DOM is ready but before everything else is loaded.
erjiang
2010-10-25 20:29:12
`display:hidden;` won't do anything.
Jeff Rupert
2010-10-25 20:32:15
@Jeff, you're right, but it's easy enough to get `visibility: hidden` and `display: none` confused.
David Thomas
2010-10-25 20:36:44
My bad. I don't know what I was thinking of but it wasn't CSS.
erjiang
2010-10-25 20:37:20
@David: I know, I've done it before. Just wanted to let erjiang know. =) @erjiang: No worries.
Jeff Rupert
2010-10-25 20:43:18
@Jeff, @erjiang, we've all done it. And sat there for ten minutes looking bewildered when it doesn't work. And then embarrassed when we realised... =)
David Thomas
2010-10-25 20:52:35
I'm running the jcarousel code in $(document).ready(function() { // init code goes here }
Mark Steudel
2010-10-25 21:53:38
Anyway that wouldn't have worked since jcarousel doesn't actually unhide images, it just uses overlfow:hidden
Mark Steudel
2010-10-28 19:17:21
+1
A:
You can always use plain old css:
img.thumbnails {
display: none;
}
David Thomas
2010-10-25 20:30:05
i'll give this a try. I tried the other li's but the carousel didn't unhide them ...
Mark Steudel
2010-10-26 03:55:58
I tried this, but jcarousel doesn't know to unhide the thumbnails to hide them. We ended up looking at the styles that jcarousel applied to the thumbnails and applied them via css, so part of the work was already done. Basically the way jcarousel hides the images is to use overflow:hidden
Mark Steudel
2010-10-28 19:16:39
@Mark, given that you solved the problem differently than the suggestions here, you should probably add an answer to this question detailing what you did, and accept *your own* answer. Nicely done =)
David Thomas
2010-10-28 20:10:41