CMS Automne
http://www.automne-cms.org/forum/

Changement d'image toutes les secondes
http://www.automne-cms.org/forum/viewtopic.php?f=2&t=651		 Page 1 sur 1
Auteur:  totosh [ Mar Mai 25, 2010 1:55 pm ]
Sujet du message:  Changement d'image toutes les secondes
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.
Auteur:  Frank [ Mar Mai 25, 2010 2:26 pm ]
Sujet du message:  Re: Changement d'image toutes les secondes
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
Auteur:  totosh [ Mer Mai 26, 2010 8:27 am ]
Sujet du message:  Re: Changement d'image toutes les secondes
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?
Auteur:  Frank [ Mer Mai 26, 2010 9:13 am ]
Sujet du message:  Re: Changement d'image toutes les secondes
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.
Auteur:  totosh [ Mer Mai 26, 2010 1:38 pm ]
Sujet du message:  Re: Changement d'image toutes les secondes
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>   
Auteur:  Frank [ Mer Mai 26, 2010 3:42 pm ]
Sujet du message:  Re: Changement d'image toutes les secondes
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> 
Auteur:  Julien Breux [ Mer Mai 26, 2010 9:18 pm ]
Sujet du message:  Re: Changement d'image toutes les secondes
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> 
Auteur:  totosh [ Jeu Mai 27, 2010 10:27 am ]
Sujet du message:  Re: Changement d'image toutes les secondes
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!
Auteur:  Julien Breux [ Jeu Mai 27, 2010 1:11 pm ]
Sujet du message:  Re: Changement d'image toutes les secondes
totosh a écrit:
Merci encore!

Avec plaisir :wink:
Page 1 sur 1 Le fuseau horaire est UTC [Heure d’été]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/