[az_alert_box type_acc=”alert-warning”]Contrairement à ce qui est mentionné dans le texte de l’article, la démo de Supersized n’est plus visible pour le moment sur mon site.
[/az_alert_box][az_alert_box type_acc=”alert-info”]MISE A JOUR : J’ai maintenant écrit un plugin WordPress qui prend en charge l’intégration de Supersized 3.1.3 dans WordPress, avec de nombreuses options pour choisir où et comment afficher Supersized. Voici WP Supersized !

MISE A JOUR : Ce tutoriel devrait également être valable pour Supersized 3.1.2 et 3.1.3.

[/az_alert_box]

[az_column_text]Depuis mon article précédent sur l’intégration de Supersized 3.0 dans WordPress, une nouvelle version de Supersized a vu le jour : Supersized 3.1.1.

Je pensais qu’il serait utile de mettre à jour mon tutoriel sur l’intégration de Supersized dans WordPress pour refléter les changements lors du passage de Supersized 3.0 à 3.1.1. En effet, la dernière version rend les choses beaucoup plus simples.

Je décrirai d’abord une installation complète de Supersized 3.1.1 dans WordPress. Pour ceux qui avaient installé Supersized 3.0 d’après mon tutoriel précédent, je montrerai également comment mettre à jour une installation existante de Supersized 3.0 dans WordPress.

Ce que je décris ici est valable au moins pour WordPress 3.0 et au-dessus mais est probablement aussi valable pour des versions plus anciennes de WordPress.

Ce tutoriel est également disponible en pdf.

[/az_column_text]

[az_special_heading heading_type=”2″ heading_style=”italic” content_heading=”Intégrer Supersized 3.1.1 dans WordPress – installation complète”]

[az_column_text]Cette fois, je vais présenter les choses de manière différente de mon tutoriel précédent : je vais à présent supposer que vous voulez intégrer Supersized dans tous vos articles ou pages. Si vous ne voulez l’utiliser que dans certaines pages, vous devrez créer un nouvel ensemble de page template, footer, et header pour les pages où vous voulez utiliser Supersized, avec les appels appropriés vers les header et footer correspondants.

Je décris ici la procédure d’installation de Supersized 3.1.1 dans WordPress, en utilisant le dossier slideshow/ de Supersized 3.1.1. La même chose doit être valable pour les dossiers core/ or flickr/ si vous voulez les utiliser. Vérifier l’usage correct de ces fichiers sur le site web de Supersized. Comme expliqué ci-dessus, mon tutoriel est valable au moins pour WordPress 3.0 et au-dessus mais est probablement aussi valable pour des versions plus anciennes de WordPress.

1. Téléchargez le fichier Supersized 3.1.1.zip depuis buildinternet.com et dézippez-le. Créez un dossier supersized/ dans le dossier de votre thème et copiez-y les dossiers slideshow/js/, slideshow/img/ et slideshow/css/ (donc dans : www.votresiteweb.com/wordpress/wp-content/themes/votrethemefavori/supersized/). Si vous voulez utiliser une autre variante (core or flickr), copiez alors plutôt les contenus correspondants de ces dossiers.

Dans le dossier supersized/ folder, créez un dossier slides/ où vous placerez vos images à afficher avec Supersized.

2. Dans l’Appearance editor de WordPress, éditez le fichier header.

Dans le &#60head&#62, après l’appel de la feuille de style standard, ajoutez un appel à la feuille de style de Supersized.

[/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]Dans le fichier supersized.css, vous devrez adapter les chemins des fichiers vers le dossier img/ selon votre propre installation (seulement nécessaire si vous avez placé le dossier /img ailleurs qu’à son emplacement original).

A la fin du &#60head&#62, ajoutez les scripts pour Supersized. Vous pouvez copier le code correspondant depuis le fichier fade.html que vous trouverez dans le dossier Supersized. J’ai également préparé un exemple de fichier header.php (basé sur le thème Twenty Ten) qui inclut ces modifications. Téléchargez ce fichier header ainsi que le footer dont vous aurez besoin dans l’étape suivante.

