Mosaique Chaine Live par Maxime Alchimie Dev - page 1

Bonjour je chercherai à savoir comment faire pour avoir une vidéo différente dans ma modal pour chaque image de ma mosaïque merci de vos réponses .

<!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">
</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">
    			<video id="video" controls loop="0">
    				<!-- La vidéo -->
		        	<source src="./images-et-video/bfm-radio.mp4" class="video">
				</video>
    		</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: 72%;
font-size: 225%;
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:3412px) {
.wrapper {
grid-template-columns: repeat(6, 0fr);
}
}
@media all and (min-width:2864px) {
.wrapper {
grid-template-columns: repeat(5, 0fr);
}
}
@media all and (min-width:2393px) {
.wrapper {
grid-template-columns: repeat(6, 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; 
}
}

		//-- 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";
	  		
		}


		function getImages(channel) {
			return "http://live.tevolution.tv/monitor/PNG/" + channel + ".png" ;
		}
		//-- 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],

	screen = [{
		channel_count_per_line: 9,
        refresh_rate: 10

	}],


	channels = [{
		class: 'Cars-&-Stars-TV',
		label: 'Cars & Stars TV',				
		src: 'http://lives:lives@live.tevolution.tv/monitor/PNG/cars_and_stars/status_small.png' //chemin de l'image
		
	}, {
		class: 'rmc-sport',
		label: 'RMC SPORT' ,
		src: './images-et-video/rmc-sport.jpg',
	}, {
		class: 'lci',
		label: 'LCI' ,
		src: './images-et-video/lci.jpg'
	}, {
		class: 'vision-tv',
		label: 'VISION TV' ,
		src: './images-et-video/vision-tv.jpg'
	}, {
		class: 'arte' ,
		label: 'ARTE' ,
		src: './images-et-video/arte.jpg'
	}, {
		class: 'bfm' ,
		label: 'BFM' ,
		src: './images-et-video/bfm.jpg'
	}, {
		class: 'canadian' ,
		label: 'CANADIAN' ,
		src: './images-et-video/canadian.jpg'
	}, {
		class: 'bein-sport' ,
		label: 'BEIN SPORT' ,
		src: './images-et-video/bein-sport.jpg'
	}, {
		class: 'farming' ,								
		label: 'FARMING' ,
		src: './images-et-video/farming.jpg'
	}, {
    	class: 'lake-tv' ,
    	label: 'LAKE TV' ,
    	src: './images-et-video/lake-tv.jpg'
    }, {
    	class: 'lbc' ,
    	label: 'LBC' ,
    	src: './images-et-video/lbc.jpg'
    }, {
    	class: 'ldc-news' ,
    	label: 'LDC NEWS' ,
    	src: './images-et-video/ldc-news.jpg'
    }, {
    	class: 'loutre-tv' ,
    	label: 'LOUTRE TV' ,
    	src: './images-et-video/loutre-tv.jpg'
    }, {
   		class: 'mountain-tv' ,
    	label: 'MOUNTAIN TV' ,
    	src: './images-et-video/mountain-tv.jpg'
    }, {
    	class: 'nrj12' ,
    	label: 'NRJ12' ,
    	src: './images-et-video/nrj12.jpg'
    }, {
    	class: 'paysage-tv' ,
    	label: 'PAYSAGE TV' ,
    	src: './images-et-video/paysage-tv.jpg'
    }, {
    	class: 'sky-sport' ,
   		label: 'SKY SPORT' ,
   		src: './images-et-video/sky-sport.jpg'
   	}, {
    	class: 'telefoot' ,
    	label: 'TELEFOOT' ,
    	src: './images-et-video/telefoot.jpg'
    }, {
    	class: 'tf1' ,
    	label: 'TF1' ,
    	src: './images-et-video/tf1.jpg'
    }, {
    	class: 'turbo' ,
    	label: 'TURBO' ,
    	src: './images-et-video/turbo.jpg'

	}],

	// Déclaration de variable
	item;

// Pour chaque élément dans `channels`
channels.forEach(function (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.class + '-img"'
		+ ' class="video"'
		+ ' src="' + data.src + '"'
		+ ' onload="this.onload = null; this.src = getImages(\'' + data.class + '\');"'
		+ ' 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);
});

var xhr = new XMLHttpRequest();

Maxime Alchimie Dev

15 mars 2019 à 15:06:46