Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Équipe Jimdo le Lun 6 Oct 2014 - 16:52

[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  Embarassed ).
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
avatar
Équipe Jimdo
Admin

Messages : 34
Date d'inscription : 26/09/2014

http://fr.jimdo.com

Revenir en haut Aller en bas

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

Message par TradDeFr le Dim 26 Oct 2014 - 19:07

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

TradDeFr

Messages : 1
Date d'inscription : 26/10/2014

http://uebersetzung-deutsch-franz.jimdo.com

Revenir en haut Aller en bas

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

Message par idtedhero le Lun 27 Oct 2014 - 10:50

Il faut modifier l'image de fond.


Dernière édition par idtedhero le Mar 28 Oct 2014 - 13:11, édité 1 fois
avatar
idtedhero

Messages : 7
Date d'inscription : 27/10/2014
Age : 33
Localisation : Orléans

http://www.idted.fr

Revenir en haut Aller en bas

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

Message par FredVig le Mar 28 Oct 2014 - 11:31

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…

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1771
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Modif fichier HTML

Message par DOC13710 le Ven 28 Nov 2014 - 17:07

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/
avatar
DOC13710

Messages : 4
Date d'inscription : 27/11/2014
Age : 68
Localisation : Fuveau - 13710

http://jhweb.jimdo.com/

Revenir en haut Aller en bas

Slider images

Message par Arzel le Mar 16 Déc 2014 - 11:03

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 !

Arzel

Messages : 1
Date d'inscription : 16/12/2014

http://ebc56.jimdo.fr

Revenir en haut Aller en bas

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

Message par FredVig le Mar 15 Sep 2015 - 15:57

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.

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1771
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum