PictureBox : code source complet HTML5/CSS3/JavaScript

[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]



  
    
 Rue de l'info
    
    
    
    
    
    

    
    
  

  

    
      La PictureBox de Rue de l'info

      
    

    

    
      

        
              
              
              
              
              
              
              
              
              
              
              
              
              
        

      

      
        

        
          Football
          
            PictureBox - Rue de linfo

[fancy_header]Fichier style.css[/fancy_header]

/*-----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]

/*-- 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]

/*-- 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]

/*-- 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]

//-----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']