[ar] [ca] [cpf] [de] [en] [es] [fr] [it]

Ce forum d’entraide est recommandé pour les utilisateurs et utilisatrices occasionnels de SPIP (Système de publication pour l’Internet). Avant de poser une question, faites une recherche sur ce site, consultez les liens utiles. Si vous ne trouvez pas de réponse, postez votre message dans la rubrique appropriée, avec un titre explicite.

Sujets : 24108 Sujets résolus :  39 %

61 visiteurs en ce moment


Accueil > Forums de discussion >  Création de squelettes > Galerie d'image lightbox slider adaptable

Galerie d'image lightbox slider adaptable

par Jhessy - 11 juillet 17:36 - Réponse(s) : 2

Bonjour,
Je voudrais créer une galerie d’image en lightbox slider et l’intégrer dans les articles, rubriques... de SPIP, pour qu’avant de publier n’importe quel article, on a la possibilité de présenter une galerie d’image avec notre article, sur la même page.
Le but c’est qu’on a les images en tout petit sur la page rassemblé dans un carré ou un rectangle (un coin de la page quoi). Mais quand on clique sur une image, ça agrandit l’image (un lightbox) et on a la possibilité de changer de slide (avec des flèches de changement d’images : gauche/droite).

Je vous met le code de la galerie que j’ai fait pour vous donnez une petite idée (il y a une partie HTML et une partie CSS) :

LA PARTIE HTML :

  • Description de l'image
  • Description de l'image
  • Description de l'image
  • Description de l'image
  • Description de l'image IDGBVIJBUIVGDUJCBUYCGD7YBCUYDFG7YDBUYGD7YFGYDGY
  • Description de l'image

LA PARTIE CSS :

*margin:0 ;padding:0 ;-webkit-box-sizing:border-box ;box-sizing:border-box
.diapo
display:flex ;
flex-direction:column ;
align-items:center ;
margin:2rem auto

.diapo limargin-top:1rem

.diapo li a img
display:flex ;
max-width:220px ;
border:3px solid white ;
box-shadow:0 0 5px hsla(0,0%,0%,.4)

/*lightbox*/

/*description image*/
.des
display:block ;
position:absolute ;
bottom :-100% ;
padding:10px ;
color :#fff ;
font-size:1rem ;
text-align:center ;
background:hsla(0,0%,0%,.5) ;
width:100% ;
min-height:100px

/*boutons suivant et precedent lightbox*/
.prece,
.suiva
display:none ;
text-decoration:none ;
opacity :.6 ;
z-index:2 ;
font-size:54px ;
position:absolute ;
color :#fff ;
top:45%

.suivaright:10%
.preceleft:10%

.suiva:before
content : ’’ ;
position : absolute ;
top : -70px ;
width : 40px ;
height : 40px ;
border-top : solid 5px currentColor ;
border-right : solid 5px currentColor ;
-webkit-transform : rotate(45deg) ;
transform : rotate(45deg) ;

.prece:before
content : ’’ ;
position : absolute ;
top : -70px ;
width : 40px ;
height : 40px ;
border-top : solid 5px currentColor ;
border-right : solid 5px currentColor ;
-webkit-transform : rotate(-135deg) ;
transform : rotate(-135deg) ;

.prece:hover,.suiva:hovertransition :.8s ;opacity:1

/*fermeture lightbox */
.ferm
display:none ;
text-decoration:none ;
color :#fff ;
position:absolute ;
top:0 ;
right:0 ;
font-size:42px ;
padding:20px

.ferm:before
content : ’’ ;
position : absolute ;
top : 50px ;
right : 50px ;
width : 41px ;
height : 5px ;
background-color : currentColor ;
-webkit-transform : rotate(-45deg) ;
transform : rotate(-45deg) ;

.ferm:after
content : ’’ ;
position : absolute ;
top : 50px ;
right : 50px ;
width : 41px ;
height : 5px ;
background-color : currentColor ;
-webkit-transform : rotate(45deg) ;
transform : rotate(45deg) ;

/*fin fermeture lightbox */

/*design image et effet lightbox */
.trans-imagewidth:0 ;height:0 ;position:fixed ;overflow:hidden ;left:0 ;top:0 ;min-height:100% ;z-index:1 ;background:hsla(0,0%,0%,.8)
.trans-image imgdisplay:none ;top:20% ;position:absolute ;left:53% ;margin-left :-150px ;border:5px solid #fff
.trans-image:targetwidth:100% ;height:100%
.trans-image:target > .prece,
.trans-image:target > .suiva,
.trans-image:target > img,
.trans-image:target > .ferm
display:block ;
animation:effet .4s ease-in-out .4s backwards ;
- webkit-animation:effet .4s ease-in-out .4s backwards

.trans-image:target > .prece,
.trans-image:target > .suivaanimation-delay :.6s ;-webkit-animation-delay :.6s

.trans-image:target > .desanimation:effet1 .4s .6s forwards ;-webkit-animation:effet1 .4s .6s forwards

/*animations*/

@keyframes effet
0%transform:scale(0)
50%transform:scale(1.2)
100%transform:scale(1)

@-webkit-keyframes effet
0%opacity:0 ;-webkit-transform:scale(0)
80%-webkit-transform:scale(1.2)
100%opacity:1 ;-webkit-transform:scale(1))

