Joomladay francophone 2018 à Paris 18 et 19 mai

module image aléatoire

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] module image aléatoire

    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

  • #2
    Re : module image aléatoire

    Bonjour patrice44,

    Pour réaliser un affichage progressif il est possible d'utiliser la propriété CSS3 animation, voir :
    En pratique, tu peux ajouter le code suivant à la fin du fichier templates/protostar/css/template.css :
    Code:
    .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

    Commentaire


    • #3
      Re : module image aléatoire

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

      Commentaire


      • #4
        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 ?

        Commentaire


        • #5
          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 :
          Code:
          <div class="moduletable">
              <h3>Titre du module</h3>
              <div class="random-image">
                  <img 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) :
          Code:
          .random-image img {
              ...
          }
          --> 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]
          Dernière édition par Rajoz à 23/09/2015, 18h13

          Commentaire


          • #6
            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 )
            Dernière édition par patrice44 à 23/09/2015, 19h15

            Commentaire


            • #7
              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) :
              Code:
              .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 :
              Code:
              <p class="progressive4" style="text-align: justify;">Voilà mon texte qui apparaît en 4 secondes</p>
              <p><img class="progressive12" src="images/powered_by.png" alt="powered_by" /></p>
              Amicalement,
              Rajoz

              Commentaire


              • #8
                Re : module image aléatoire

                trop fort

                Commentaire

                Annonce

                Réduire
                1 sur 2 < >

                C'est [Réglé] et on n'en parle plus ?

                A quoi ça sert ?
                La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                Comment ajouter la mention [Réglé] à votre discussion ?
                1 - Aller sur votre discussion et éditer votre premier message :


                2 - Cliquer sur la liste déroulante Préfixe.

                3 - Choisir le préfixe [Réglé].


                4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                2 sur 2 < >

                Assistance au forum - Outil de publication d'infos de votre site

                Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                UTILISER À VOS PROPRES RISQUES :
                L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                Problèmes connus :
                FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                Installation :

                1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                Archive zip : https://github.com/AFUJ/FPA/zipball/master

                2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                et remplacer www. votresite .com par votre nom de domaine


                Exemples:
                Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                Télécharger le script fpa-fr.php dans: /public_html/
                Pour executer le script: http://www..com/fpa-fr.php

                Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                Télécharger le script fpa-fr.php dans: /public_html/cms/
                Pour executer le script: http://www..com/cms/fpa-fr.php

                En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                Voir plus
                Voir moins
                Travaille ...
                X