CMS Automne • Consulter le sujet - Changement d'image toutes les secondes

Consulter les messages sans réponse | Consulter les sujets actifs

Index du forum » Utilisateurs Français » Demandes d'aide

Le fuseau horaire est UTC [Heure d’été]

Changement d'image toutes les secondes

Modérateur: Support

Page 1 sur 1

[ 9 messages ]

Aperçu avant impression

Sujet précédent | Sujet suivant

Auteur

Message

totosh

Sujet du message: Changement d'image toutes les secondes

Publié: Mar Mai 25, 2010 1:55 pm

Inscrit(e) le : Mar Mai 18, 2010 9:00 am
Message(s) : 32

Voila enfaite je voudrai créer sur le menu de mon site, un petit qui bloc qui affichera 1 logo différent toutes le 2 secondes.
Voici le code js:

Code :

<script>
      /* Défilement des images de logo toutes les 2 secondes */
      var tabImages=new Array("/img/test/accueil/1.jpg","/img/test/accueil/2.jpg","/img/test/accueil/3.jpg");
      var numImage=1;
      
      function changeImage()
      {
        document.zone.src=tabImages[numImage];
        if (numImage==2)
          numImage=0;
        else
          numImage++;
        setTimeout("changeImage()",3000);
       }
<script>

Le problème c'est qu'il faut ajouter les images directement dans la racine donc ce n'est pas très optimiser , je voudrai savoir s'il était possible de prendre un groupe d'image d'une catégorie spécifique du module médiathèque pour le mettre dans tabImages? je pense que oui mais je ne sais pas trop comment ce module fonctionne :s

Dsl de vous faire embêtez comme ça.

Haut

Frank

Sujet du message: Re: Changement d'image toutes les secondes

Publié: Mar Mai 25, 2010 2:26 pm

Administrateur

Inscrit(e) le : Jeu Juin 16, 2005 8:05 am
Message(s) : 628
Localisation : Toulouse, France

En effet, pour gérer les logos, je ferais créerais une catégorie "logos" dans la médiathèque puis je créerais une rangée qui va chercher les logos et je les afficherais via javascript.

Pour la rangée, il te faut faire une recherche sur l'identifiant de la catégorie. L'identifiant des catégories s'affiche au survol de la souris dans la gestion des catégories. Ensuite tu boucles sur les résultats et tu récupéres le chemin de l'image via {Media:Fichier:filePath}/{Media:Fichier:filename} ou {Media:Fichier:filePath}/{Media:Fichier:thumbnail} si tu veux juste la vignette

_________________
Frank
http://www.automne-cms.org

Haut

totosh

Sujet du message: Re: Changement d'image toutes les secondes

Publié: Mer Mai 26, 2010 8:27 am

Inscrit(e) le : Mar Mai 18, 2010 9:00 am
Message(s) : 32

Merci pour la réponse je vais mis mettre ce matin, je n'ai pas eu le temps hier, en espérant réussir mais je sens que ca va être costo vu que j'y connais pas beaucoup

J'aurai une question en parallèle, cette rangée et aussi une autre du menu sera donc dans un espace client et qui sera identique pour toutes les pages, même si le modèles de page est différent, est il possible des liée un espace client sur chaque page pour modifier simplement qu'une seule fois définitivement, au lieu de modifier une des rangées de l'espace client par exemple l'adresse de la société dans chacune des pages, il y a t'il donc une solution?

Haut

Frank

Sujet du message: Re: Changement d'image toutes les secondes

Publié: Mer Mai 26, 2010 9:13 am

Administrateur

Inscrit(e) le : Jeu Juin 16, 2005 8:05 am
Message(s) : 628
Localisation : Toulouse, France

Je ne suis pas sur de bien saisir ta question.

Si tu as une rangée avec un menu construit avec des atm-linx, elle se mettra automatiquement à jour sur toutes les pages, quel que soit le modèle. Pareil pour ta rangée "logos" qui fait appel au module médiathèque. Tu peux affecter des rangées par défaut dans les espaces clients dans les propriétés des modèles de pages, ce qui fait que dès que tu créeras une nouvelle page, les rangées par défaut seront déjà insérées dans tes espaces clients.

La documentation n'est peut-être pas assez claire à ce niveau ?

Citer:

Rangées de contenu par défaut :

Les rangées de contenu par défaut sont les rangées qui seront automatiquement insérées dans vos pages lorsque vous créerez une nouvelle page avec le modèle en cours.

Placez y les rangées qui sont très fréquemment employées dans les pages utilisant votre modèle.

Vous pouvez :

* Ajouter une rangée de contenu.
* Déplacer une rangée de contenu.
* Supprimer une rangée de contenu.

_________________
Frank
http://www.automne-cms.org

Haut

totosh

Sujet du message: Re: Changement d'image toutes les secondes

Publié: Mer Mai 26, 2010 1:38 pm

Inscrit(e) le : Mar Mai 18, 2010 9:00 am
Message(s) : 32

Rhooo j'ai du raté ce petit paragraphe ou j'ai pas trop fait attention quand j'ai lu la doc, merci.

Bon sinon je suis sur le bout de code pour le défilement d'image, mais je suis un peu en galère, déjà je n'arrive pas a trop à cerner le fonctionnement de <atm-loop on="objet" > si vous pouviez m'éclaircir :s
Sinon je sais pas trop aussi comment introduire le js dans le code si c'est possible

Je suis vraiment peu doué, si vous pouviez m'éclaircir un peu, je sais que je vous dérange plus qu'autre chose...

Code :

<row>
<block module="pmedia" id="medias" language="fr">
      
          <?php
         $id_cat = 23;
         ?>

            var tabImages=new Array("");

         <atm-search what="{Media}" name="groupeLogo">
         
            <atm-search-param search="groupeLogo" type="{Media:Categorie:fieldID}" value="{var:int:id_cat}" mandatory="true" />      
            <atm-loop on="{Media}" >
               <atm-result search="groupeLogo">
                  <atm-if what="{Media:Fichier:fileExtension} == 'jpg' || {Media:Fichier:fileExtension} == 'gif' || {Media:Fichier:fileExtension} == 'png'">
                  
                     <atm-if what="{Media:Fichier:thumbnail}">
                        tabImages[{Media:Fichier:filename}]={Media:Fichier:filePath}/{Media:Fichier:filename};
                     </atm-if>
                     <atm-if what="!{Media:Fichier:thumbnail}">
                        tabImages[{Media:Fichier:filename}]={Media:Fichier:filePath}/{Media:Fichier:filename};
                     </atm-if>
                  </atm-if>
                  
               </atm-result>
            </atm-loop>
         </atm-search>
</block>   
</row>   

Haut

Frank

Sujet du message: Re: Changement d'image toutes les secondes

Publié: Mer Mai 26, 2010 3:42 pm

Administrateur

Inscrit(e) le : Jeu Juin 16, 2005 8:05 am
Message(s) : 628
Localisation : Toulouse, France

Pas besoin d'utiliser <atm-loop> pour parcourir les résultats, ça boucle déjà avec <atm-result>

Citer:

atm-result : Le contenu de ce tag sera lu pour chaque résultat trouvé pour la recherche en cours.

Dans ton cas il est également inutile de passer par du PHP pour spécifier l'identifiant de la catégorie en paramètre, tu peux lui donner directement l'id de la catégorie dans l'attribut.

Pour le javascript, c'est comme si tu voulais en ajouter dans un fichier XHTML, il te faut utiliser les balises <script>. Je n'ai pas touché à ton code JS, si tu galères, tu peux regarder du côté de bibliothèques comme JQuery pour faire ce genre de choses je pense.

Code :

<row>
   <block module="pmedia" id="medias" language="fr">
      <script type="text/javascript">
         var tabImages=new Array("");
      </script>
      <atm-search what="{Media}" name="groupeLogo">
         <atm-search-param search="groupeLogo" type="{Media:Categorie:fieldID}" value="23" mandatory="true"/>
         <atm-result search="groupeLogo">
            <atm-if what="{Media:Fichier:fileExtension} == 'jpg' || {Media:Fichier:fileExtension} == 'gif' || {Media:Fichier:fileExtension} == 'png'">
               <atm-if what="{Media:Fichier:thumbnail}">
                  <script type="text/javascript">tabImages[{Media:Fichier:filename}]={Media:Fichier:filePath}/{Media:Fichier:filename};</script>
               </atm-if>
               <atm-if what="!{Media:Fichier:thumbnail}">
                  <script type="text/javascript">tabImages[{Media:Fichier:filename}]={Media:Fichier:filePath}/{Media:Fichier:filename};</script>
               </atm-if>
            </atm-if>
         </atm-result>
      </atm-search>
   </block>
</row>  

_________________
Frank
http://www.automne-cms.org

Haut

Julien Breux

Sujet du message: Re: Changement d'image toutes les secondes

Publié: Mer Mai 26, 2010 9:18 pm

Inscrit(e) le : Mer Oct 07, 2009 7:17 pm
Message(s) : 18

Pour que tu comprennes bien le fonctionnement, voici la sortie :

Code :

<script type="text/javascript">var tabImages=new Array("");</script>
<script type="text/javascript">tabImages[mon_image_1.jpg]=img/mon_image_1.jpg;</script>
<script type="text/javascript">tabImages[mon_image_2.jpg]=img/mon_image_2.jpg;</script>
<script type="text/javascript">tabImages[mon_image_3.jpg]=img/mon_image_3.jpg;</script>

Ceci dit, il faut corriger de cette façon, car sans les simples quotes, le code JS ne serra pas valide :

Code :

<row>
   <block module="pmedia" id="medias" language="fr">
      <script type="text/javascript">
         var tabImages=new Array("");
      </script>
      <atm-search what="{Media}" name="groupeLogo">
         <atm-search-param search="groupeLogo" type="{Media:Categorie:fieldID}" value="23" mandatory="true"/>
         <atm-result search="groupeLogo">
            <atm-if what="{Media:Fichier:fileExtension} == 'jpg' || {Media:Fichier:fileExtension} == 'gif' || {Media:Fichier:fileExtension} == 'png'">
               <atm-if what="{Media:Fichier:thumbnail}">
                  <script type="text/javascript">tabImages['{Media:Fichier:filename}']='{Media:Fichier:filePath}/{Media:Fichier:filename}';</script>
               </atm-if>
               <atm-if what="!{Media:Fichier:thumbnail}">
                  <script type="text/javascript">tabImages['{Media:Fichier:filename}']='{Media:Fichier:filePath}/{Media:Fichier:filename}';</script>
               </atm-if>
            </atm-if>
         </atm-result>
      </atm-search>
   </block>
</row>  

Haut

totosh

Sujet du message: Re: Changement d'image toutes les secondes

Publié: Jeu Mai 27, 2010 10:27 am

Inscrit(e) le : Mar Mai 18, 2010 9:00 am
Message(s) : 32

Merci a vous, cela marche parfaitement, je n'aurai pas réussi sans vous

Voici le code final pour le changement d'images toutes les 2 secondes :

Code :

<row>
  <block module="pmedia" id="medias" language="fr">
    
    <script type="text/javascript">
      var tabImages=new Array("");
      var numImage=0;  
    </script>
    
    <atm-search what="{Media}" name="groupeLogo">
      <atm-search-param search="groupeLogo" type="{Media:Categorie:fieldID}" value="23" mandatory="true"/>
      <atm-result search="groupeLogo">
        <atm-if what="{Media:Fichier:fileExtension} == 'jpg' || {Media:Fichier:fileExtension} == 'gif' || {Media:Fichier:fileExtension} == 'png'">
          <atm-if what="{Media:Fichier:thumbnail}">
            <script type="text/javascript">
              tabImages[numImage]="{Media:Fichier:filePath}/{Media:Fichier:filename}";
              numImage++;
              document.logo.src=tabImages[0];
            </script>
          </atm-if>
          <atm-if what="!{Media:Fichier:thumbnail}">
            <script type="text/javascript">
              tabImages[numImage]="{Media:Fichier:filePath}/{Media:Fichier:filename}";
              numImage++;
            </script>
          </atm-if>
        </atm-if>
      </atm-result>
    </atm-search>
    
    <img name="logo" src=""/>
  </block>
  
</row>

Des le début une image est attribuée au src pour avoir immédiatement l'image au chargement de la page.
Je fais appel à une fonction dans le modèle de page pour alterner les images:

Code :

 <script>
      /* Défilement des images de logo toutes les 2 secondes */
      var i=0;
      function changeImage()
      {        
        document.logo.src = tabImages[i];
        if (i+1==numImage)
          i=0;
        else
          i++;
        setTimeout("changeImage()",3000);
      }
      
      window.onload = changeImage;
      
    </script>

Merci encore!

Haut

Julien Breux

Sujet du message: Re: Changement d'image toutes les secondes

Publié: Jeu Mai 27, 2010 1:11 pm

Inscrit(e) le : Mer Oct 07, 2009 7:17 pm
Message(s) : 18

totosh a écrit:

Merci encore!

Avec plaisir :wink:

Haut

Page 1 sur 1

[ 9 messages ]

Index du forum » Utilisateurs Français » Demandes d'aide

Le fuseau horaire est UTC [Heure d’été]

Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 2 invité(s)

Vous ne pouvez pas publier de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas insérer de pièces jointes dans ce forum