@keyframes effet1100%bottom:0

@-webkit-keyframes effet1100%bottom:0

/*fin animations*/

@media screen and (min-width:37.5rem)
.diapo
display:flex ;
flex-flow:row wrap ;
justify-content:center

.diapo li
margin-right:auto ;
margin-left:auto ;
list-style-type : none ;

Je vous prie de m’aider car ça fait 4 jr que je suis bloqué dessus.

Jhessy.


  • Bonjour,

    Le portfolio des articles de SPIP a exactement ce fonctionnement, il ne te convient pas ?

    Il me semble qu’il y a aussi un plugin qui permet de mettre plusieurs portfolio dans un même article.


  • < #2 Galerie d'image lightbox slider adaptable ˆ
    par Jhessy - 12 juillet 09:57

    Bonjour Philivert,

    Je sais que le portfolio le fait déjà mais je dois faire cela de cette manière la car c’est dans le cahier des charges de mon stage.

    Et comme mon problème (en générale) c’est l’intégration de nouveau programme, si je puis le dire comme ça, sur le site ; cela m’aiderait bien de connaitre la démarche (la technique quoi) car j’ai d’autres programmes a mettre sur le site.

    En gros j’ai des programmes a mettre sur le site SPIP ; pour les codes ce n’est pas trop un problème. Mais adapter ce code en SPIP pour pouvoir le mettre sur le site dans n’importe quel endroit (des articles, page d’accueille, etc), c’est là mon plus gros problème.

    Si vous pouvez m’aider tout d’abord a mettre la galerie sur le site svp et par la suite a mettre n’importe quel programme sur le site, vous me serai un grand aide pour rattraper le retard que j’ai pris dans mon cahier de charge.

    Cordialement.




Répondre à la question

« Galerie d’image lightbox slider adaptable »

Mots-clés

Vous pouvez étiqueter cette page de forum avec les mots-clés qui vous semblent les plus appropriés ; ils permettront aux prochains visiteurs du site de mieux se repérer :


Installation, mise à jour

Utilisation de l’espace privé

Administration, gestion, configuration du site

Créer ses squelettes

Qui êtes-vous ?

  • creer ou bien modifier son article côté public via un modèle

    par Laëtitia
    22 juillet 18:16

    Résolu - Réponse(s) : 4

    Je remarque une chose, si il y a 1 document dans le portfolio du rédacteur il peut en charger d’autres sur sa page publique, mais c’est quand il n’y en a pas encore que le chargement ne se fait pas (...)

  • afficher valeurs par ordre croissant

    par Didine
    20 juillet 08:47

    Pas de réponse

    Bonjour, j’utilise le plugin champs supplémentaires. Je récupère dans une liste le contenu de certains champs pour faire un formulaire de tri. Tout fonctionne correctement, cependant dans le select (...)

  • pb spip/spipr et test robots google

    par Didine
    19 juillet 20:07

    Résolu - Réponse(s) : 7

    Bonjour, je suis désolée mais le problème est de retour sur ce site alors que ça fonctionnait après notre échange. Le problème se pose sur plusieurs sites SPIP... peut-être est-ce dû aux modifications (...)

  • Probleme avec mediabox spip3.1.6

    par b_b
    18 juillet 15:28

    Réponse(s) : 6

    Voilà pourquoi je demandais un lien à chti47 :) Sans quoi on va tous passer du temps à jouer aux devinettes, alors que ça pourrait être réglé en 5 minutes (ce qui ferait gagner du temps aux personnes (...)

  • Appeler squelette

    par Mickael
    17 juillet 19:26

    Résolu - Réponse(s) : 2

    Ok, effectivement j’ai des articles qui ont perdu leur affectation :s, du coup je me retrouve avec une rubrique vide... Merci beaucoup

  • Update de la table auteurs

    par Luc
    17 juillet 11:25

    Réponse(s) : 3

    Merci, mais en fait je n’ai aucun problème à afficher les auteurs connectés en récupérant les infos de la table auteurs ; ce que je cherche, c’est faire en sorte que les auteurs connectés updatent la (...)

  • Galerie d'image lightbox slider adaptable

    par Jhessy
    12 juillet 09:57

    Réponse(s) : 2

    Bonjour Philivert, Je sais que le portfolio le fait déjà mais je dois faire cela de cette manière la car c’est dans le cahier des charges de mon stage. Et comme mon problème (en générale) c’est (...)

  • plugin SAISIES & messages d'erreur

    par Keny972
    7 juillet 14:57

    Pas de réponse

    Bonjour, J’utilise en local le plugin SAISIES pour gérer un formulaire de création d’objet éditorial. Je cherche comment ajouter à un champ SAISIES une span message_erreur ? Pas le message (...)

  • INCLUDE et cache

    par Erka
    6 juillet 18:23

    Résolu - Réponse(s) : 4

    Problème résolu : https://www.mail-archive.com/spip@rezo.net/msg72338.html

  • Problème recuperation site en ligne en local

    par Pathé
    6 juillet 17:07

    Résolu - Réponse(s) : 13

    Problème résolu merci !

  • Messages : 29323
  • 8200 43 %
  • Poser une nouvelle question