Toutes les options peuvent être modifiées selon vos désirs. Suivez simplement l’usage décrit sur le site de Supersized. N’oubliez pas d’ajouter vos propres images dans le dossier supersized/slides/. Vous pouvez ajouter autant d’images que vous le souhaitez dans la liste de l’option slides, en vous assurant d’omettre la virgule après la dernière 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. Optionnel. Si vous désirez utiliser la navigation de Supersized, allez dans l’Appearance editor et éditez votre fichier footer en y ajoutant ce qui suit, juste avant 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]A nouveau, vous pourrez trouvez ce code dans le fichier fade.html file ou dans le footer que j’ai inclus dans mon fichier zip. Assurez-vous de mettre les options Slideshow controls et Thumbnail navigation sur 1 sinon vous ne verrez pas les contrôles de navigation.

4. Encore deux conseils :
Assurez-vous que le fond de votre thème possède au moins quelques parties transparentes, sinon vous ne verrez pas Supersized en arrière-plan.
Si vous utilisez le plugin WP-Minify, vous devez exclure supersized.3.1.1.min.js de minify, sinon Supersized ne fonctionnera pas correctement.

C’est fait ! Profitez de Supersized 3.1.1 dans WordPress !
Vous pouvez le voir en action sur ma page A propos.[/az_column_text]

[az_special_heading heading_type=”2″ heading_style=”italic” content_heading=”Mettre à jour une installation existante de Supersized 3.0 dans WordPress vers Supersized 3.1.1″]

[az_column_text]

Je décris ici la procédure d’installation de Supersized 3.1.1 dans WordPress, en utilisant le dossier slideshow/ de Supersized 3.1.1. La même chose doit être valable pour les dossiers core/ or flickr/ si vous voulez les utiliser.

1. Téléchargez le fichier Supersized 3.1.1.zip depuis buildinternet.com et dézippez-le.

2. Dans le dossier supersized/ à l’intérieur de votre dossier de thème, effacez le contenu du dossier js/ folder (gardez le dossier). Effacez également le dossier images/.

3. Copiez le fichier supersized.3.1.1.min.js (déjà minifié) depuis le dossier Supersized 3.1.1 que vous avez dézippé, dans le dossier supersized/js/ existant dans votre dossier de thème. Vous pourrez le trouver dans le dossier slideshow/. Si vous voulez utiliser les autres variantes (core ou flickr), la procédure devrait être similaire.

Copiez aussi le dossier img/ depuis le dossier Supersized 3.1.1 que vous avez dézippé, dans le dossier supersized/ dans votre dossier de thème.

4. Dans votre fichier css correspondant à votre page, remplacez tout le css de Supersized 3.0 par le css de la version 3.1.1 en n’oubliant pas d’adapter les chemins de fichier vers le dossier img/, en fonction de votre propre installation.

5. Dans le fichier header-supersized (ou votre header standard si vous l’aviez modifié en vous basant sur mon tutoriel précédent), remplacez l’entièreté des scripts de Supersized par ceux montrés au point 2 de la procédure d’installation complète. Vous ne pourrez pas les copier depuis cette page-ci mais vous les trouverez dans le fichier fade.html file inclus dans le dossier de distribution de Supersized ou bien dans mon exemple de fichier header.php (basé sur le thème Twenty Ten) qui inclut les modifications. Téléchargez ce fichier ainsi que le footer dont vous aurez besoin dans l’étape suivante. Si nécessaire, mettez à jour les chemins de fichier vers vos propres dossiers de scripts et de slides. Bien sûr, vous pouvez modifier les options selon vos désirs.

6. Toujours dans le fichier header, au début du &#60body&#62, enlevez les lignes suivantes :

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

7. Dans votre template de page, (le template Supersized Page si vous aviez suivi mon tutoriel précédent), enlevez les dernières lignes :

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

Si vous aviez placé ces lignes dans le footer (comme expliqué dans mon tutoriel précédent corrigé), alors vous devriez les effacer là.

En fait, il ne devrait plus y avoir la moindre trace de Supersized dans vos template de pages avec cette nouvelle version de Supersized.

8. Optionnel. L’installation de la navigation de Supersized 3.1.1 est identique au Point 3 de la procédure d’installation complète.

9. Si vous utilisez le plugin WP-Minify, vous devrez exclure supersized.3.1.1.min.js de minify, sinon Supersized ne fonctionnera pas correctement.

C’est fait ! Profitez de Supersized 3.1.1 dans WordPress !

Vous pouvez le voir en action sur ma page A propos.

J’espère que tout ceci est clair. Si vous avez des questions, n’hésitez pas à me les poser. Et si vous avez amélioré quelque chose, dites-le moi !

[/az_column_text]