[az_alert_box type_acc=”alert-warning”]Although mentioned in this post, the demo of Supersized is currently not visible anymore on this website.
[/az_alert_box][az_alert_box type_acc=”alert-info”]UPDATE: I have now written a WordPress plugin taking care of the integration of Supersized 3.1.3 in WordPress, with many options available to choose how and where to display it. Have a look at WP Supersized!!

UPDATE: This tutorial should also be valid for Supersized 3.1.2 and 3.1.3.

[/az_alert_box]

[az_column_text]Since my previous post on the integration of Supersized 3.0 in a WordPress page, a new version of Supersized has appeared: Supersized 3.1.1.

I thought that it would be useful to update my tutorial on the integration of Supersized in WordPress to reflect the changes from Supersized 3.0 to 3.1.1 as this latest version makes it much easier than before.
I will first describe a clean install of Supersized 3.1.1 for WordPress. For those of you who have installed Supersized 3.0 according to my previous tutorial, I will also show how to update your existing installation of Supersized 3.0.
What I describe here is valid at least for WordPress 3.0 and above but is probably also valid for earlier versions of WordPress.

This tutorial is also available as a pdf file.

[/az_column_text]

[az_special_heading heading_type=”2″ heading_style=”italic” content_heading=”Integrate Supersized 3.1.1 in a WordPress page – clean install”]

[az_column_text]This time, I will do it a little bit differently than in my previous tutorial: I will now assume that you want to integrate Supersized in all your pages/posts. If you only want to include it in particular pages, then you will need to create a new set of page template, footer, and header for the pages where you want to use Supersized, with the appropriate calls to the corresponding header and footer.
I describe here the procedure for installing Supersized 3.1.1 in a WordPress page, using the slideshow/ folder of Supersized 3.1.1. The same should be valid for the core/ or flickr/ folders if you want to use these ones. Check the Supersized website for the correct usage of these files. As explained above, my tutorial is valid at least for WordPress 3.0 and above but is probably also valid for earlier versions of WordPress.

1. Download the Supersized 3.1.1.zip file from buildinternet.com and unzip it. Create a folder supersized/ within your theme folder and copy the slideshow/js/, slideshow/img/ and slideshow/css folders into that new folder (i.e. in: www.yourwebsite.com/wordpress/wp-content/themes/yourfavoritetheme/supersized/). If you want to use the other versions (core or flickr), copy the corresponding contents of those folders instead.
Within the supersized/ folder, create a slides/ folder where you will store your own images to be displayed by Supersized.
2. Go to the WordPress Appearance Editor and edit the header file.
In the &#60head&#62, after the call to the standard stylesheet, add the call to the Supersized stylesheet:

[/az_column_text][az_column_text]

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/supersized/css/supersized.css" type="text/css" media="screen" />

[/az_column_text]

[az_column_text]In the supersized.css file, you will need to adapt the file paths to the img/ folder according to your own installation (only necessary if you do not put the img/ folder (only necessary if you put the /img folder somewhere else than its original location).

At the end of the &#60head&#62, add the scripts for Supersized shown below. You may not copy text from my page but this code comes right from the fade.html file that you find in the Supersized folder. I also have prepared an example header.php file (based on the Twenty Ten theme) that includes the changes. Download this header file along with the footer that you will need in the next step.
All the options can be modified as you wish, just follow the usage described on the Supersized website. Do not forget to add your images in the supersized/slides/ folder. Add as many images as you wish in the list in the slides option as shown below, making sure to leave out the comma after the last image.

[/az_column_text][az_column_text]

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/js/supersized.3.1.1.min.js"></script>
<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)
					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://www.votresiteweb.com/wordpress/wp-content/themes/votrethemefavori/supersized/slides/image1.jpg', title : 'title of the slide', url : 'urlofyourchoice'},
					                                {image : 'http://www.votresiteweb.com/wordpress/wp-content/themes/votrethemefavori/supersized/slides/image2.jpg', title : 'title of the slide', url : 'urlofyourchoice'}
												]							
				}); 
		    });
		</script>

[/az_column_text][az_column_text]3. Optional. If you want to use the Supersized navigation, you will need to go to the WordPress Appearance editor and edit your footer file, adding the following code at the end of the footer, right before wp_footer():[/az_column_text][az_column_text]

	<div id="prevthumb"></div> <div id="nextthumb"></div>
	<div id="controls-wrapper">
		<div id="controls">		
			<div id="slidecounter">
				<span class="slidenumber"></span>/<span class="totalslides"></span>
			</div>			
			<div id="slidecaption"></div>			
			<div id="navigation">
				<img id="prevslide" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/img/back_dull.png"/><img id="pauseplay" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/img/pause_dull.png"/><img id="nextslide" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/img/forward_dull.png"/>
			</div>
			&#60a href="https://www.worldinmyeyes.be/wp-content/uploads/2011/03/supersized3" class="stamp"><img src="img/supersized-logo.png"/></a>			
		</div>
	</div>

[/az_column_text]

[az_column_text]Again, you can find this code in the fade.html file or in the footer I included in my zip file. Make sure to set the Slideshow controls and Thumbnail navigation on otherwise you will not see the navigation controls.

4. Still two advices:
Make sure that the background of your theme has at least some transparent parts, otherwise you will not see Supersized in the background.
If you use the WP-Minify plugin, make sure to exclude supersized.3.1.1.min.js from minify, otherwise Supersized will not work correctly.

Done ! Enjoy Supersized 3.1.1 in WordPress !
You can see it in action on my About page.[/az_column_text]

[az_special_heading heading_type=”2″ heading_style=”italic” content_heading=”Updating an existing Supersized 3.0 installation in WordPress to Supersized 3.1.1″]

[az_column_text]
I describe here the procedure for updating Supersized 3.0 to 3.1.1 in a WordPress page, using the slideshow/ folder of Supersized 3.1.1. The same should be valid for the core/ or flickr/ folder if you want to use that one.
1. Download the Supersized 3.1.1.zip file from buildinternet.com and unzip it.

2. In the supersized/ folder within your theme folder, delete the content of the js/ folder (keep the folder). Delete also the images/ folder.

3. Copy the supersized.3.1.1.min.js file (already minified) from the Supersized 3.1.1 folder that you have unzipped into the existing js/ folder of the supersized/ folder within your theme folder. You can find it in the slideshow/ folder. If you want to use the other parts (i.e. core or flickr), the procedure should be similar.
Copy also the img/ folder from the Supersized 3.1.1 folder that you have unzipped into the Supersized folder within your theme folder.

4. In your css file corresponding to your page, replace the whole css from Supersized 3.0 by the css from version 3.1.1, making sure to adapt the file paths to the img/ folder according to your own installation.
5. In your header-supersized file (or your standard header if you modified it based on my previous tutorial), replace the whole scripts for Supersized part by the ones shown in point 2 of the fresh install procedure. You may not copy it from my page but you can copy it from the fade.html file that is included in the Supersized distribution folder or from my example header.php file (based on the Twenty Ten theme) that includes the changes. Download this header file along with the footer that you will need in the next step. If needed, update the paths to your own scripts files and slides folder. Of course, you may modify the options as you wish.

6. Still in the header file, at the start of the &#60body&#62, remove the following lines:

<div id="loading">&nbsp;</div>
<div id="content-wrapper&qu

7. In your Page Template, (e.g. the Supersized Page Template if your followed my previous tutorial), remove the last lines:

</div>
<div id="supersized"></div>

If you had put these lines in the footer (as explained in my corrected previous tutorial), then you should remove them from there.

Actually, there should be no trace of Supersized modifications in your page templates with this new version of Supersized.

8. Optional. Same as Point 3 of the fresh install procedure.

9. If you use the WP-Minify plugin, make sure to exclude supersized.3.1.1.min.js from minify, otherwise Supersized will not work correctly.

Done ! Enjoy Supersized 3.1.1 in WordPress !
You can see it in action on my About page.

I hope that this is clear. If you have questions, do not hesitate to ask me. And if you have improved on this, please tell me !

[/az_column_text]