portfolio avec pagination et flèches

Général
1

Bonjour

Pour le site en construction

Avec SPIP 3.1.3 et un squelette assez semblable à la dist, j’ai mis dans un article, au-dessus de la zone de texte, [(#INCLURE{fond=inclure/documents,id_article,id_rubrique=’’,env})]

puis dans le aside :

<B_documents_portfolio>
#ANCRE_PAGINATION

#PAGINATION{precedent_suivant}

Le tout fonctionne bien.

Avec font-awesome, j’aimerais remplacer précédent et suivant par des flèches.

De plus, j’aimerais mettre «précédent» en haut des vignettes avec fa-chevron-up et «suivant» en-bas des vignettes avec fa-chevron-down

Je me suis essayée en local et cela ne fonctionne pas.

Merci de votre aide

RP

2

J'ai réussi en local mais ce n'est pas très propreet j'ai besoin de conseils.
Merci
Voici:
J'ai activé le plugin pagination simple
J'ai sorti la boucle des vignettes du aside pour la remplacer par
#INCLURE{fond=inclure/navigation,ajax,env}
et dans navigation j'ai ajouté #PAGINATION {simple} en haut
et #PAGINATION {simple2} en bas
ce qui donne:
<B_documents_portfolio>
            #PAGINATION{simple}
             #ANCRE_PAGINATION
            <ul>
        <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {!par date}{doublons}{vu=non}{pagination 4}>[
        <li><a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE
          |url_absolue
            |parametre_url{id_document,#ID_DOCUMENT}
            |ancre_url{documents_portfolio}
            )]';return false;"[ class="(#EXPOSER)"][ title="(#TITRE|attribut_html|couper{80})"]>[(#FICHIER
            |image_passe_partout{150,150}
            |image_recadre{150,150}
            |inserer_attribut{class,spip_logos}
            |inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]</a></li>
        ]</BOUCLE_documents_portfolio>
    </ul>

#PAGINATION{simple2}
<!--#documents_portfolio-->
</B_documents_portfolio>

