Football
PictureBox - Rue de linfo
[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…
[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']
Amadou Bagayoko, figure emblématique de la musique malienne, s'éteint La scène musicale internationale est en…
L'épicerie sociale d'Évreux : Un nouveau départ pour les bénéficiaires du RSA À Évreux, une…
Une polémique éclate à Cannes autour de Jean-Claude Van Damme L'acteur belge Jean-Claude Van Damme…
Jul met le feu au Vélodrome de Marseille en 2025 ! Amis Marseillais, préparez-vous !…
Cité Adeline à Lisieux : Un suspect de 25 ans arrêté et placé en détention…
Un retour tant attendu : John Wick est de retour ! Le monde impitoyable de…