4
Indiquez l’intérêt que vous portez à cette question
0

Galerie d’image lightbox slider adaptable

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.