התחבר | הרשמה | שאלות נפוצות
Anonymous

gallerie css

+ פרסם תגובה

2 הודעות עמוד 1 מתוך 1


gallerie css

על ידי mati » ד' אוקטובר 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;
}

קבצים מצורפים

  1. gallery.zip (23.19 KiB) הורד 1305 פעמים

סמל אישי של המשתמש

mati

  • הודעות: 1
  • הצטרף: ד' אוקטובר 08, 2014 8:39 am

Re: gallerie css

על ידי XainPro » ה' אוקטובר 09, 2014 11:57 am

learn http://andornagy.com/pure-css-image-lightbox/
סמל אישי של המשתמש

XainPro

  • הודעות: 3933
  • הצטרף: ו' פברואר 17, 2012 8:10 pm


+ פרסם תגובה

עמוד 1 מתוך 1