Rue de l'info

Article

PictureBox : code source complet HTML5/CSS3/JavaScript

par | 29-10-2018 | Html - CSS, Tutos

[fancy_header tag= »h1″]PictureBox : code source complet HTML5/CSS3/JavaScript[/fancy_header]

[p]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.[/p]

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

[fancy_header tag= »h2″]Arborescence de vos fichiers[/fancy_header]

[image src= »2018/10/arborescence-picturebox-rue-de-l-info.jpg » width= »138″ align= »center » alt= »Arborescence – PictureBox – Rue de l’info » title= »Arborescence – PictureBox – Rue de l’info » image_hover= »zoom-effect » frame= »style4″]

[fancy_header tag= »h2″]Fichier index.html[/fancy_header]

XHTML
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>
 

[fancy_header]Fichier style.css[/fancy_header]

CSS
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);
}
 

[fancy_header]Fichier screen.css[/fancy_header]

CSS
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%;
}
 

[fancy_header]Fichier smartphone.css[/fancy_header]

CSS
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%;
}
 

[fancy_header]Fichier tablette.css[/fancy_header]

CSS
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;
}
 

[fancy_header]Fichier script.js[/fancy_header]

JavaScript
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';
}
 

[fancy_header]Dossier « images »[/fancy_header]

[fancy_header tag= »h3 »]Clic droit > enregistrer l’image sous[/fancy_header]

[carousel_slide id=’6770′]