Slider exposes images on load

HTML & CSS
1

Hi all,

I have created this page http://www.kylehouston.com/new/ in the main banner i have a mac with the insert being a slider, when you initially visit this page the slider exposes all the images contained in it, is there a way I can fix this?

Thanks in advance

Kyle

2

Looks like you fixed it, did #mini_mac_slider not have overflow:hidden when you asked to question? I checked it on FF 3.6 on a mac.

3

Hi Kyle,

I always link in all my js in the head of the document so it loads before the body (I think thats correct anyway) which might help. Your using

	$(document).ready(function(){	
		$("#mini_mac_slider").easySlider({
			auto: true, 
			continuous: true
		});
	});

so this can also be put in the head as the script will only run when the document is ready (and the target div has been created).

At the moment your page is going draw all this, then load in jquery etc, then run the script. Stick it in the head and jquery etc should be loaded in time to stop the images displaying.

If that fails you could just a .hide() in the js before and then a .show() after the slider function or add a display: none in the css and toggle it to show with js.

Couple of ideas there that should work, somebody else might have a more elegant solution though!

ps check your site in IE6 few layout issues (Although im guessing your working on it!)

EDIT: yeh actually setting a height and adding overflow:hidden on the container should do it :-s

EDIT EDIT: Ah yeh looks like js is adding the inline overflow:hidden / height. try sticking it in your css as a defined style

4

you could try the load method in jQuery:

$(document).ready(function(){
$("#mini_mac_slider").load(function(){
[INDENT]$("#mini_mac_slider ul").show();[/INDENT]
[INDENT]$("#mini_mac_slider").easySlider({
[INDENT]auto: true,
continuous: true[/INDENT]
});[/INDENT]
});
});

The

$("#mini_mac_slider ul").show();

code assumes you are using css to display:none the ul in the slider, then once the jquery is ready it will show the ul (and the images I am assuming) then once the #mini_mac_slider container and all of its sub-elements has finished loading (based on .load()) then it will initiate the slider plugin.

Hope that helps. You can also start the slider out by showing a default image, wait for the load, hide the default then do the .show() on the ul. I guess there are a lot of ways of doing it.

5

thanks for your responses guys, gonna have a go with them now so will let you know how i get on, thanks!

6

Yeah Phillip the great ie6 fixes will be coming soon! Thanks!