Accueil du site > Affichage multimédia > Images > Archives Image, Galerie > Galerie photo tout SPIP

Galerie photo tout SPIP

16 octobre 2005 – par rpapa – 19

3 votes

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 :

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.
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.
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

Vos commentaires

# Le 26 octobre 2005 à 11:28, par Baron Noir En réponse à : Galerie photo tout Spip

Ecxellent ! J’ai adopté la gallerie que je suis en train d’intégrer à la nouvelle mouture de mon site.

Une petite question tout de même : comment modifier la taille des vignettes de la gallerie ? J’ai tenté divers essais avec « reduire_image », sans succès...
- # ^ Le 26 octobre 2005 à 12:41, par rpapa En réponse à : Galerie photo tout Spip
  
  merci
  
  il me semble que tu as réussi à réduire les vignettes (belle cuisine)
- # ^ Le 26 octobre 2005 à 20:14, par Baron Noir En réponse à : Galerie photo tout Spip
  
  Oui, j’ai trouvé, la gallerie n’est pas encore en ligne en fait, celle qui l’est repose sur le squelette standard de Spip 1.8.2. Merci au passage pour le compliment...
  
  Pour la solution, j’ai parametré ainsi l’affichage du logo : [(#LOGO_DOCUMENT||reduire_image120,120)] dans la boucle BOUCLE_affichage(DOCUMENTS)
- # ^ Le 15 novembre 2005 à 14:39, par Philippe Mercier En réponse à : Galerie photo tout Spip
  
  Bonjour,
  merci pour cette contrib,
  Par contre pour les vignettes j’ai besoin d’aide
  je n’arrive pas à les réduires j’ai le message suivant :
  Erreur : filtre « reduire_image120,120 » non défini, _affichage
  
  S’agit t-il bien de la boucle que l’on trouve dans le squelette diaporama ci dessous
  
  <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>
- # ^ Le 15 novembre 2005 à 14:47, par Philippe Mercier En réponse à : Galerie photo tout Spip
  
  Désolé question obsoléte j’avais pourtant cherché pendant plus d’une heure avant de la poser, il suffisai de juste 5 mn de plus pour trouver
  
  dans vote info il manquit un | entre article et reduire voici le bon code
  [(#LOGO_ARTICLE|||reduire_image120,120)]
- # ^ Le 11 décembre 2007 à 17:03, par Jeremie En réponse à : Galerie photo tout Spip
  
  bonjour,
  
  désolé pour ma question qui va paraître simple :
  
  pour creer une galerie à partir de ce squelette comment fait on ?
  
  ce n’est pas un plugin, alors comment ça marche ?
  où installer les fichiers ? avec spip 1.9...? et comment on opère ensuite ?
  
  MERCI !
- # ^ Le 11 décembre 2007 à 22:29, par ? En réponse à : Galerie photo tout Spip
  
  on va dire que cette contrib est un peu viellotte (elle est même en php3)
  
  l’idée est la suivante, tu poses le contenu du zip dans ton répertoire squelettes puis tu appelles le diaporama par un
  
  INCLURE{fond='diaporama'}{id_article}{id_document}{compteur}>
  
  et ça devrait tourner
Répondre à ce message
# Le 27 octobre 2007 à 19:17, par zab En réponse à : Galerie photo tout Spip

Bonjour

j’aime beaucoup ce squelette

J’aimerais par contre pouvoir afficher toutes les vignettes de ma galerie (il y en a 15 au maximum) ; il y a la place, je les mets en dessous (site en reconstruction :

Je n’ai pas trop osé toucher aux paramètres, ils ont l’air très imbriqués les uns dans les autres et pi ça me donne mal à la tête ;-)

merci d’avance

zab
- # ^ Le 27 octobre 2007 à 20:39, par ? En réponse à : Galerie photo tout Spip
  
  l’intéret de ce squelette c’est effectivement d’avoir à la fois une boucle précédent/suivant avec des flèches et 5 vignettes glissantes, s’i c’est pour mettre tes 15 vignettes en bas, e la n’a plus trop de sens
  
  de plus cette solution est rekativement vielle par rapport à l’évolution de spip, au moment de la sortie, la balise pagination n’existait pas et les plugins type thickbox non plus, je pense que maintenant, il est préférable de construire avec c’est outils.
  
  A+
Répondre à ce message
# Le 21 août 2007 à 15:42, par Keuls En réponse à : Galerie photo tout Spip pour menu

Bonjour,
je trouve le plugin très intéressant et j’aurais voulu l’adapter pour en faire un menu par logos d’article avec ce systeme de diaporama. Après pas mal d’essais en changeant le champs de recherche des boucles, je n’ai toujours pas réussi.
Je suis débutant et j’ai un peu de mal à comprendre le fonctionnement du compteur, surtout l’utilité du parametre_url.
Si quelqu’un a une idée sur les modifications à apporter...

Merci...

Répondre à ce message
# Le 13 mai 2006 à 10:10, par c.lhardy En réponse à : Galerie photo tout Spip

J’ai utilisé cette contribution pour faire une galerie d’images, (exemple) avec une présentation légèrement différente (images à droites en colonne et image grande taille qui ouvre l’image en taille réelle.)
Tout cela fonctionne correctement, les vignettes sont générées par GD1 donc pas très joilies, la feuille de style est à affiner pour IE qui ne reconnait pas toutes les balises, mais le résultat est assez satisfaisant pour l’heure.

Cependant, régulièrement, le serveur renvoie un code d’erreur au recalcul de la page ou lors de la mise à jour du fichier diaporama.

Voici le code de l’erreur :

# Erreur(s) dans le squelette * squelettes/diaporama.html, Erreur de compilation"

et dans le corps de l’article :

Warning: Invalid range end in /home/sites/site15/web/inc-compilo.php3 on line 306 Parse error: parse error, expecting `')'' in /home/sites/site15/web/inc-calcul.php3(110) : eval()'d code on line 342

Si on attend quelques heures, l’erreur disparait d’elle même. (le délai de recalcul des pages a été mis à 0 pour article et diaporama)

<table border="0px" align="center"> <tr> <td valign="top"> <B_zoom> <BOUCLE_zoom(DOCUMENTS){id_document}{mode=document}{extension==jpg|png|gif}{doublons}> <div class="titre_petit">[(#TITRE)]</div> <a href="affiche_image.php3?id_document=#ID_DOCUMENT" onclick="window.open(this.href, 'affiche_image', 'height=[(#HAUTEUR)], width=[(#LARGEUR)], top=20, left=20, toolbar=no, menubar=no, location=no, resizable=yes, scrollbar=yes, status=no'); return false;" title="Afficher cette image en taille réelle"> [(#FICHIER|reduire_image{500})]</a><br /><div class="legende_photo">[(#DESCRIPTIF)]</div> </BOUCLE_zoom> </B_zoom> <BOUCLE_first(DOCUMENTS){0,1}{id_article}{mode=document}{extension==jpg|png|gif}{doublons}> <a href="affiche_image.php3?id_document=#ID_DOCUMENT" onclick="window.open(this.href, 'affiche_image', 'height=[(#HAUTEUR)], width=[(#LARGEUR)], top=20, left=20, toolbar=no, menubar=no, location=no, resizable=yes, scrollbar=yes, status=no'); return false;" title="Afficher cette image en taille réelle"> [(#FICHIER|reduire_image{500})]</a><br /><div class="titre_petit">[(#TITRE)]</div><div class="legende_photo">[(#DESCRIPTIF)]</div> </BOUCLE_first> <//B_zoom> <div class="boutons"> <div class="infos_photo"> <B_fleches> Photo [(#ENV{compteur})] sur <B_tot> <BOUCLE_tot(DOCUMENTS){id_article}{mode=document}> </BOUCLE_tot> <?php $tot=#TOTAL_BOUCLE; echo ' '.$tot.'.'; ?> </B_tot2> <br> <BOUCLE_fleches(DOCUMENTS){id_article}{par id_document}{mode=document}{extension==jpg|png|gif}> [(#COMPTEUR_BOUCLE|=={1}|?{' ',''}) <a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE}|parametre_url{id_document,#ID_DOCUMENT}|parametre_url{compteur,1})]" title="Revenir à la première image"> <img src="icones/premier.gif" alt="Première image" /> </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="Afficher l'image précédente"> <img src="icones/precedent2.gif" alt="Image précédente"/> </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="Afficher l'image suivante"> <img src="icones/suivant2.gif" alt="Image suivante"/> </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="Afficher la dernière image"> <img src="icones/dernier.gif" alt="derniére image"/> </a> ] </BOUCLE_fleches> <B_agrandir>  <BOUCLE_agrandir(DOCUMENTS){id_document}{mode=document}> <a href="affiche_image.php3?id_document=#ID_DOCUMENT" onclick="window.open(this.href, 'affiche_image', 'height=[(#HAUTEUR)], width=[(#LARGEUR)], top=20, left=20, toolbar=no, menubar=no, location=no, resizable=yes, scrollbar=yes, status=no'); return false;" title="Afficher l'image dans sa taille originale"> <img src="icones/zoom.gif" width="22" height="22" border="0" alt="zoom sur l'image"></a> <br>Taille réelle : [(#HAUTEUR)] x [(#LARGEUR)] px </div> </BOUCLE_agrandir> </B_agrandir> </td> <td><B_miniatures> <BOUCLE_miniatures(DOCUMENTS){id_article}{par id_document}{mode=document}{extension==jpg|png|gif} {(#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> <BOUCLE_doc(DOCUMENTS){id_article}{par id_document}{mode=document}{extension==jpg|png|gif}> <B_affichage> <BOUCLE_affichage(DOCUMENTS){id_document}{!doublons Cinq}> <li> <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||reduire_image{120})] </a></li> </BOUCLE_affichage> </B_affichage> [(#ENV{compteur}|=={1}|?{' ',''}) [(#_doc:COMPTEUR_BOUCLE|=={4}|?{' ',''}) <li > <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||reduire_image{120})] </a></li> ] [(#_doc:COMPTEUR_BOUCLE|=={5}|?{' ',''}) <li > <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||reduire_image{120})] </a></li> ] ] [(#ENV{compteur}|=={2}|?{' ',''}) [(#_doc:COMPTEUR_BOUCLE|=={5}|?{' ',''}) <li ><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||reduire_image{120})] </a></li> ] ] </BOUCLE_doc> </B_doc> </td> </tr> </table>

(j’ai utilisé un tableau car je n’ai pas réussi a faire ma colonne d’images à droite avec la feuille de style)

voici le code source de la page

Merci de vos avis éclairés...
- # ^ Le 18 juillet 2006 à 14:19, par Mist. GraphX En réponse à : Galerie photo tout Spip
  
  Bonjour j’utilisais cette contrib sous spip 1.8.3 mais depuis le passage en SPIP 1.9 j’obtiens ce message :
  
  Warning : Missing argument 1 for find_in_path() in /home.10.2/mistergrw/www/spip/ecrire/inc/utils.php on line 584
  
  quelqu’un aurais il une tite idée sur la question ??? ;-)
  
  merci d’avance
- # ^ Le 18 juillet 2006 à 16:21, par Mist. GraphX En réponse à : Galerie photo tout Spip
  
  Bon je me répond a moi même, en fait sous SPIP 1.9 déjà il faut remplacer les liens pour les images
  
  #DOSSIER_SQUELETTE(mon_dossier/mon_fichier)
  
  par
  
  #CHEMIN{mon_dossier/mon_fichier}
  
  et tout de suite quand ont oublie pas les {} ça marche beaucoup mieux !!!! ;-)
  
  si ça peut servir a quelqu’un d’aussi distrait que moi ...
Répondre à ce message
# Le 4 janvier 2006 à 14:16, par cedcox En réponse à : Galerie photo tout Spip

Bonjour,

Tout d’abord, merci pour cette contrib. J’adore ce côté tout spip et aussi son côté générique. Je suis en train de l’adapter pour ma future galerie avec quelques options en plus.

Cependant, elle y avait un petit détail qui ne me convenait pas, c’est qu’on ne pouvait pas pointer directement sur une image sans que la variable $compteur perde les pédales. Par exemple, prenons 7 documents avec les id 12,15,23,24,25,34,35. Si on souhaitait arriver directement sur la photo avec id_document=24, $compteur se mettait quand même à 1 et il devenait alors impossible de se balader à gauche.

J’ai donc trouver la solution de se passer de la variable $compteur grace à une boucle :

<BOUCLE_doc_compteur(documents){id_article}'par id_document}{id_document<=#ENV{id_document,"0"}}{mode=document} </BOUCLE_doc_compteur> </B_doc_compteur>

On compte le nombre de document qu’il y’a jusqu’à la photo séléctionnée (incluse). Si on reprend notre exemple de la photo id_document=24, la boucle fera 12,15,23,24 et s’arretera. #_doc_compteur:COMPTEUR_BOUCLE sera alors égal à 4.

Il nous reste plus alors qu’à utiliser [(#_doc_compteur:COMPTEUR_BOUCLE|sinon{1})] à la place $compteur. si la boucle n’a renvoyé aucun résultat alors on remplace par 1, ce qui permet de gérer le cas où aucun id_document n’est passé en paramètre.

Je ne suis pas sûr et certain de la syntaxe car je ne suis pas sur ma machine mais j’espère avoir été compréhensible en expliquant le principe :)

Bonne journée et encore merci à l’auteur de cette contrib !
- # ^ Le 4 janvier 2006 à 14:27, par cedcox En réponse à : Galerie photo tout Spip
  
  arf ! Lire #ENV{compteur} au lieu de $compteur dans mon message... désolé
- # ^ Le 4 janvier 2006 à 14:43, par rpapa En réponse à : Galerie photo tout Spip
  
  place ta contrib dans les variantes
- # ^ Le 4 janvier 2006 à 15:44, par cedcox En réponse à : Galerie photo tout Spip
  
  Euh...oui (faisons semblant de savoir pour passer pour un idiot)...Euh comment on fait déjà ??? ;p
- # ^ Le 4 janvier 2006 à 16:02, par rpapa En réponse à : Galerie photo tout Spip
  
  entre l’article il y a un lien
  - voir et proposer des variantes, c’est un wiki
  
  il doit falloir créer la page
- # ^ Le 4 janvier 2006 à 20:04, par cedcox En réponse à : Galerie photo tout Spip
  
  lol oui, je suis vraiment aveugle, je prépare ça et je poste ! ;)
Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )

Texte de votre message

Ajouter un document

gif, jpg, png

SPIP-Contrib

Galerie photo tout SPIP

Le cahier des charges

Les boucles

Quelques commentaires

Détaillons maintenant les boucles :

Le fichier diaporama_fonctions.php3

Appel de la procédure diaporama

Evolutions et aménagements

Rubriques

Derniers commentaires

Compatibilité

Téléchargement(s)

Archives Image, Galerie

Vos commentaires

Répondre à cet article

Ça discute par ici

Une licence pour un article

Plugin Parrainage

Formulaire de contact libre

Plugin Mot de Passe Compliqué

Navigation AJAX

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN