Responsive Mosaique

Le problème exposé dans ce sujet a été résolu.

Bonjour sur ma mosaique d’image j’ai un responsive j’aimerai savoir comment faire pour avoir 10 image par ligne au fur à mesure que j’agrandissent la page 

<!DOCTYPE html>
<html>
<head>
    <title>Mosaique</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="refresh" content="8">
<meta charset="utf-8">
</head>
    
                                         <!-- LES CHANNELS -->

<body>
    <div class="wrapper"></div>
    <div id="modal" class="w3-modal">
            <span class="w3-button w3-hover-red w3-xlarge w3-display-topright" onclick="modal.style.display='none'">×</span>
            <!-- Le contenu de la modal -->
            <div id="videoid" class="w3-modal-content w3-animate-zoom">
                <iframe id="video" width="560" height="560" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>  

<script src="javascript/script.js"></script>
</body>
</html>

* {
box-sizing: border-box;
}
html, body{
padding:0;
margin:0;
width: 100%;
}
                                              /* --TOUTE LA PARTIE CSS-- */
.wrapper {
display:grid;
grid-template-columns: 0fr 0fr 0fr 0fr;
cursor: pointer;
}


#video {
display:block;
width: 100%;
position: relative;
}
.img-wrapper {
position:relative;
}

/*-- Nom des chaines par images --*/
.text {
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
text-align:center;
display: block;
position:absolute;
left: 5%;
bottom: 80%;
font-size: 170%;
font-family: fantasy;
letter-spacing: 5px;

}

/*-- La modal --*/
.w3-modal {
width: 100%;
padding-top: 10%;
background-color: rgba(0,0,0,0.4);

}

.video {
width: 475.75px;
height: 251px;
}








          

                                                        /*-- LE RESPONSIVE-- */


@media all and (min-width:2864px) {
.wrapper {
grid-template-columns: repeat(5, 0fr);
}
}
@media all and (min-width:2393px) {
.wrapper {
grid-template-columns: repeat(4, 0fr);
}
}
@media all and (max-width:3426px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:2835px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:2358px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:1915px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr; 
}
}
@media all and (max-width:1438px) {
.wrapper {          
grid-template-columns: 0fr 0fr; 
}
}
@media all and (max-width:964px) {
.wrapper {
grid-template-columns: 0fr; 
}
}
+0 -0

Il n’y a pas d’image dans ces bouts de code. Tout ce que l’on voit, c’est des <div>, <span> et un <iframe>.

aero15
        //-- Fonction quand je clics sur une image sa m'ouvre une modal --//
        function onClick(element) {
            document.getElementById("videoid").src = element.src;
            document.getElementById("modal").style.display = "block";
            
        }

        
        //-- Fonction quand je clics juste autour de ma modal ma modal se ferme --//
        window.onclick = function(event) {
            if (event.target == modal) {
            modal.style.display = "none";
            }
        }


// Cibler l'élément parent qui va contenir la liste d'élément.
var elWrapper = document.getElementsByClassName('wrapper')[0];


function displayChannels(data) {
  const config = JSON.parse(data);

  const channels = config.channels;

  console.log(channels);

  channels.forEach(function (channel) {
       displayChannel(channel);
  });
}


function displayChannel(data) {
    // Créer un élément
    item = document.createElement("div");

    // Créer des attributs à cet élément
    item.id = 'channel-live';
    item.classList.add('img-wrapper');

    // Remplir l'élément avec du contenu HTML
    item.innerHTML = '<img id="channel-' + data.label + '-img"'
        + ' class="video"'
        + ' src="' + data.image.zoom_url + '"'
        + ' onload="this.onload = null; this.src = getImages(\'' + data.label + '\');"'
        + ' onclick="onClick(this)" class="w3-hover-opacity">'
        + '<span class="text">' + data.label + '</span>';

    // Insérer l'élément dans la cible parent
    elWrapper.appendChild(item);
}


function loadJSON(callback) {   
    console.log('in loadjson');
    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'javascript/mosaic_config.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }
 
loadJSON(displayChannels);
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte