Rue de l'info
← Retour à l'accueil
Html - CSS

PictureBox : code source complet HTML5/CSS3/JavaScript

La PictureBox est une galerie d'images réalisées en HTML5/CSS3 et JavaScript. Le code source est disponible gratuitement, il n'y a plus qu'à copier/coller.

Rédaction Rue de l'info
PictureBox : code source complet HTML5/CSS3/JavaScript

PictureBox : code source complet HTML5/CSS3/JavaScript

Cet article s’adresse aux développeurs en herbe avec une base de connaissance en Html/CSS3 et JavaScript. Vous pouvez copier/coller le code avec facilité et le tester chez vous en le personnalisant à votre guise.

C’est une PictureBox réalisée en Html5/CSS3 et du JavaScript. Très simple mais encore faut-il connaître un peu le fonctionnement des « média queries« . Ce code source vous fera afficher une galerie photos originale et « responsive« , c’est à dire qu’elle sera adaptée à tous les supports tels que les PC, smartphones, tablettes tactiles etc…

Notez bien qu’il y a 4 fichiers CSS, 1 fichier JavaScript et bien sûr l’index (.html). Les images sont disponibles en bas de page dans un caroussel

Arborescence de vos fichiers

Arborescence – PictureBox – Rue de l’info

Fichier index.html

XHTML

Rue de l'info

La PictureBox de Rue de l'info

Football

PictureBox - Rue de linfo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
<title>Rue de l'info</title>
    
    <!-- CSS -->
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./screen.css" media="screen and (min-width: 781px)" />
    <link rel="stylesheet" href="./tablette.css" media="screen and (max-width: 780px) and (min-width: 551px)" />
    <link rel="stylesheet" href="./smartphone.css" media="screen and (max-width: 550px)" />
 
    <!-- JavaScript -->
    <script src="./script.js"></script>
  </head>
 
  <body>
 
    <header>
      <h1><span>La PictureBox de Rue de l'info</span></h1>
 
      
    </header>
 
    <!-- Content -->
 
    <main>
      <section class="gallerie">
 
        <ul>
          <li> <a> <img id="image01" src="images/image01.jpg" title="Antoine Griezmann 2018" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image02" src="images/image02.jpg" title="Benjamin Pavard 2018" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image03" src="images/image04.jpg" title="Didier Deschamps 2018" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image04" src="images/image03.jpg" title="Kylian Mbappe 2018" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image05" src="images/image05.jpg" title="Zinedine Zidane 2018" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image06" src="images/image06.jpg" title="Zidane vs. Materazzi 2006" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image07" src="images/image07.jpg" title="Didier Deschamps 2000" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image08" src="images/image08.jpg" title="Cristiano Ronaldo 2018" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image09" src="images/image09.jpg" title="Didier Deschamps 1993" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image10" src="images/image10.jpg" title="Harry Kane 2018" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image11" src="images/image11.jpg" title="Zinedine Zidane 1998-2000" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image12" src="images/image12.jpg" title="Munich Stadium 1993" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
          <li> <a> <img id="image13" src="images/image13.jpg" title="Didier Deschamps 1996" alt="PictureBox - Rue de linfo" onclick="affiche(this); " /> </a> </li>
        </ul>
 
      </section>
 
      <section class="affichage">
        <img id="image-grande" src="images/image01.jpg" />
 
        <div>
          <h2 id="image-title">Football</h2>
          <p id="image-desc" class="affichage-desc">
            PictureBox - Rue de linfo
          </p>
        </div>
      </section>
    </main>
 
  </body>
 
</html>
 

Fichier style.css

CSS

/*-----ruedelinfo.com*/ body { background-color: #000066; height: 100vh; display: flex; flex-direction: column; } h1 { text-align: center; font-size: 2em; color:#ffffff; } h1 span { border: 1px dotted black; padding: 2px; } /*-- NAV --*/ nav { margin-left: 3%; margin-right: 3%; } .menu_content { font-weight: bold; font-size: 0.8em; padding-left: 0; width: 100%; } .menu_content li { text-align: center; list-style-type: none; } .menu_content li.active { font-style: italic; border: 0.5px dotted black; } .gallerie ul { margin: 10px; padding: 0px; width: 100%; } .gallerie a { width: inherit; height: inherit; } .gallerie a img { width: inherit; height: inherit; object-fit: cover; } .gallerie li:hover { -webkit-transform: scale(0.95) rotate(-8deg); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
/*-----ruedelinfo.com*/
 
body {
  background-color: #000066;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
 
h1 {
  text-align: center;
  font-size: 2em;
  color:#ffffff;
}
 
h1 span {
  border: 1px dotted black;
  padding: 2px;
}
 
/*-- NAV --*/
 
nav {
  margin-left: 3%;
  margin-right: 3%;
}
 
.menu_content {
  font-weight: bold;
  font-size: 0.8em;
  padding-left: 0;
  width: 100%;
}
 
.menu_content li {
  text-align: center;
  list-style-type: none;
}
 
.menu_content li.active {
  font-style: italic;
  border: 0.5px dotted black;
}
 
.gallerie ul {
  margin: 10px;
  padding: 0px;
  width: 100%;
}
 
.gallerie a {
  width: inherit;
  height: inherit;
}
 
.gallerie a img {
  width: inherit;
  height: inherit;
  object-fit: cover;
}
 
.gallerie li:hover {
  -webkit-transform: scale(0.95) rotate(-8deg);
}
 

Fichier screen.css

CSS

/*-- NAV ---------------ruedelinfo.com*/ .menu_content { display: block; column-count: 3; width: 100%; } .menu_content li:not:first-child { margin-left: 5px; } .menu_content li { border: 1% solid #7f8c8d; background-color: #ecf0f1; -webkit-box-shadow: 1px 1px 3px #555; width: inherit; margin-bottom: 5px; height: 1.5em; } /*-- GALERIE --*/ .gallerie { background-color: #ecf0f1; max-width: 580px; width: 33%; height: 80%; overflow-y: auto; overflow-x: hidden; float: left; -webkit-box-shadow: 1px 1px 10px #555; } .gallerie ul { display: flex; flex-wrap: wrap; } .gallerie li { width: 150px; height: 150px; -webkit-box-shadow: 1px 1px 3px #555; background-color: white; padding: 5px; margin: 10px; list-style-type: none; } /*-- AFFICHAGE --*/ .affichage { margin-left: 0px; width: 66%; height: 80%; background-color: #ecf0f1; float: right; -webkit-box-shadow: 1px 1px 10px #555; text-align: center; overflow-y: auto; overflow-x: hidden; } .affichage img { width: 70%; margin-top: 2%; } .affichage p { text-align: center; padding-left: 10%; padding-right: 10%; height: 10%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
/*-- NAV ---------------ruedelinfo.com*/
 
.menu_content {
  display: block;
  column-count: 3;
  width: 100%;
}
 
.menu_content li:not:first-child {
  margin-left: 5px;
}
 
.menu_content li {
  border: 1% solid #7f8c8d;
  background-color: #ecf0f1;
  -webkit-box-shadow: 1px 1px 3px #555;
  width: inherit;
  margin-bottom: 5px;
  height: 1.5em;
}
 
/*-- GALERIE --*/
 
.gallerie {
  background-color: #ecf0f1;
  max-width: 580px;
  width: 33%;
  height: 80%;
  overflow-y: auto;
  overflow-x: hidden;
  float: left;
  -webkit-box-shadow: 1px 1px 10px #555;
}
 
.gallerie ul {
  display: flex;
  flex-wrap: wrap;
}
 
.gallerie li {
  width: 150px;
  height: 150px;
  -webkit-box-shadow: 1px 1px 3px #555;
  background-color: white;
  padding: 5px;
  margin: 10px;
  list-style-type: none;
}
 
/*-- AFFICHAGE --*/
 
.affichage {
  margin-left: 0px;
  width: 66%;
  height: 80%;
  background-color: #ecf0f1;
  float: right;
  -webkit-box-shadow: 1px 1px 10px #555;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
}
 
.affichage img {
  width: 70%;
  margin-top: 2%;
}
 
.affichage p {
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  height: 10%;
}
 

Fichier smartphone.css

CSS

/*-- NAV -------ruedelinfo.com*/ nav { overflow-y: hidden; overflow-x: auto; } .menu_content { display: flex; overflow-x: auto; } .menu_content li:not() { margin-left: 5px; } .menu_content li { width: 200px; height: 2em; align: center; border: 1% solid #7f8c8d; background-color: #ecf0f1; -webkit-box-shadow: 1px 1px 3px #555; padding: 0; flex-shrink: 0; } /*-- GALLERIE --*/ .gallerie { display: flex; overflow-x: auto; background-color: #ecf0f1; height: auto; -webkit-box-shadow: 1px 1px 10px #555; } .gallerie ul { display: flex; flex-wrap: nowrap; margin: 10px; } .gallerie ul li { width: 75px; height: 75px; background-color: white; padding: 2px; margin: 5px; list-style-type: none; -webkit-box-shadow: 1px 1px 5px #555; } /*-- AFFICHAGE --*/ .affichage { margin-top: 15px; background-color: #ecf0f1; -webkit-box-shadow: 1px 1px 10px #555; text-align: center; padding-bottom: 5px; height: 65%; overflow: auto; } .affichage img { width: 80%; margin: 15px; height: auto; -webkit-box-shadow: 1px 1px 5px #555; } .affichage-desc { margin-left: 5%; margin-right: 5%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
/*-- NAV -------ruedelinfo.com*/
 
nav {
  overflow-y: hidden;
  overflow-x: auto;
}
 
.menu_content {
  display: flex;
  overflow-x: auto;
}
 
.menu_content li:not(:first-child) {
  margin-left: 5px;
}
 
.menu_content li {
  width: 200px;
  height: 2em;
  align: center;
  border: 1% solid #7f8c8d;
  background-color: #ecf0f1;
  -webkit-box-shadow: 1px 1px 3px #555;
  padding: 0;
  flex-shrink: 0;
}
 
/*-- GALLERIE --*/
 
.gallerie {
  display: flex;
  overflow-x: auto;
  background-color: #ecf0f1;
  height: auto;
  -webkit-box-shadow: 1px 1px 10px #555;
}
 
.gallerie ul {
  display: flex;
  flex-wrap: nowrap;
  margin: 10px;
}
 
.gallerie ul li {
  width: 75px;
  height: 75px;
  background-color: white;
  padding: 2px;
  margin: 5px;
  list-style-type: none;
  -webkit-box-shadow: 1px 1px 5px #555;
}
 
/*-- AFFICHAGE --*/
 
.affichage {
  margin-top: 15px;
  background-color: #ecf0f1;
  -webkit-box-shadow: 1px 1px 10px #555;
  text-align: center;
  padding-bottom: 5px;
  height: 65%;
  overflow: auto;
}
 
.affichage img {
  width: 80%;
  margin: 15px;
  height: auto;
  -webkit-box-shadow: 1px 1px 5px #555;
}
 
.affichage-desc {
  margin-left: 5%;
  margin-right: 5%;
}
 

Fichier tablette.css

CSS

/*-- NAV -------ruedelinfo.com*/ nav { overflow-y: hidden; overflow-x: auto; } .menu_content { display: flex; overflow-x: auto; } .menu_content li:not() { margin-left: 5px; } .menu_content li { width: 200px; height: 2em; align: center; border: 1% solid #7f8c8d; background-color: #ecf0f1; -webkit-box-shadow: 1px 1px 3px #555; padding: 0; flex-shrink: 0; } /*-- GALERIE --*/ .gallerie { background-color: #ecf0f1; width: 30%; height: 80%; overflow-y: auto; overflow-x: hidden; float: left; -webkit-box-shadow: 1px 1px 10px #555; } .gallerie ul { display: flex; flex-wrap: wrap; } .gallerie ul li { width: 75px; height: 75px; -webkit-box-shadow: 1px 1px 3px #555; background-color: white; padding: 2px; margin: 5px; list-style-type: none; } /*-- AFFICHAGE --*/ .affichage { margin-left: 0px; width: 68%; height: 80%; background-color: #ecf0f1; float: right; -webkit-box-shadow: 1px 1px 10px #555; text-align: center; overflow-y: scroll; overflow-x: hidden; } .affichage img { width: 80%; margin-top: 2%; } .affichage p { position: relative; text-align: center; padding-left: 10%; padding-right: 10%; bottom: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
/*-- NAV -------ruedelinfo.com*/
 
nav {
  overflow-y: hidden;
  overflow-x: auto;
}
 
.menu_content {
  display: flex;
  overflow-x: auto;
}
 
.menu_content li:not(:first-child) {
  margin-left: 5px;
}
 
.menu_content li {
  width: 200px;
  height: 2em;
  align: center;
  border: 1% solid #7f8c8d;
  background-color: #ecf0f1;
  -webkit-box-shadow: 1px 1px 3px #555;
  padding: 0;
  flex-shrink: 0;
}
 
/*-- GALERIE --*/
 
.gallerie {
  background-color: #ecf0f1;
  width: 30%;
  height: 80%;
  overflow-y: auto;
  overflow-x: hidden;
  float: left;
  -webkit-box-shadow: 1px 1px 10px #555;
}
 
.gallerie ul {
  display: flex;
  flex-wrap: wrap;
}
 
.gallerie ul li {
  width: 75px;
  height: 75px;
  -webkit-box-shadow: 1px 1px 3px #555;
  background-color: white;
  padding: 2px;
  margin: 5px;
  list-style-type: none;
}
 
/*-- AFFICHAGE --*/
 
.affichage {
  margin-left: 0px;
  width: 68%;
  height: 80%;
  background-color: #ecf0f1;
  float: right;
  -webkit-box-shadow: 1px 1px 10px #555;
  text-align: center;
  overflow-y: scroll;
  overflow-x: hidden;
}
 
.affichage img {
  width: 80%;
  margin-top: 2%;
}
 
.affichage p {
  position: relative;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  bottom: 0;
}
 

Fichier script.js

JavaScript

//-----ruedelinfo.com*/ function affiche(elementImg) { var alt = elementImg.alt; var title = elementImg.title; var src = elementImg.src; document.getElementById('image-grande').src = src; document.getElementById('image-title').innerHTML = title; document.getElementById('image-desc').innerHTML = alt; } function active(elementLi) { var liste = document.querySelectorAll('nav ul li'); for(i = 0; i < liste.length; i++) { liste.item(i).className = ''; } elementLi.className = 'active'; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
//-----ruedelinfo.com*/
 
function affiche(elementImg)
{
  var alt = elementImg.alt;
  var title = elementImg.title;
  var src = elementImg.src;
 
  document.getElementById('image-grande').src = src;
  document.getElementById('image-title').innerHTML = title;
  document.getElementById('image-desc').innerHTML = alt;
}
 
function active(elementLi)
{
    var liste = document.querySelectorAll('nav ul li');
 
    for(i = 0; i < liste.length; i++)
    {
      liste.item(i).className = '';
    }
 
    elementLi.className = 'active';
}
 

Dossier « images »

Clic droit > enregistrer l’image sous