Connexion | Inscription | FAQ
Anonymous

gallerie css

+ Publier une réponse

2 messages Page 1 sur 1


gallerie css

par mati » Mer Oct 08, 2014 8:51 am

Bonjour, j'essaie de faire une gallerie en css.
Mais je bute sur un probleme:
Le menu horizontal "1,2,3" qui fait afficher les thumbs verticaux "b1,b2,b3" fonctionne bien.
La premiere serie de thumbs verticaux "b1" marche aussi bien, ca fait bien apparaitre les images "c1,c2" quand on clique dessus.
Par contre les 2e et 3e series "b2" et "b3" font apparaitre l'image une demie seconde puis disparait et apres ca saute automatiquement sur "b1".
Quelqu'un pourrait-il m'aider? Je mets en piece jointe le zip qui comprend les fichiers html et css + les images test.
Merci de votre aide!

Voici les codes:

<!DOCTYPE html>
<html>

<head>
<title>portfolio graphic design - illustrations Matthieu Rouchouse</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="design6a.css">
<style type="text/css"></style>


</head>
<body>




<div class="gallery">
<div id="b1" class="petitoperator"></div>
<div id="b2" class="petitoperator"></div>
<div id="b3" class="petitoperator"></div>

<div class="petitcontrols">
<a href="#b1" class="petitboutons">1</a>
<a href="#b2" class="petitboutons">2</a>
<a href="#b3" class="petitboutons">3</a>
</div>

<figure class="item">
<div class="thumbnails">
<div id="c1" class="bigoperator"></div>
<div id="c2" class="bigoperator"></div>

<div class="bigcontrols">
<a href="#c1" class="bigboutons"><img class= "box" src="../links/t-1.png" alt=""></a>
<div class="box"></div>
<a href="#c2" class="bigboutons"><img class= "box" src="../links/t-2.png" alt=""></a>
<div class="box"></div>
</div>

<figure class="item2">
<img class="bigbox" src="../links/im-1.png">
<div class="bigbox"></div>
<div class="caption">C1</div>
</figure>

<figure class="item2">
<img class="bigbox" src="../links/im-2.png">
<div class="bigbox"></div>
<div class="caption">C2</div>
</figure>


</div>

<figcaption class="caption">b1</figcaption>
</figure>



<figure class="item">
<div class="thumbnails">
<div id="c3" class="bigoperator"></div>
<div id="c4" class="bigoperator"></div>
<div id="c5" class="bigoperator"></div>

<div class="bigcontrols">
<a href="#c3" class="bigboutons"><img class= "box" src="../links/t-3.png" alt=""></a>
<div class="box"></div>
<a href="#c4" class="bigboutons"><img class= "box" src="../links/t-4.png" alt=""></a>
<div class="box"></div>
<a href="#c5" class="bigboutons"><img class= "box" src="../links/t-5.png" alt=""></a>
<div class="box"></div>
</div>

<figure class="item2">
<img class="bigbox" src="../links/im-3.png">
<div class="bigbox"></div>
<div class="caption">C3</div>
</figure>

<figure class="item2">
<img class="bigbox" src="../links/im-4.png">
<div class="bigbox"></div>
<div class="caption">C4</div>
</figure>

<figure class="item2">
<img class="bigbox" src="../links/im-5.png">
<div class="bigbox"></div>
<div class="caption">C5</div>
</figure>

</div>

<figcaption class="caption">b2</figcaption>
</figure>




<figure class="item">
<div class="thumbnails">
<div id="c6" class="bigoperator"></div>
<div id="c7" class="bigoperator"></div>
<div id="c8" class="bigoperator"></div>
<div id="c9" class="bigoperator"></div>

<div class="bigcontrols">
<a href="#c6" class="bigboutons"><img class= "box" src="../links/t-6.png" alt=""></a>
<div class="box"></div>
<a href="#c7" class="bigboutons"><img class= "box" src="../links/t-7.png" alt=""></a>
<div class="box"></div>
<a href="#c8" class="bigboutons"><img class= "box" src="../links/t-8.png" alt=""></a>
<div class="box"></div>
<div class="box"></div>
<a href="#c9" class="bigboutons"><img class= "box" src="../links/t-9.png" alt=""></a>
<div class="box"></div>
</div>

