Website that Highlights You as THE LOCAL EXPERT

[bambo]

Change "start_slide:1" to "start_slide:0" in the script and add more pictures

<script type="text/javascript">  
			jQuery(function($){
				$.supersized({
					//Background image
					slides	:  [ 
{ image : 'http://127.0.0.1/bg.jpg' } 
{ image : 'http://127.0.0.1/bg2.jpg' }
]					
				});
			});
			
		</script>

will load 2 pics randomly.

FadeIn value is set to fast but can be slow. Not sure there are any other options with this core script. Some differences to full, this is not slideshow as seen here http://www.worldinmyeyes.be/about-2/ You can't set timer to get the smooth transition he has. Random loading it can do.

That guy have written a tutorial on how-to install full script in WP. http://www.worldinmyeyes.be/1534/how...-in-wordpress/ a bigger task but should be easy enough with Catalyst.

I forgot to say I hate that loading gif. Also correct path must be set in css to link file. Section with #supersized-loader can be removed entirely. Can also be removed in script by deleting the part in bold and italic. Is at the top. Probably easier to do in css.

{a("body").prepend('<div id="supersized-loader"></div>').append('<div id="supersized">

Pic show a tip from developer. Much depend on images.

Dig in to comment, there are a couple of 100s Check commenter sites for inspiration.

[bambo]

Seems to me jQuery Backstretch is a little bit faster than supersized - http://srobbin.com/blog/jquery-plugi...y-backstretch/ is only for 1 image, does nothing like supersized. Has a nice little feature which might be cool with some sites. Can fade image in. Will probably flicker like mad in IE8 or whatever. Might be useful for a site with few pages that must have high cool factor.

Script must be loaded the normal way but how he calls it don't work in WordPress. Use something like this instead.

<script type='text/javascript' src='http://path_to_script/backstretch.js'></script>
<script type="text/javascript">
jQuery(document).ready(function() { 
jQuery.backstretch("http://path_to_image/xxx.jpg", {speed: 0 });				
 });
 </script>

Speed is in ms so 1000 = 1 second.

The speed tricks for supersized should work with this one as well. Have not tried but should be

#backstretch img {the code from pic in post above this}

[q2results]

dmuzzy, have you fully implemented this on a site I can see?

[bambo]

You could take a shortcut - providing you have 15$. http://codecanyon.net/item/custom-ba...rdpress/121983 does this and tons more. Scroll down the page to changelog. Pretty cool they make such a big update 6 months after last. Click live preview and log in to their test server. See for your self. Check "Backgrounds" menu. Sites that have paid a php coder to set pics up per category, per page must be annoyed You don't get much for 15$. Can't imagine such a site though. With wisely chosen pics it might make sense.

Part of latest update, which make it worth mentioning and possible the 15$, is bgStretcher http://www.ajaxblender.com/bgstretch...n-updated.html Another one like Supersized and Backstretch but with more features. Build for WordPress so no messing about with scripts. The premium plugin that is, free scripts must be squeezed in manually. Should not be difficult to do for 1 background image but all that about per page, category etc. and whatever extras won't be fun for non-coders.

[q2results]

@bambo Thanks for following up on this. I should have these integrated in the next week.

[dmuzzy]

dmuzzy, have you fully implemented this on a site I can see?

Yes I did get this to work, although I decided it took away the attention from lead generation so I cut it. Also, the picture that I used had a black background so it made the site too dark.

If I remember correctly, I think I put

supersized.3.1.3.min.js

in the root folder of the site. Then, I put this

<script type="text/javascript">  
			
			jQuery(function($){
				$.supersized({
				
					//Functionality
					slideshow               :   1,		//Slideshow on/off
					autoplay				:	1,		//Slideshow starts playing automatically
					start_slide             :   1,		//Start slide (0 is random)
					random					: 	0,		//Randomize slide order (Ignores start slide)
					slide_interval          :   3000,	//Length between transitions
					transition              :   1, 		//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
					transition_speed		:	500,	//Speed of transition
					new_window				:	1,		//Image links open in new window/tab
					pause_hover             :   0,		//Pause slideshow on hover
					keyboard_nav            :   1,		//Keyboard navigation on/off
					performance				:	1,		//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
					image_protect			:	1,		//Disables image dragging and right click with Javascript
					image_path				:	'img/', //Default image path

					//Size & Position
					min_width		        :   0,		//Min width allowed (in pixels)
					min_height		        :   0,		//Min height allowed (in pixels)
					vertical_center         :   1,		//Vertically center background
					horizontal_center       :   1,		//Horizontally center background
					fit_portrait         	:   1,		//Portrait images will not exceed browser height
					fit_landscape			:   0,		//Landscape images will not exceed browser width
					
					//Components
					navigation              :   1,		//Slideshow controls on/off
					thumbnail_navigation    :   1,		//Thumbnail navigation
					slide_counter           :   1,		//Display slide numbers
					slide_captions          :   1,		//Slide caption (Pull from "title" in slides array)
					slides 					:  	[		//Slideshow Images
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},  
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-kitty.jpg', title : 'Wanderers by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},  
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/apple-kitty.jpg', title : 'Applewood by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'}  
												]
												
				}); 
		    });
		    
		</script>

in the header.php file of the catalyst template in Appearance>Editor and changed the images at the end of that code to whatever I wanted that was loaded into Catalyst Image Uploader.

Then, I think that was it. But I think I put the code above directly in because I read somewhere that it keeps the amount of processing when your site loads, at first, down so it loads faster. But I think you could put it in the Core Options>Scripts>Header Box but I don't think I tried that or I had it in both. This is all new to me so my brain is fried and hard to remember. Not supposed to be building websites, supposed to be doing marketing...

[simplysam]

Dear OP

How did you create the Boxes above the fold and the below the fold?