Puis dans pagination_simple.html j'ai mis un div offscreen pour cacher tout ce qui est dans «suivant» et de même dans pagination_simple2.html pour «précédent»
Voici pour pagination_simple.html
#ENV*{bloc_ancre}
#SET{bornes,#ENV{page_courante}|bornes_pagination{#ENV{nombre_pages},10}}
#SET{premiere, #GET{bornes}|reset}
#SET{derniere, #GET{bornes}|end}
#SET{separateur,#ENV{separateur,'/'}}
<!--le bouton précédent-->
#SET{i,#ENV{page_courante}|moins{1}}
[(#GET{i}|>{0}|?{' '})[
    (#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })
    ][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte=#VAL{'<img style="vertical-align:middle;" src="'}|concat{#CHEMIN{images/fleche_haut.png},'" alt="previous"/>'}}{separateur=''}{url=#ENV{url}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})]
]

<!--la page où l'on se trouve-->
#SET{i,#GET{i}|plus{1}}
[(#GET{i}|<={#GET{derniere}}|?{' ',''})[
    (#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })
    ][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte=#GET{i}}{separateur=''}{url=#ENV{url}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#GET{derniere}})]
]

<!--le nombre total de pages-->
[ (#GET*{separateur}) ]
#ENV{nombre_pages}
<div class="offscreen">
<!--le bouton suivant-->
#SET{i,#ENV{page_courante}|plus{1}}
[(#GET{i}|<={#ENV{nombre_pages}}|?{' '})[
    (#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })
    ][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte=#VAL{'<img style="vertical-align:middle;" src="'}|concat{#CHEMIN{images/next.png},'" alt="next"/>'}}{separateur=''}{url=#ENV{url}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})]
]
    </div>

Enfin j'ai mis un {ajax} dans prive/modeles/paginationitem.html
[(#ENV{num}|=={#ENV{page_courante}}|?{' ',''})
        [<span class="on">(#ENV*{texte})</span>]
    ][(#ENV{num}|=={#ENV{page_courante}}|?{'',' '})
        [<a href='#ENV{url}' class='ajax' rel='nofollow'>(#ENV*{texte})</a>]
    ][(#ENV{num}|<{#ENV{derniere}}|?{#ENV*{separateur},''})]

Maintenant j'aimerais que la grande image s'affiche avec un ajax et je voudrais aussi que les vignettes ne reviennent pas au début si je fais afficher une image disons la 6 ième image

Je voudrais aussi mieux faire tout cela car j'ai vraiment l'impression de bidouiller ou

QUESTION
Y a-t-il un plugin spip qui affiche une grande image et des vignettes à part nivoslider parce que je ne suis pas capable d'enlever les effets de nivoslider et je veux faire changer les grandes images uniquement par les vigenttes et les flèches s'il y en avait mais pas de comportement qui bouge tout seul!

Merci

RP

Le 17-01-23 à 22:50, Renée Picard a écrit :

Bonjour

Pour le site en construction

http://www.reneepicard.ca/jerome_nouveau/spip.php?article48

Avec SPIP 3.1.3 et un squelette assez semblable à la dist, j'ai mis dans un article, au-dessus de la zone de texte, [(#INCLURE{fond=inclure/documents,id_article,id_rubrique='',env})]

puis dans le aside :

<B_documents_portfolio>
#ANCRE_PAGINATION
<ul>
        <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {!par date}{doublons}{vu=non}{pagination 4}>[
        <li><a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE
          |url_absolue
            |parametre_url{id_document,#ID_DOCUMENT}
            |ancre_url{documents_portfolio}
            )]';return false;"[ class="(#EXPOSER)"][ title="(#TITRE|attribut_html|couper{80})"]>[(#FICHIER
            |image_passe_partout{130,130}
            |image_recadre{130,130}
            |inserer_attribut{class,spip_logos}
            |inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]</a></li>
        ]</BOUCLE_documents_portfolio>
</ul>
            #PAGINATION{precedent_suivant}
<!--#documents_portfolio-->
</B_documents_portfolio>

Le tout fonctionne bien.

Avec font-awesome, j'aimerais remplacer précédent et suivant par des flèches.

De plus, j'aimerais mettre «précédent» en haut des vignettes avec fa-chevron-up et «suivant» en-bas des vignettes avec fa-chevron-down

Je me suis essayée en local et cela ne fonctionne pas.

Merci de votre aide

RP

_______________________________________________
liste spip
spip@rezo.net<mailto:spip@rezo.net> - désabonnement : envoyer un mail à spip-off@rezo.net<mailto:spip-off@rezo.net>

Archives : https://www.mail-archive.com/spip@rezo.net/maillist.html

Infos : http://listes.rezo.net/mailman/listinfo/spip

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

3

Bonjour,
Pour répondre à ta question sur le plugin, j’ai utilisé longtemps le plugin diapo (https://contrib.spip.net/Plugin-Diapo)
Il a le même aspect que ce que tu présentes, et il dispose (si ma mémoire est bonne) d’une possibilité de pagination.
Je ne sais pas s’il est compatible avec Spip3, mais une adaptation pour Spip2 avait été faite.
Voir le post sur la page du plugin du 22 janvier 2012 par Jean Christophe Villeneuve pour la modification necessaire.
Bonne journée

============

« Renée Picard » <piegrise@hotmail.ca> a écrit dans le message de news: CY4PR19MB1190C27DF6674CDEA6257854BA740@CY4PR19MB1190.namprd19.prod.outlook.com…

J’ai réussi en local mais ce n’est pas très propreet j’ai besoin de conseils.
Merci
Voici:
J’ai activé le plugin pagination simple
J’ai sorti la boucle des vignettes du aside pour la remplacer par
#INCLURE{fond=inclure/navigation,ajax,env}
et dans navigation j’ai ajouté #PAGINATION {simple} en haut
et #PAGINATION {simple2} en bas
ce qui donne:
<B_documents_portfolio>
#PAGINATION{simple}
#ANCRE_PAGINATION

#PAGINATION{simple2}

</B_documents_portfolio>

Puis dans pagination_simple.html j’ai mis un div offscreen pour cacher tout ce qui est dans «suivant» et de même dans pagination_simple2.html pour «précédent»
Voici pour pagination_simple.html
#ENV*{bloc_ancre}
#SET{bornes,#ENV{page_courante}|bornes_pagination{#ENV{nombre_pages},10}}
#SET{premiere, #GET{bornes}|reset}
#SET{derniere, #GET{bornes}|end}
#SET{separateur,#ENV{separateur,‹ / ›}}

#SET{i,#ENV{page_courante}|moins{1}}
[(#GET{i}|>{0}|?{’ ‹ })[
(#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })
][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte=#VAL{ ›previous‹ }}{separateur= ›'}{url=#ENV{url}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})]
]

#SET{i,#GET{i}|plus{1}}
[(#GET{i}|<={#GET{derniere}}|?{’ ‹ , ›‹ })[
(#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })
][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte=#GET{i}}{separateur= ›'}{url=#ENV{url}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#GET{derniere}})]
]

[ (#GET*{separateur}) ]
#ENV{nombre_pages}

#SET{i,#ENV{page_courante}|plus{1}} [(#GET{i}|<={#ENV{nombre_pages}}|?{' '})[ (#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} }) ][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte=#VAL{'next'}}{separateur=''}{url=#ENV{url}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})] ]

Enfin j’ai mis un {ajax} dans prive/modeles/paginationitem.html
[(#ENV{num}|=={#ENV{page_courante}}|?{’ ‹ , ›‹ })
[(#ENV*{texte})]
][(#ENV{num}|=={#ENV{page_courante}}|?{ ›‹ , › ‹ })
[(#ENV*{texte})]
][(#ENV{num}|<{#ENV{derniere}}|?{#ENV*{separateur}, ›'})]

Maintenant j’aimerais que la grande image s’affiche avec un ajax et je voudrais aussi que les vignettes ne reviennent pas au début si je fais afficher une image disons la 6 ième image

Je voudrais aussi mieux faire tout cela car j’ai vraiment l’impression de bidouiller ou

QUESTION
Y a-t-il un plugin spip qui affiche une grande image et des vignettes à part nivoslider parce que je ne suis pas capable d’enlever les effets de nivoslider et je veux faire changer les grandes images uniquement par les vigenttes et les flèches s’il y en avait mais pas de comportement qui bouge tout seul!

Merci

RP

Le 17-01-23 à 22:50, Renée Picard a écrit :

Bonjour

Pour le site en construction

http://www.reneepicard.ca/jerome_nouveau/spip.php?article48

Avec SPIP 3.1.3 et un squelette assez semblable à la dist, j’ai mis dans un article, au-dessus de la zone de texte, [(#INCLURE{fond=inclure/documents,id_article,id_rubrique=‹  ›,env})]

puis dans le aside :

<B_documents_portfolio>
#ANCRE_PAGINATION

#PAGINATION{precedent_suivant}

Le tout fonctionne bien.

Avec font-awesome, j’aimerais remplacer précédent et suivant par des flèches.

De plus, j’aimerais mettre «précédent» en haut des vignettes avec fa-chevron-up et «suivant» en-bas des vignettes avec fa-chevron-down

Je me suis essayée en local et cela ne fonctionne pas.

Merci de votre aide

RP

_______________________________________________
liste spip
[spip@rezo.net](mailto:spip@rezo.net) - désabonnement : envoyer un mail à  [spip-off@rezo.net](mailto:spip-off@rezo.net)

Archives : [https://www.mail-archive.com/spip@rezo.net/maillist.html](https://www.mail-archive.com/spip@rezo.net/maillist.html)

Infos : [http://listes.rezo.net/mailman/listinfo/spip](http://listes.rezo.net/mailman/listinfo/spip)

Documentation de SPIP : [http://www.spip.net/](http://www.spip.net/)

Irc : de l'aide à toute heure : [http://spip.net/irc](http://spip.net/irc)
Avast logo

L’absence de virus dans ce courrier électronique a été vérifiée par le logiciel antivirus Avast.
www.avast.com
4

Merci
Oui effectivement c'est une présentation comme sur le bon vieux plugin diapo que je veux.
Moi aussi je l'ai très souvent utilisé.
Je n'ai pas pensé l'essayer sous SPIP 3
Je vais essayer.

Mais hier j'ai fini par régler le nivoslider pour qu'il ne gigote pas tout seul.
dans nivoslider_base.html
manualAdvance: [(#GET{manualAdvance}|=={true}|?{true,false})],
J'haïs cela toutes ces bébelles gigotantes.

Le 17-01-25 à 03:45, Patrick a écrit :
Bonjour,
Pour répondre à ta question sur le plugin, j'ai utilisé longtemps le plugin diapo (https://contrib.spip.net/Plugin-Diapo)
Il a le même aspect que ce que tu présentes, et il dispose (si ma mémoire est bonne) d'une possibilité de pagination.
Je ne sais pas s'il est compatible avec Spip3, mais une adaptation pour Spip2 avait été faite.
Voir le post sur la page du plugin du 22 janvier 2012 par Jean Christophe Villeneuve pour la modification necessaire.
Bonne journée

============

"Renée Picard" <piegrise@hotmail.ca<mailto:piegrise@hotmail.ca>> a écrit dans le message de news: CY4PR19MB1190C27DF6674CDEA6257854BA740@CY4PR19MB1190.namprd19.prod.outlook.com<mailto:CY4PR19MB1190C27DF6674CDEA6257854BA740@CY4PR19MB1190.namprd19.prod.outlook.com>...
J'ai réussi en local mais ce n'est pas très propreet j'ai besoin de conseils.
Merci
Voici:
J'ai activé le plugin pagination simple
J'ai sorti la boucle des vignettes du aside pour la remplacer par
#INCLURE{fond=inclure/navigation,ajax,env}
et dans navigation j'ai ajouté #PAGINATION {simple} en haut
et #PAGINATION {simple2} en bas
ce qui donne:
<B_documents_portfolio>
            #PAGINATION{simple}
             #ANCRE_PAGINATION
            <ul>
        <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {!par date}{doublons}{vu=non}{pagination 4}>[
        <li><a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE
          |url_absolue
            |parametre_url{id_document,#ID_DOCUMENT}
            |ancre_url{documents_portfolio}
            )]';return false;"[ class="(#EXPOSER)"][ title="(#TITRE|attribut_html|couper{80})"]>[(#FICHIER
            |image_passe_partout{150,150}
            |image_recadre{150,150}
            |inserer_attribut{class,spip_logos}
            |inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]</a></li>
        ]</BOUCLE_documents_portfolio>
    </ul>

#PAGINATION{simple2}
<!--#documents_portfolio-->
</B_documents_portfolio>

Puis dans pagination_simple.html j'ai mis un div offscreen pour cacher tout ce qui est dans «suivant» et de même dans pagination_simple2.html pour «précédent»
Voici pour pagination_simple.html
#ENV*{bloc_ancre}
#SET{bornes,#ENV{page_courante}|bornes_pagination{#ENV{nombre_pages},10}}
#SET{premiere, #GET{bornes}|reset}
#SET{derniere, #GET{bornes}|end}
#SET{separateur,#ENV{separateur,'/'}}
<!--le bouton précédent-->
#SET{i,#ENV{page_courante}|moins{1}}
[(#GET{i}|>{0}|?{' '})[
    (#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })
    ][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte=#VAL{'<img style="vertical-align:middle;" src="'}|concat{#CHEMIN{images/fleche_haut.png},'" alt="previous"/>'}}{separateur=''}{url=#ENV{url}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})]
]

<!--la page où l'on se trouve-->
#SET{i,#GET{i}|plus{1}}
[(#GET{i}|<={#GET{derniere}}|?{' ',''})[
    (#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })
    ][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte=#GET{i}}{separateur=''}{url=#ENV{url}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#GET{derniere}})]
]

<!--le nombre total de pages-->
[ (#GET*{separateur}) ]
#ENV{nombre_pages}
<div class="offscreen">
<!--le bouton suivant-->
#SET{i,#ENV{page_courante}|plus{1}}
[(#GET{i}|<={#ENV{nombre_pages}}|?{' '})[
    (#SET{item, #GET{i}|moins{1}|mult{#ENV{pas}} })
    ][(#INCLURE{fond=modeles/paginationitem}{num=#GET{i}}{texte=#VAL{'<img style="vertical-align:middle;" src="'}|concat{#CHEMIN{images/next.png},'" alt="next"/>'}}{separateur=''}{url=#ENV{url}|parametre_url{#ENV{debut},#GET{item}}|ancre_url{#ENV{ancre}}}{page_courante=#ENV{page_courante}}{derniere=#ENV{derniere}})]
]
    </div>

Enfin j'ai mis un {ajax} dans prive/modeles/paginationitem.html
[(#ENV{num}|=={#ENV{page_courante}}|?{' ',''})
        [<span class="on">(#ENV*{texte})</span>]
    ][(#ENV{num}|=={#ENV{page_courante}}|?{'',' '})
        [<a href='#ENV{url}' class='ajax' rel='nofollow'>(#ENV*{texte})</a>]
    ][(#ENV{num}|<{#ENV{derniere}}|?{#ENV*{separateur},''})]

Maintenant j'aimerais que la grande image s'affiche avec un ajax et je voudrais aussi que les vignettes ne reviennent pas au début si je fais afficher une image disons la 6 ième image

Je voudrais aussi mieux faire tout cela car j'ai vraiment l'impression de bidouiller ou

QUESTION
Y a-t-il un plugin spip qui affiche une grande image et des vignettes à part nivoslider parce que je ne suis pas capable d'enlever les effets de nivoslider et je veux faire changer les grandes images uniquement par les vigenttes et les flèches s'il y en avait mais pas de comportement qui bouge tout seul!

Merci

RP

Le 17-01-23 à 22:50, Renée Picard a écrit :

Bonjour

Pour le site en construction

http://www.reneepicard.ca/jerome_nouveau/spip.php?article48

Avec SPIP 3.1.3 et un squelette assez semblable à la dist, j'ai mis dans un article, au-dessus de la zone de texte, [(#INCLURE{fond=inclure/documents,id_article,id_rubrique='',env})]

puis dans le aside :

<B_documents_portfolio>
#ANCRE_PAGINATION
<ul>
        <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {!par date}{doublons}{vu=non}{pagination 4}>[
        <li><a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE
          |url_absolue
            |parametre_url{id_document,#ID_DOCUMENT}
            |ancre_url{documents_portfolio}
            )]';return false;"[ class="(#EXPOSER)"][ title="(#TITRE|attribut_html|couper{80})"]>[(#FICHIER
            |image_passe_partout{130,130}
            |image_recadre{130,130}
            |inserer_attribut{class,spip_logos}
            |inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]</a></li>
        ]</BOUCLE_documents_portfolio>
</ul>
            #PAGINATION{precedent_suivant}
<!--#documents_portfolio-->
</B_documents_portfolio>

Le tout fonctionne bien.

Avec font-awesome, j'aimerais remplacer précédent et suivant par des flèches.

De plus, j'aimerais mettre «précédent» en haut des vignettes avec fa-chevron-up et «suivant» en-bas des vignettes avec fa-chevron-down

Je me suis essayée en local et cela ne fonctionne pas.

Merci de votre aide

RP

_______________________________________________
liste spip
spip@rezo.net<mailto:spip@rezo.net> - désabonnement : envoyer un mail à spip-off@rezo.net<mailto:spip-off@rezo.net>

Archives : https://www.mail-archive.com/spip@rezo.net/maillist.html

Infos : http://listes.rezo.net/mailman/listinfo/spip

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

________________________________

________________________________
[Avast logo] <https://www.avast.com/antivirus>

L'absence de virus dans ce courrier électronique a été vérifiée par le logiciel antivirus Avast.
www.avast.com<https://www.avast.com/antivirus>

_______________________________________________
liste spip
spip@rezo.net<mailto:spip@rezo.net> - désabonnement : envoyer un mail à spip-off@rezo.net<mailto:spip-off@rezo.net>

Archives : https://www.mail-archive.com/spip@rezo.net/maillist.html

Infos : http://listes.rezo.net/mailman/listinfo/spip

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

5

Le plugin Diapo peut très bien fonctionner à condition de faire 2 petites modifications.

Je les avais proposées à l’époque à l’auteur mais c’est resté sans suite

Pour ceux que ça intéresse c’est là