Galerie photo tout SPIP

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Plusieurs contribs proposent déja un diaporama ou une galerie d’images, celle-ci à la particularité de ne pas utiliser le javascript ou le PHP.

Le cahier des charges

On se propose de réaliser un diaporama comme sur le site suivant

On trouve sur ce diaporama
-  5 miniatures ;
-  des flèches de navigation permettant d’accéder directement aux premières et dernières images ainsi qu’à la précédente et la suivante ;
-  une image en grand format.

Un clic sur une miniature entraine l’affichage de celle-ci et un décalage des miniatures afin que la miniature de l’image affichée se retrouve au centre (sauf bien sur si l’on se trouve à une extrémité du diaporama.

Les boucles

<div class="centre">

<p>
     <BOUCLE_fleches(DOCUMENTS){id_article}{par id_document}{mode=document}>
        [(#COMPTEUR_BOUCLE|=={1}|?{' ',''})
   	<a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,1})]" title="[(#TITRE)]">
        <img src='#DOSSIER_SQUELETTE/img_nav/start.gif' />
	</a>
        ]

        [(#COMPTEUR_BOUCLE|incremente|=={#ENV{compteur}}|?{' ',''})
   	<a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_fleches:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">
        <img src='#DOSSIER_SQUELETTE/img_nav/previous.gif' />
	</a>
        ]

        [(#COMPTEUR_BOUCLE|decremente|=={#ENV{compteur}}|?{' ',''})
   	<a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_fleches:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">
        <img src='#DOSSIER_SQUELETTE/img_nav/next.gif' />
	</a>
        ]

        [(#COMPTEUR_BOUCLE|=={#TOTAL_BOUCLE}|?{' ',''})
   	<a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_fleches:TOTAL_BOUCLE})]" title="[(#TITRE)]">
        <img src='#DOSSIER_SQUELETTE/img_nav/end.gif' />
	</a>
        ]
     </BOUCLE_fleches>
</p>
</div>

<hr />
<div class="centre"><p>

<BOUCLE_zoom(DOCUMENTS){id_document}{mode=document}>
	[(#FICHIER|reduire_image{500})]<br />[(#TITRE)]<br />[(#DESCRIPTIF)]
</BOUCLE_zoom>
</B_zomm>

        <BOUCLE_first(DOCUMENTS){0,1}{id_article}{mode=document}>
	         [(#FICHIER|reduire_image{500})]<br />[(#TITRE)]<br />[(#DESCRIPTIF)]
	</BOUCLE_first>
<//B_zoom>
</p></div>
<hr />

<BOUCLE_miniatures(DOCUMENTS){id_article}{par id_document}{mode=document}
           {(#ENV{compteur}|moins5),7}{doublons A}>
</BOUCLE_miniatures>
</B_miniatures>
<BOUCLE_5-miniatures(DOCUMENTS){!par id_document}{0,5}{!doublons A}>
   <BOUCLE_inversion(DOCUMENTS){id_document}{doublons Cinq}>
   </BOUCLE_inversion>
</BOUCLE_5-miniatures>
</B_5-miniatures>

     <B_doc>
<div class="centre">
<p>
     <BOUCLE_doc(DOCUMENTS){id_article}{par id_document}{mode=document}>
        <B_affichage>
        <BOUCLE_affichage(DOCUMENTS){id_document}{!doublons Cinq}>
	    <a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_doc:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">
            [(#LOGO_DOCUMENT)]
	    </a>
          </BOUCLE_affichage>
          </B_affichage>

     [(#ENV{compteur}|=={1}|?{' ',''})
        [(#_doc:COMPTEUR_BOUCLE|=={4}|?{' ',''})
	    <a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_doc:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">
            [(#LOGO_DOCUMENT)]
	    </a>
        ]
         [(#_doc:COMPTEUR_BOUCLE|=={5}|?{' ',''})
	    <a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_doc:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">
            [(#LOGO_DOCUMENT)]
	    </a>
        ]
      ]
      [(#ENV{compteur}|=={2}|?{' ',''})
         [(#_doc:COMPTEUR_BOUCLE|=={5}|?{' ',''})
	    <a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_doc:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">
            [(#LOGO_DOCUMENT)]
	    </a>
         ]
      ]
      </BOUCLE_doc>
      </B_doc>
</p>
</div>

Quelques commentaires

Les boucles suivantes utilisent les balises :

  • #ENV
    qui va nous permettre de récupérer dans l’url le rang dans la boucle du document à afficher.
  • #TOTAL_BOUCLE
    qui retourne le nombre de résultats trouvés par la boucle
  • #COMPTEUR_BOUCLE
    qui nous donne l’itération actuelle de la liste
  • #SELF
    qui permet de récupérer l’url de la page actuelle, à laquelle on ajoute de nouveaux paramètres avec le filtre
    |parametre_url

Les différentes valeurs de ces balises sont comparées pour gérer l’affichage des différentes miniatures et des flèches de navigation.

Détaillons maintenant les boucles :

-  Pour les valeurs de n comprisent entre 3 et total des miniatures - 2, on souhaite afficher les 5 miniatures dans l’ordre suivant :

<miniature n-2>, <miniature n-1>, <miniature n>,<miniature n+1>, <miniature n+2>

La miniature n étant celle affichée dans le diaporama.

-  Pour les valeurs de n inférieures à 3, on doit afficher :

<miniature 1>, <miniature 2>, <miniature 3>,<miniature 4>, <miniature 5>

-  Pour les 3 dernières valeurs de n on doit afficher :

<miniature total-4>, <miniature total-3>, <miniature total-2>,<miniature total-1>, <miniature total>
<BOUCLE_miniatures(DOCUMENTS){id_article}{par id_document}{mode=document}
           {(#ENV{compteur}|moins5),7}{doublons A}>
</BOUCLE_miniatures>

Cette première boucle permet de générer les 5 miniatures à afficher à partir de la valeur courante du compteur #ENV{compteur} récupérées dans l’Url.
La boucle contient le critère {(#ENV{compteur}|moins5),7} qui permet d’extraire de la liste des documents de l’article 7 documents.

moins5 est un filtre programmé (voir plus bas) dans mes fonctions.php3 qui permet de décompter de 5 la valeur courante de #ENV{compteur} ainsi :

  1. si #ENV{compteur}= 6 , Spip applique le filtre suivant {(6-5,7} c’est à dire {(1,7}, il extrait donc 7 documents de n=1 = n=7.
  2. si #ENV{compteur}= total des miniatures , Spip applique le filtre suivant {(total-5,7}, Spip ici ne peut extraire que 5 documents de la boucle, les 5 derniers.
  3. si #ENV{compteur}= 1 , Spip applique le filtre suivant{(-4,7} il n’affiche donc que les 3 premiers documents.

Pour le premier cas, il faut supprimer les deux premiers documents, c’est l’objet de la deuxième boucle

<BOUCLE_5-miniatures(DOCUMENTS){!par id_document}{0,5}{!doublons A}>
   <BOUCLE_inversion(DOCUMENTS){id_document}{doublons Cinq}>
   </BOUCLE_inversion>
</BOUCLE_5-miniatures>

Le deuxième cas correspond à l’affichage souhaité.

Pour obtenir l’affichage désiré avec le troisième cas, il est nécessaire de rajouter 2 miniatures

Dans tous les cas, les miniatures à afficher sont stockées dans {doublons cinq}

La troisième boucle doit à la fois permettre de générer la valeur du compteur et n’autoriser que l’affichage des 5 miniatures choisies.
Elles est constituée de deux boucles,
-  la première :

<BOUCLE_doc(DOCUMENTS){id_article}{par id_document}{mode=document}> 

balaie la totalité des documents, elle permet de générer la valeur courante du compteur &compteur=#_doc:COMPTEUR_BOUCLE que l’on va transmettre dans l’Url
-  la deuxième :

<BOUCLE_affichage(DOCUMENTS){id_document}{!doublons Cinq}>

limite l’affichage aux miniatures sélectionnées

On remarquera dans cette boucle l’URL passée

<a <a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_doc:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">

La balise #SELF avec le filtre |parametre_url permet de reconstruire l’url de la page courante avec les bons paramètres, par exemple, si on ajoute la galerie sur la page article, on aura l’url
suivante :

href="article.php3?id_article=#ID_ARTICLE&id_document=#ID_DOCUMENT&compteur=#_doc:COMPTEUR_BOUCLE" title="[(#TITRE)]">

On passe à la fois, l’id_article, id_document et la valeur du compteur.

On doit aussi dans ces deux boucles compléter l’affichage des miniatures manquantes pour les deux premières valeurs de #ENV{compteur}.

On a choisit ici, de réaliser un test sur la valeur de #ENV{compteur} et de #_doc:COMPTEUR_BOUCLE qui peut se lire

SI #ENV{compteur}=2
ALORS
SI #_doc:COMPTEUR_BOUCLE=5 ALORS afficher la miniature 5
SINON rien
      [(#ENV{compteur}|=={2}|?{' ',''})
         [(#_doc:COMPTEUR_BOUCLE|=={5}|?{' ',''})
	    <a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_doc:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">
            [(#LOGO_DOCUMENT)]
	    </a>
         ]
      ]

De la même manière, on détermine les miniatures à ajouter si le compteur vaut 1

     [(#ENV{compteur}|=={1}|?{' ',''})
        [(#_doc:COMPTEUR_BOUCLE|=={4}|?{' ',''})
	    <a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_doc:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">
            [(#LOGO_DOCUMENT)]
	    </a>
        ]
         [(#_doc:COMPTEUR_BOUCLE|=={5}|?{' ',''})
	    <a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_doc:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">
            [(#LOGO_DOCUMENT)]
	    </a>
        ]
      ]

soit en littéral

SI #ENV{compteur}=1
ALORS
SI #_doc:COMPTEUR_BOUCLE=4 ALORS afficher la miniature 4
SI #_doc:COMPTEUR_BOUCLE=5 ALORS afficher la miniature 5
SINON rien

Affichage des flèches

L’affichage des flèches est obtenue grace à la boucle suivante :

     <BOUCLE_fleches(DOCUMENTS){id_article}{par id_document}{mode=document}>
        [(#COMPTEUR_BOUCLE|=={1}|?{' ',''})
   	<a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,1})]" title="[(#TITRE)]">
        <img src='#DOSSIER_SQUELETTE/img_nav/start.gif' />
	</a>
        ]

        [(#COMPTEUR_BOUCLE|incremente|=={#ENV{compteur}}|?{' ',''})
   	<a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_fleches:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">
        <img src='#DOSSIER_SQUELETTE/img_nav/previous.gif' />
	</a>
        ]

        [(#COMPTEUR_BOUCLE|decremente|=={#ENV{compteur}}|?{' ',''})
   	<a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_fleches:COMPTEUR_BOUCLE})]" title="[(#TITRE)]">
        <img src='#DOSSIER_SQUELETTE/img_nav/next.gif' />
	</a>
        ]

        [(#COMPTEUR_BOUCLE|=={#TOTAL_BOUCLE}|?{' ',''})
   	<a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,#_fleches:TOTAL_BOUCLE})]" title="[(#TITRE)]">
        <img src='#DOSSIER_SQUELETTE/img_nav/end.gif' />
	</a>
        ]
     </BOUCLE_fleches>

Cette boucle à la même structure que la boucle _doc, c’est à dire qu’elle balaie la totalité de documents de l’article, l’affichage des résultats lui est conditionné par la valeur de #COMPTEUR_BOUCLE si :
-   #COMPTEUR_BOUCLE = 1 on affiche la fléche start ;
-   #COMPTEUR_BOUCLE = #TOTAL_BOUCLE on affiche la flèche end
-   #COMPTEUR_BOUCLE +1 = compteur on affiche la flèche previous
-   #COMPTEUR_BOUCLE -1 = compteur on affiche la flèche next

Affichage de l’image sélectionnée

La toute dernière partie permet l’affichage de l’image sélectionnée (id_document), si aucun document n’est sélectionné, on affiche le premier.

On notera des les comparaisons les deux filtres |decremente et |incremente qui permettent comme leur nom l’indique de rajouter ou de soustraire 1 à la valeur passée en argument. ces deux fonctions doivent être ajoutées dans mes_fonctions.php3

<BOUCLE_zoom(DOCUMENTS){id_document}{mode=document}>
	[(#FICHIER|reduire_image{500})]<br />[(#TITRE)]<br />[(#DESCRIPTIF)]
</BOUCLE_zoom>
	<BOUCLE_first(DOCUMENTS){0,1}{id_article}{mode=document}>
	         [(#FICHIER|reduire_image{500})]<br />[(#TITRE)]<br />[(#DESCRIPTIF)]
	</BOUCLE_first>
<//B_zoom>

Le fichier diaporama_fonctions.php3

Le fichier diaporama_fonctions.php3 doit être placé avec le squelette et déclare les nouveaux filtres :

<?php
function moins5 ($texte){
    $s="";
    $s=$texte-5;
    return $s;
}
function incremente($texte) {
    $s="";
    $s=$texte+1 ;
    return $s;
}
function decremente($texte) {
    $s="";
    $s=$texte-1 ;
    return $s;
}
?>

Appel de la procédure diaporama

Vous pouvez directement intégrer cette procédure dans votre squelette article.html, il n’y a alors aucune précaution particulière. Il est souvent préférable pour des questions de lisibilité du squelette d’appeler celle ci via un <INCLURE.....> , il faut alors prendre soin de passer d’un inclure à l’autre la variable compteur passée dans l’url. On écrira donc dans article.html :

INCLURE(page.php3){fond='diaporama'}{id_article}{id_document}{compteur}>

en passant, à la fois :
-  id_article : l’article à traiter,
-  id_document : le document à afficher,
-  compteur : le rang courant de l’image dans la liste des images

Si vous avez plusieurs <INCLURE(.......   en cascade, il faudra pour chacun rappeler chacun des arguments.

Remarque : pour que l’affichage soit correcte dès le premier appel, c’est à dire avec 5 miniatures, il est souhaitable d’imposer la première fois la valeur de compteur, on peut donc écrire :

          [(#ENV{compteur}|>{0}|?{' ',''})
           <INCLURE(page.php3){fond='diaporama'}{id_article}{id_document}{compteur}>]
          [(#ENV{compteur}|>{0}|?{'',' '})
           <INCLURE(page.php3){fond='diaporama'}{id_article}{id_document}{compteur='1'}>]

Les tests permettent de vérifier que la valeur passée dans l’Url est numérique (en fait qu’elle existe) si c’est le ca, l’appel est normal, si elle n’existe pas, on impose la valeur 1.

Evolutions et aménagements

Les trois boucles, génération des 5 miniatures, génération de flèches de névigation et affichage de l’image étant indépendantes, il est possible :
-  de supprimer les miniatures et conserver uniquement la navigation avec les flèches ;
-  de supprimer les flèches de navigation ;
-  de positionner différement les miniatures et les flèches de navigation.

remarque : les images de navigation viennent de la contrib Encore un album photo

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom