[RÉGLÉ] module image aléatoire

[patrice44]

bonjour, j'ai fait un site il y a qlq années avec joomla 1.5, j'en bricole un autre aujourd'hui avec joomla 3, je suis toujours aussi épaté par toutes les possibilités du système ainsi que l’efficacité du partage des connaissances surtout pour le néophyte que je suis.

J'ai une question à vous soumettre, avec le template protostar, j'utilise le module d'image aléatoire en position 3 et j'ai donc affecté à chaque menu une image différente.

Y aurait il un moyen de régler le temps de l'affichage des images, afin que celui ci soit progressif, plutôt qu'un affichage instantané lorsqu'on change de menu ?

amicalement patrice

[Rajoz]

Re : module image aléatoire

Bonjour patrice44,

Pour réaliser un affichage progressif il est possible d'utiliser la propriété CSS3 animation, voir :

• Fr : http://www.css3create.com/animation
• En : http://www.w3schools.com/css/css3_animations.asp

En pratique, tu peux ajouter le code suivant à la fin du fichier templates/protostar/css/template.css :

.random-image img {
            animation: fadein 5s;
         -o-animation: fadein 5s;    /* Opera */
       -moz-animation: fadein 5s;    /* Firefox */
    -webkit-animation: fadein 5s;    /* Safari and Chrome */
}
        @keyframes fadein { from { opacity:0; } to { opacity:1; } }
     @-o-keyframes fadein { from { opacity:0; } to { opacity:1; } }
   @-moz-keyframes fadein { from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes fadein { from { opacity:0; } to { opacity:1; } }

NOTES

• La valeur 5s indique le temps en secondes pour passer d'une opacité de 0 (transparent) à une opacité de 1 (complètement affiché). Tu peux modifier cette valeur par exemple en essayant 2s (plus rapide) ou 8s (plus lent). (Il faut modifier les 4 lignes où se trouve la valeur 5s).
• Le fichier template.css fait partie des fichiers natifs de Joomla!, il peut donc être écrasé lors de la prochaine mise à jour : penser à noter les modifications pour pouvoir les reproduire.

Amicalement,
Rajoz

[patrice44]

Re : module image aléatoire

merci pour la rapidité de la réponse et ta précision patrice

[patrice44]

Re : module image aléatoire

bon je me suis emballé, j'ai fait un copié collé du code dans le template.css et il ne se passe pas grand chose, est ce que je ne devrais pas préciser qlq part le nom des images ?

[Rajoz]

Re : module image aléatoire

Bonjour patrice44,

est ce que je ne devrais pas préciser qlq part le nom des images ?

Le code HTML produit par le module Image aléatoire est du type :

<div class="moduletable">
    <h3>Titre du module</h3>
    <div class="[COLOR=#FF0000]random-image[/COLOR]">
        <[COLOR=#FF0000]img[/COLOR] src="/images/test.jpg" alt="test.jpg" width="700" height="180">
    </div>
</div>

Le code CSS indiqué se rattache à ce code HTML en utilisant la classe .random-image et la balise img (indiqués en rouge) :

[COLOR=#FF0000].random-image img[/COLOR] {
    ...
}

--> Il n'y a donc pas besoin de préciser le nom des images dans le CSS.

Difficile sans voir le site de préciser le problème : peux-tu poster un lien vers ton site ? ou au moins l'extrait de ton template.css avec le code ?

Quelques points à vérifier (je ne suis sûrement pas exhaustif mais faut bien commencer) :

• Vérifier que le fichier template.css modifié est bien le bon : ce doit être templates/protostar/css/template.css
• Utiliser un éditeur "propre" comme Notepad++ sur PC (ne surtout pas utiliser Word).
• Le point "." dans le CSS avant .random-image peut facilement s'oublier, il est important car il indique que .random-image est une classe.
• Vérifier que le couper/coller s'est bien passé.
• Avec Firebug pour Firefox ou l'inspecteur d'éléments de Chrome ou de IE, vérifier que les codes HTML et CSS correspondent à ce que j'ai indiqué. Par exemple avec Chrome ou IE, cliquer avec le bouton de droite sur l'image et choisir "Inspecter l'élément" dans le menu et vérifier dans le CSS que ".random-image img" a bien l'attribut d'animation prévu.

J'ai vérifié le CSS en faisant un couper/coller du post vers le template.css de mon site de test et ça marche sans problème.

Amicalement,
Rajoz

[Modification]
Quand je dis que ça marche cela veut dire que les images du module Images aléatoires s'affichent avec un effet de Fade-in (affichage progressif) quand on change de page via le menu ou que l'on rafraîchit la page (touche F5).
C'est ce que j'ai compris que tu attendais.
[/Modification]

[patrice44]

Re : module image aléatoire

tu as exactement compris ce que je souhaitais, c moi qui suis trop con, en fait je croyais utiliser random image, mais j'utilisais le module "contenu personalisé", j'ai donc remplacé dans le code ".random-image" par ".moduletable" et ça fonctionne .
Encore merci de ton aide. ( je viens de remplacer par ".custom" et ça fonctionne aussi )

[Rajoz]

Re : module image aléatoire

Bonjour patrice44,

La classe .moduletable peut être sur différents types de module, par exemple on la retrouve aussi bien pour un module de type Contenu personnalisé que pour un module de type Image aléatoire. Une classe utilisée de façon aussi large peut poser des problèmes sur d'autres images que tu ne voudrais pas voir s'afficher progressivement.

La classe .custom permet effectivement de restreindre aux seuls modules de type Contenu personnalisé.

On peut aller encore plus loin et créer une classe personnelle qui sera attribuée seulement à l'élément choisi.

Par exemple tu peux te créer des classes qui n'existent pas dans Protostar comme progressive4 et progressive12, chacune de ces classes définissant le temps d'apparition (respectivement 4 et 12 secondes) :

.progressive4 {
	        animation: fadein 4s;
	     -o-animation: fadein 4s;	/* Opera */
	   -moz-animation: fadein 4s;	/* Firefox */
	-webkit-animation: fadein 4s;	/* Safari and Chrome */
}
.progressive12 {
	        animation: fadein 12s;
	     -o-animation: fadein 12s;	/* Opera */
	   -moz-animation: fadein 12s;	/* Firefox */
	-webkit-animation: fadein 12s;	/* Safari and Chrome */
}
        @keyframes fadein { from { opacity:0; } to { opacity:1; } }
     @-o-keyframes fadein { from { opacity:0; } to { opacity:1; } }
   @-moz-keyframes fadein { from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes fadein { from { opacity:0; } to { opacity:1; } }

Tu peux utiliser ces classes dans un module de type Contenu personnalisé ou encore dans un article pour une image, un texte, etc.
Par exemple, j'affiche ici un texte en 4 secondes et une image en 12 secondes :

<p [COLOR="#FF0000"]class="progressive4"[/COLOR] style="text-align: justify;">Voilà mon texte qui apparaît en 4 secondes</p>
<p><img [COLOR="#FF0000"]class="progressive12"[/COLOR] src="images/powered_by.png" alt="powered_by" /></p>

Amicalement,
Rajoz

[patrice44]

Re : module image aléatoire

trop fort