demande d'aide

Général
1

Bonjour,
Je cherche à faire défiler automatiquement dans une fenêtre pop-up les images d’un album de photos :

<BOUCLE_zoom(DOCUMENTS){id_document}{mode=document}>

[(#FICHIER|image_reduire{720})]

[(#TITRE)]

</BOUCLE_zoom>

Quelqu’un aurait-il une idée ?
Merci d’avance. BS

2

Oh, mais ca c'est une mission pour jquery :slight_smile:

Je ne peux pas t'en dire tellement plus ici, mais cherche de ce coté là.

BoOz

Rue des boulets a écrit :

Bonjour,
Je cherche à faire défiler automatiquement dans une fenêtre pop-up les images d'un album de photos :

<BOUCLE_zoom(DOCUMENTS){id_document}{mode=document}>

[(#FICHIER|image_reduire{720})]<div class="titrerose">[(#TITRE)]</div>

</BOUCLE_zoom>

Quelqu'un aurait-il une idée ?
Merci d'avance. BS

3

Bonsoir,

Le Samedi 5 Août 2006 00:51, BoOz a écrit :

Oh, mais ca c'est une mission pour jquery :slight_smile:

Je ne peux pas t'en dire tellement plus ici, mais cherche de ce coté là.

BoOz

Rue des boulets a écrit :
> Bonjour,
> Je cherche à faire défiler automatiquement dans une fenêtre pop-up les
> images d'un album de photos :
>
> <BOUCLE_zoom(DOCUMENTS){id_document}{mode=document}>
>
> [(#FICHIER|image_reduire{720})]<div class="titrerose">[(#TITRE)]</div>
>
> </BOUCLE_zoom>
>
> Quelqu'un aurait-il une idée ?

J'ai bricolé un truc... sans le popup, mais j'ai le défilement...

Dans le /mes_fonctions.php3:

function affiche_image_div($image,$dimmax=400,$commentaire="Sans commentaire")
{
  // La première variable est l'objet du filtre.
  // Les variables suivantes sont passées ainsi: (#FICHIER|
affiche_image{500,#TITRE})
  // Voir Les filtres de SPIP page 266 de SpipDoc_fr_integrale.pdf (et p.275
pour les paramètres)
  // et le contenu des fonctions de ecrire/inc_filtres.php3
  // Ex.: affdate()

  global $compteur;
  $compteur++;

  $dimimg=getimagesize($image);

  if($dimimg[0]>$dimimg[1]){
    $largimg=$dimmax;
    $hautimg=round($dimimg[1]*$dimmax/$dimimg[0]);
  }
  else{
    $hautimg=$dimmax;
    $largimg=round($dimimg[0]*$dimmax/$dimimg[1]);
  }

  $chaine="<style type='text/css'>#divtmp$compteur{display:none;}</style><div
id='divtmp$compteur'><a href='$image'><img src='$image' width='$largimg'
height='$hautimg' alt='$commentaire' title='$commentaire'
border='0' /></a></div>";
  return $chaine;
}

Et j'ai fait une page /squelettes/diaporama.html contenant ceci:

<BOUCLE_article_principal(ARTICLES) {id_article}>
<h1>[(#TITRE)]</h1>

<BOUCLE_zoom(DOCUMENTS){mode=document}>
[(#FICHIER|affiche_image_div{500,#TITRE})]
</BOUCLE_zoom>
</BOUCLE_article_principal>

<script type='text/javascript' language='JavaScript'>

  var cpt=0;

  function change_div(){
    // Tous les DIV d'images étant cachées au départ,
    // on saute le premier tour pour ce qui est de cacher...
    if(cpt!=0){
      // On cache le DIV précédemment affiché:
      eval("document.getElementById('divtmp"+cpt+"').style.display='none'");
    }
    // On teste l'existence du DIV suivant.
    // S'il n'existe pas, on boucle en revenant à 1.
    suivant=cpt+1;
    if(eval("document.getElementById('divtmp"+suivant+"')")){
      cpt++;
    }
    else{
      cpt=1;
    }
    // On affiche l'image suivante:
    eval("document.getElementById('divtmp"+cpt+"').style.display='block'");

    setTimeout("change_div()",2000);
  }

  change_div();
</script>

Dans mon test, j'ai appelé le diaporama depuis la
page /squelettes/rubriques.html (celle de dist un peu modifiée) en jouant sur
un mot-clé, le filtre {doublons} et une boucle d'exclusion.
Voici les modifs:

<BOUCLE_articles_exclus(ARTICLES) {id_rubrique} {par titre}
{titre_mot=diaporama} {doublons}></BOUCLE_articles_exclus>

<BOUCLE_articles_recents(ARTICLES) {id_rubrique} {par titre} {doublons}>
  <h2><a href="#URL_ARTICLE" [title="(#DESCRIPTIF|textebrut|
entites_html)"]>#TITRE</a></h2>
  <div class="detail">
  [(#DATE|nom_jour)] [(#DATE|affdate)]
  <B_auteurs_recents1><:par_auteur:> <BOUCLE_auteurs_recents1(AUTEURS)
{id_article} {", "}>#NOM</BOUCLE_auteurs_recents1>
  </div>
  <br />
</BOUCLE_articles_recents>

<B_articles_diapo_recents>
<b>Diaporamas:</b> <br />
<BOUCLE_articles_diapo_recents(ARTICLES) {id_rubrique} {par titre}
{titre_mot=diaporama}>
  <INCLURE(article_diaporama.php3){id_article}>
</BOUCLE_articles_diapo_recents>
</B_articles_diapo_recents>

Et la page /article_diaporama.php3 contient:

<?php

$fond = "diaporama";
$delais = 24 * 3600;

include ("inc-public.php3");

?>

Cela devra sans doute être adapté... ne serait-ce que parce que ce n'est pas
en popup... et puis parce que je me suis peut-être compliqué la vie (je ne
maitrise pas les boucles et arcanes de SPIP).

Cordialement.
--
Stéphane.

4

Re-bonsoir,

J'ai trouvé une solution pour le popup...
J'ai remplacé le contenu de ma page diaporama.html appelée en INCLURE par
rubrique.html par:

<BOUCLE_article_principal(ARTICLES) {id_article}>
<a href="#"
onClick="window.open('popup_diaporama.php3?id_article=#ID_ARTICLE','','location=no,
width=500, height=500, menubar=no, status=no, scrollbars=no,
menubar=no');">[(#TITRE)]</a>
</BOUCLE_article_principal>

Et la page popup_diaporama.php3 utilise le squelette popup_diaporama.html
suivant:

<BOUCLE_article_principal(ARTICLES) {id_article}>
<html>
<head>
  <title>[(#TITRE)]</title>
</head>
<body>
  <h1>[(#TITRE)]</h1>

  <BOUCLE_zoom(DOCUMENTS){mode=document}>
  [(#FICHIER|affiche_image_div{500,#TITRE})]
  </BOUCLE_zoom>
  </BOUCLE_article_principal>

  <script type='text/javascript' language='JavaScript'>

    var cpt=0;

    function change_div(){
      // Tous les DIV d'images étant cachées au départ,
      // on saute le premier tour pour ce qui est de cacher...
      if(cpt!=0){
        // On cache le DIV précédemment affiché:
        eval("document.getElementById('divtmp"+cpt+"').style.display='none'");
      }
      // On teste l'existence du DIV suivant.
      // S'il n'existe pas, on boucle en revenant à 1.
      suivant=cpt+1;
      if(eval("document.getElementById('divtmp"+suivant+"')")){
        cpt++;
      }
      else{
        cpt=1;
      }
      // On affiche l'image suivante:
      eval("document.getElementById('divtmp"+cpt+"').style.display='block'");

      setTimeout("change_div()",2000);
    }

    change_div();
  </script>
</body>
</html>

Il faut peut-être adapter un peu les dimensions, remettre des CSS,...

Cordialement.
--
Stéphane.