11521 sujets

JavaScript, DOM et API Web HTML5

Appliquer un effet js à plusieurs images?

Salut !
Je souhaite faire un effet de zoom comme sur cet exemple : https://www.w3schools.com/css/tryit.asp?filename=trycss_image_modal_js
Ce que je souhaite faire, c'est d'appliquer cet effet sur 3 photos qui se suivent, alors j'ai réussi à le mettre sur 1 photo sur les 3, comme sur l'exemple, mais comment faire pour appliquer ce même effet sur 3 photos ?
Je bloque, je débute en javascript et je vous avoue que c'est un mess pas possible aha !
Merci d'avance Smiley smile
Modifié par Marieco (25 Mar 2020 - 19:12)
stryk a écrit :
Salut,

Tu peux remplacer tous les ID par des CLASS, ce qui donne pour le code du lien:
https://codepen.io/exemple/pen/GRJwxNO

Le mieux serait bien sur de bien comprendre ce que fait chaque partie (css, js) pour ensuite améliorer et adapter au mieux de ton code existant Smiley cligne


Tout d'abord, merci beaucoup pour ta réponse !
J'ai tenté d'appliquer ce code à mon site, le problème étant que sur codepen.io il fonctionne très bien, mais une fois sur mon site, le onclick ne fonctionne pas, je n'arrive pas à comprendre pourquoi alors que le code est le même...

EDIT : j'ai corrigé une partie du problème, désormais je peux zoomer chaque image en cliquant dessus, mais maintenant le bouton close ne marche pas (alors qu'il fonctionne sur le même code sur codepen.io, je suis perdue Smiley confus )
Modifié par Marieco (26 Mar 2020 - 16:29)
Tu n'as pas du mettre ce script au bon endroit Smiley biggrin
Essaye comme ceci avec un "DOMContentLoaded" ça devrait passer tout seul Smiley cligne 


<!DOCTYPE html>
<html>

	<head>
		
		<script>
		
			document.addEventListener('DOMContentLoaded', function () {
			
				const modal = document.getElementsByClassName('idMyModal');
				const img = document.getElementsByClassName('toZoom');
				const modalImg = document.getElementsByClassName('modal-content');
				
				for ( let i = 0; i < img.length; i++ ) {
				
					img[i].onclick = function () {
				  
						modal[i].style.display = "block";
						modalImg[i].src = this.src;
					}
					
				}

				var span = document.getElementsByClassName("close");
				
				for ( let i = 0; i < span.length; i++ ) {
				
					span[i].onclick = function() {
					
						modal[i].style.display = "none";
						
					}
					
				}
				
			});
		
		</script>
		
		<style>
			
			.toZoom {
			  border-radius: 5px;
			  cursor: pointer;
			  transition: 0.3s;
			}

			.toZoom:hover {opacity: 0.7;}

			.modal {
			  display: none; /* Hidden by default */
			  position: absolute; /* Stay in place */
			  z-index: 1; /* Sit on top */
			  padding-top: 100px; /* Location of the box */
			  left: 0;
			  top: 0;
			  width: 100%; /* Full width */
			  height: 100%; /* Full height */
			  overflow: auto; /* Enable scroll if needed */
			  background-color: rgb(0,0,0); /* Fallback color */
			  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
			}

			.modal-content {
			  margin: auto;
			  display: block;
			  width: 80%;
			  max-width: 700px;
			}

			.modal-content {  
			  animation-name: zoom;
			  animation-duration: 0.6s;
			}

			@keyframes zoom {
			  from {transform: scale(0.1)} 
			  to {transform: scale(1)}
			}

			.close {
			  position: absolute;
			  top: 15px;
			  right: 35px;
			  color: #f1f1f1;
			  font-size: 40px;
			  font-weight: bold;
			  transition: 0.3s;
			}

			.close:hover,
			.close:focus {
			  color: #bbb;
			  text-decoration: none;
			  cursor: pointer;
			}

			@media only screen and (max-width: 700px){
			  .modal-content {
				width: 100%;
			  }
			}
		
		</style>

	</head>

	<body>

		<!-- The Image 1 -->
		<img class="toZoom" src="https://www.mcblains.com/wp-content/uploads/2011/03/red-eyed-tree-frog-300x150.jpg" width="300">
		<!-- The Modal -->
		<div class="idMyModal modal">
		  <span class="close">&times;</span>
		  <img class="modal-content">
		</div>

		<!-- The Image 2 -->
		<img class="toZoom" src="https://www.abc.net.au/health/minutes/img/300x150_th_m1425243.jpg" width="300">
		<!-- The Modal -->
		<div class="idMyModal modal">
		  <span class="close">&times;</span>
		  <img class="modal-content">
		</div>

		<!-- The Image 3 -->
		<img class="toZoom" src="https://cas17.fr/wp-content/uploads/2020/02/CieLEtabli%C2%A9ElisabettaSpaggiari2-300x150.jpg" width="300">
		<!-- The Modal -->
		<div class="idMyModal modal">
		  <span class="close">&times;</span>
		  <img class="modal-content">
		</div>

	</body>
	
</html>
Sujet clos
Aller à