<figure class="item2">
<img class="bigbox" src="../links/im-6.png">
<div class="bigbox"></div>
<div class="caption">C6</div>
</figure>

<figure class="item2">
<img class="bigbox" src="../links/im-7.png">
<div class="bigbox"></div>
<div class="caption">C7</div>
</figure>

<figure class="item2">
<img class="bigbox" src="../links/im-8.png">
<div class="bigbox"></div>
<div class="caption">C8</div>
</figure>

<figure class="item2">
<img class="bigbox" src="../links/im-9.png">
<div class="bigbox"></div>
<div class="caption">C9</div>
</figure>

</div>
<figcaption class="caption">b3</figcaption>
</figure>


</div>


</body>
</html>




html {
background-color: rgb(242,243,243);
}

body {
margin: 0 auto;
max-width: 1080px;
height:2000px;
font-family: "Verdana", Verdana, Arial, sans-serif;
font-size: 13px;
color: rgb(35,35,35);
background-color: #ffffff;
}

/*
GALLERY 1
*/
.petitcontrols { float: left; position: relative; top:220px; border: 1px solid black; z-index: 6 }
.petitcontrols a { float: left; width: 20px; display: inline; border: 1px solid black; margin-right: 5px;}


.thumbnails {
position: absolute;
top: 0px;
left: 0px;
margin: 0 0 0 0;
font-size: 12px;;
border: 3px solid purple;
}
.thumbnails a {
margin: 0 0 0 0;
display: block;
width: 100%;
height: 100%;
border: 2px solid pink;
}
.thumbnails img {
max-width: 500px;
border: 2px solid green;
}

.petitoperator:target ~ .petitcontrols .petitboutons {
color: rgba(25, 255, 255, 0.4);
}
.petitoperator:target ~ .petitcontrols .petitboutons:hover {
color: rgba(255, 25, 255, 0.8);
}

.gallery .petitoperator:nth-of-type(1):target ~ .item:nth-of-type(1) {
pointer-events: auto; border: 2px solid orange;
opacity: 1;
}
.gallery .petitoperator:nth-of-type(2):target ~ .item:nth-of-type(2) {
pointer-events: auto; border: 2px solid orange;
opacity: 1;
}
.gallery .petitoperator:nth-of-type(3):target ~ .item:nth-of-type(3) {
pointer-events: auto; border: 2px solid orange;
opacity: 1;
}

.gallery .petitboutons:first-of-type,
.gallery .petitoperator:nth-of-type(1):target ~ .petitcontrols .petitboutons:nth-of-type(1),
.gallery .petitoperator:nth-of-type(2):target ~ .petitcontrols .petitboutons:nth-of-type(2),
.gallery .petitoperator:nth-of-type(3):target ~ .petitcontrols .petitboutons:nth-of-type(3)
{
color: rgba(25, 0, 0, 0.8);
}

.gallery .item:first-of-type {
position: static;
pointer-events: auto;
opacity: 1;
}

.gallery .item {
position: absolute;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}

.gallery .petitoperator {
display: none;
}

.gallery .petitboutons {
color: rgba(25, 255, 255, 0.4);
}
.gallery .petitboutons:hover {
color: rgba(255, 25, 255, 0.8);
}


.gallery {
position: relative;
margin: 0 0 0 0;
top:100px;
height: 700px;
width: 600px;
left:300px;
}

.gallery .item {
margin: 0 0 0 0;
top:0px;
overflow: hidden;
text-align: center;
background: #4d87e2;
}

.gallery .petitcontrols {
position: absolute;
left: -100px;
top:-100px;
width: 80px;
text-align: center;
}

.gallery .petitboutons {
display: inline-block;
margin: 0 .05em;
font-size: 3em;
text-align: center;
text-decoration: none;
-webkit-transition: color .1s;
-o-transition: color .1s;
transition: color .1s;
}

.box {
left:0px;
max-width: 80px;
max-height: 80px;
}

.bigbox {
left:0px;
max-width: 500px;
max-height: 300px;
}



/*
GALLERY 2
*/


.thumbnails .bigoperator:target ~ .bigcontrols .bigboutons {
opacity:0.6;
}
.thumbnails .bigoperator:target ~ .bigcontrols .bigboutons:hover {
opacity:1;
}

/* thumb 1 fait apparaitre image 1 */
.thumbnails .bigoperator:nth-of-type(1):target ~ .item2:nth-of-type(1) {
pointer-events: auto;
opacity: 1;
}
.thumbnails .bigoperator:nth-of-type(2):target ~ .item2:nth-of-type(2) {
pointer-events: auto;
opacity: 1;
}
.thumbnails .bigoperator:nth-of-type(3):target ~ .item2:nth-of-type(3) {
pointer-events: auto;
opacity: 1;
}
.thumbnails .bigoperator:nth-of-type(4):target ~ .item2:nth-of-type(4) {
pointer-events: auto;
opacity: 1;
}
.thumbnails .bigoperator:nth-of-type(5):target ~ .item2:nth-of-type(5) {
pointer-events: auto;
opacity: 1;
}
.thumbnails .bigoperator:nth-of-type(6):target ~ .item2:nth-of-type(6) {
pointer-events: auto;
opacity: 1;
}
.thumbnails .bigoperator:nth-of-type(7):target ~ .item2:nth-of-type(7) {
pointer-events: auto;
opacity: 1;
}
.thumbnails .bigoperator:nth-of-type(8):target ~ .item2:nth-of-type(8) {
pointer-events: auto;
opacity: 1;
}
.thumbnails .bigoperator:nth-of-type(9):target ~ .item2:nth-of-type(9) {
pointer-events: auto;
opacity: 1;
}

.thumbnails .bigboutons:first-of-type,
.thumbnails .bigoperator:nth-of-type(1):target ~ .bigcontrols .bigboutons:nth-of-type(1),
.thumbnails .bigoperator:nth-of-type(2):target ~ .bigcontrols .bigboutons:nth-of-type(2),
.thumbnails .bigoperator:nth-of-type(3):target ~ .bigcontrols .bigboutons:nth-of-type(3),
.thumbnails .bigoperator:nth-of-type(4):target ~ .bigcontrols .bigboutons:nth-of-type(4),
.thumbnails .bigoperator:nth-of-type(5):target ~ .bigcontrols .bigboutons:nth-of-type(5),
.thumbnails .bigoperator:nth-of-type(6):target ~ .bigcontrols .bigboutons:nth-of-type(6),
.thumbnails .bigoperator:nth-of-type(7):target ~ .bigcontrols .bigboutons:nth-of-type(7),
.thumbnails .bigoperator:nth-of-type(8):target ~ .bigcontrols .bigboutons:nth-of-type(8),
.thumbnails .bigoperator:nth-of-type(9):target ~ .bigcontrols .bigboutons:nth-of-type(9)
{
opacity: 1;
}

.thumbmails .item2:first-of-type {
position: static;
pointer-events: auto;
opacity: 1;
}

.thumbnails .item2 {
position: absolute;
left: 100px;
width: 400px;
height: 800px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}

.thumbnails .bigoperator {
display: none;
}
.thumbnails .bigboutons {
opacity:0.6;
}
.thumbnails .bigboutons:hover {
opacity:1;
}



.thumbnails {
position: relative;
margin: 0 0 0 0;
top:0px;
height: 450px;
width: 100px;
left:0px;
}

.thumbnails .item2 {
margin: 0 0 0 0;
top:0px;
overflow: hidden;
text-align: center;
background: #4d87e2;

}

.thumbnails .bigcontrols {
position: absolute;

text-align: center;
}

.thumbnails .bigboutons {
display: inline-block;
margin: 0 .05em;
font-size: 3em;
text-align: center;
text-decoration: none;
-webkit-transition: color .1s;
-o-transition: color .1s;
transition: color .1s;
}
.caption{
border: 2px solid orange; height: 50px; width: 80px; color: blue;
}
.thumbnails .item2 img {
max-width: 300px;
border: 2px solid green; box-shadow: 3px 3px 12px #999999;
}

Pièces jointes

  1. gallery.zip (23.19 Kio) Téléchargé 1265 fois

Avatar de l’utilisateur

mati

  • Messages: 1
  • Inscrit le: Mer Oct 08, 2014 8:39 am

Re: gallerie css

par XainPro » Jeu Oct 09, 2014 11:57 am

learn http://andornagy.com/pure-css-image-lightbox/
Avatar de l’utilisateur

XainPro

  • Messages: 3933
  • Inscrit le: Ven Fév 17, 2012 8:10 pm


+ Publier une réponse

Page 1 sur 1