Header avec photos défilant en fondu enchaîné

[Équipe Jimdo]

[Tutoriel originellement proposé par pays-medoc.jimdo.com sur notre ancien forum]

Bonjour à la communauté :-)

Tout d'abord, je tenais à dire que j'ai énormément apprécié tous les trucs et astuces trouvés sur ce forum et sur quelques autres sites de tutos (realia, communauté francophone etc)...
Du coup, comme j'ai trouvé un moyen bien sympa de faire des headers personnalisés avec photos en fondu enchaîné, j'espère pouvoir renvoyer l'ascenseur à des personnes intéressées ;-)

Donc voici la procédure :

Etape 1 - Préparez vos images
Il faut que toutes vos images soient à la bonne taille. Regardez dans "Modifier le header" > "Image personnalisée", vous aurez les dimensions à prévoir (attention, cela peut changer suivant les designs, donc choisissez votre design avant d'implémenter le header personnalisé... à moins de vouloir tout refaire :-p). Pour retailler les photos, j'utilise un petit logiciel gratuit, bien sympa, "Xn view", mais il en existe plein d'autres pour faire ça.

Etape 2 - Stockez vos images
Pour des aspects pratiques, je stocke mes images sur un serveur en ligne, mais je suppose que si on sait facilement récupérer les chemins des fichiers stockés sous Jimdo, c'est mieux...

Etape 3 - Récupérer le fichier Javascript
Il y a un fichier javascript à récupérer... Pour cela, faire un clic droit > "Enregistrer sous" sur ce lien : http://so.fun.free.fr/modules/commun/scripts/diaporama_objet.js.

Etape 4 - Stockez votre fichier javascript
Je le stocke au même endroit que les images.

Etape 5 - Intégrer le diaporama dans son site Jimdo
Il faut un design personnalisé... (ah oui, désolé, j'aurais peut-être dû le dire dès le départ   ).
Dans la partie de modification du code HTML, entre les balises <div id="emotion-header"> et </div>, supprimer le contenu et le remplacer par :

<script src="URL du fichier javascript"></script>
<script>
nouveau_id_diaporama = monDiaporama.length;
monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 100, 2, 2000, 850, 170, "flou");
monDiaporama[nouveau_id_diaporama].ajoutePhoto("URL de la photo");
monDiaporama[nouveau_id_diaporama].ajoutePhoto("URL de la photo");
monDiaporama[nouveau_id_diaporama].ajoutePhoto("URL de la photo");
monDiaporama[nouveau_id_diaporama].masquerPanneauCommande();
monDiaporama[nouveau_id_diaporama].placeDiaporama();
monDiaporama[nouveau_id_diaporama].testImagesOk();
</script>

Bien sûr il faut remplacer les textes en rouge par les bonnes URL... Il faut 3 photos au moins pour que cela fonctionne. Et bien sûr si vous avez 10 photos, vous reproduirez ces lignes-là 10 fois !
Les données en vert signifient :
- 100 : temps, en millisecondes, entre chaque étape de réduction de la photo au premier plan. Plus le nombre est grand, plus la transition est longue, et inversement.
- 2 : pourcentage de progression effectué à chaque étape. Varie entre 1 et 100. Plus le nombre est petit, plus la transition est fluide et lente.
- 2000 : temps de pause, en millisecondes, entre chaque transition.
- 850 : largeur des photos en pixel. Mettre ici la largeur de vos photos, qui correspond donc à la largeur du header.
- 170 : hauteur des photos en pixel. Mettre ici la hauteur de vos photos, qui correspond donc à la hauteur du header.

Valider le changement de design. Jimdo m'a indiqué des erreurs. J'ai accepté les corrections automatiques, et tout a été !!

Vous pouvez voir le résultat sur le site http://www.pays-medoc.com (le site est pour l'instant fermé par mot de passe, il n'est pas tout à fait fini ;-)), mais le header est bien visible :-).

Petite précision : il faut rendre à César ce qui lui appartient, j'ai trouvé ces éléments sur un autre site, voici le lien : http://so.fun.free.fr/modules/blog/article.php?id_article=22. Je n'ai fait qu'adapter son tutoriel pour l'appliquer aux headers de sites Jimdo ;-)

J'espère que ce tuto vous aura intéressé, et qu'il fonctionnera aussi bien chez vous que chez moi :-)


Nicolas

[TradDeFr]

Bonjour,
j'ai choisi un design (nouveau site) et commencé à travailler sur le design. Tout fonctionne bien sauf que j'ai une image que je n'ai pas choisi dans le "header" que je ne peux pas changer.
Après recherche dans l'aide il s'avère que je n'ai pas la barre "header" qui s'affiche.
Pouvez-vous m'aider ? Merci d'avance

[idtedhero]

Il faut modifier l'image de fond.

[FredVig]

Il n'y a pas de header sur les nouveau designs, c'est l'image de fond qui le remplace.
On se tue à le dire, mais ce n'est pas votre faute.
La fonction recherche défaillante de ce forum va poser problème…

[DOC13710]

Bonjour,
Ce tuto est bien expliqué, et je pense avoir compris !! donc je vais essayer de le mettre en place sur mon site !!!!
J'ai trouvé l'emplacement de remplacement des modifs entre les lignes 215 et 227 est ce exact  ?

De plus comment retrouve on ou sont stocké nos images sur le site de Jimdo ?
Merci et A+

http://jhweb.jimdo.com/

[Arzel]

Bonjour,

Je cherche à faire un slider d'images qui serait différent sur chaque page. Donc un slider par page je suppose.
Je suis tombée sur un site dans le blog Jimdo et c'est exactement ça que je voudrais faire : http://www.cleannix.fr/
Je suis graphiste mais malheureusement mes connaissances en web sont limitées.
Pouvez-vous m'expliquer comment créer ce genre de slider sur un site jimdo.

Merci de votre aide !

[FredVig]

De récentes adaptations de jimdo, avec un arrière-plan de site en diaporama qui peut faire office de têtière, changent la donne. Il devient possible de réaliser cela très simplement si le design le permet.

[Contenu sponsorisé]