27050 sujets

CSS et mise en forme, CSS3

Pages :
bonjour,
j'ai une galerie d'image qui fonctionne bien avec un choix de vignette.
une fois l'image choisie, je veux utiliser ma loupe sur cette image.
Le premier fonctionne, j'ai bien mon image et ma loupe sur l'image.
Mon problème et que ma loupe reste sur cette premier image.
Si je sélectionne une autre vignette, j'ai ma nouvelle image mais la loupe reste sur le premier choix.
Je suis novice, je bloque sur ce problème.
D'avance Merci pour vos propositions.

<!DOCTYPE html >
	<head>
    	<meta charset ="iso-8859-1">
		<title>test</title>
	    <link rel="stylesheet" type="text/css">
	    <script type="text/javascript" src="../css/script.js"></script>
		<style >
		div#galerie	{
					position: absolute;
					width: 900px ; height: 550px;
					background: bisque;
					left:10px;		right: 190px;
					bottom: 60px;
					border: 5px solid #dcb ;
					padding: 15px ;	margin: 15px ;
					text-align: center ;
				}
				ul#galerie_mini	{
					position: absolute;
					background:blue;
					top:497px;		right: 250px;
					margin:15;	padding: 0 ;
					list-style-type: none ;
						}
				ul#galerie_mini li	{	float: right ;		}
              /* mini chiffre*/
				ul#galerie_mini li a img  {	margin: 5px 1px ;	border:4px solid gold;	}
				dl#photo{	clear: both ;	margin: 0 auto ;}
				dl#photo dt /* Titre Photo*/
				{	font: italic 1.5em/1.5em Georgia, serif ;	color: #36C;	}
				dl#photo dd	{		margin: 0 ;		}
				dl#photo img		{		border: 1px solid #dcb ;    border-radius:15px;	}
/*   fin  Galerie.html*/
.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 20%;
  cursor: none;
  /*taile de la loupe- magnifier glass:*/
  width: 140px;
  height: 100px;
  }
		</style>
	</head>
	<body>
	<div id="galerie">
		<dl id="photo">
					<dt>Gravure </dt>
					<dd><img id="big_pict" src="../Img/nat/DSC_0256.jpg" width="800" height="450" alt="Gravure" />
					</dd>
		</dl>
		<ul id="galerie_mini">
			<li><a href="../Img/nat/20190923_112845.jpg"	id title="Val"><img  src="../Img/aut/m_photo9.png" alt="photo 9" /></a></li>
			<li><a href="../Img/nat/Les Essarts 1296 m .jpg" title="Les Essarts"><img src="../Img/aut/m_photo8.png" alt="photo 8" /></a></li>
			<li><a href="../Img/nat/Grande Riviere.jpg" title="Grande Riviere"><img src="../Img/aut/m_photo7.png" alt="photo 7" /></a></li>
			<li><a href="../Img/nat/P1020314.jpg" title="En Val"><img src="../Img/aut/m_photo6.png" alt="photo 6" /></a></li>
			<li><a href="../Img/nat/P1020834.jpg" title="cirque "><img src="../Img/aut/m_photo5.png" alt="photo 5" /></a></li>
			<li><a href="../Img/nat/20180704_140405.jpg" title="Saorge"><img src="../Img/aut/m_photo4.png" alt="photo 4" /></a></li>
			<li><a href="../Img/nat/20180430_180152.jpg" title="lac d'Annecy"><img src="../Img/aut/m_photo3.png" alt="Photo 3" /></a></li>
			<li><a href="../Img/nat/20180704_064546.jpg" title=" lac. 2300m"><img src="../Img/aut/m_photo2.png" alt="vig 2"/></a></li>
			 <li><a href="../Img/nat/20180430_093210.jpg" title="lac d'Annecy"><img src="../Img/aut/m_photo1.png"  alt="vign 1"/></a></li>
		</ul>
	</div>  <!-- galerie -->
    <script>
   /* fonction avec l'id de l'image et la force de la loupe:*/
   loupe("big_pict", 3);
</script>
	</body>
</html>


Modifié par _laurent (26 Feb 2020 - 00:06)
la loupe fonctionne bien.

le code js.


/*fonction loupe  */
function loupe(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  /*create magnifier glass:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  /*insert magnifier glass:*/
  img.parentElement.insertBefore(glass, img);
  /*set background properties for the magnifier glass:*/
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  /*execute a function when someone moves the magnifier glass over the image:*/
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  /*and also for touch screens:*/
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;
    /*prevent the magnifier glass from being positioned outside the image:*/
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
    if (y < h / zoom) {y = h / zoom;}
    /*set the position of the magnifier glass:*/
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    /*display what the magnifier glass "sees":*/
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }

  /*fonction loupe */
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}

Modifié par _laurent (26 Feb 2020 - 00:07)
Modérateur
ta fonction passent 2 variables,
l'id d'une image et la valeur du zoom: function loupe(imgID, zoom).
et tu n'as qu'une seule image avec un id exploitable dans ton code .

Enfin, on ne voit ta fonction lancé qu'une seule fois : loupe("big_pict", 3); .
big_pict est l'id de ta première image.
Si tu n'as que ce code dans ta page, c'est normal.

Il te faut attribué une ID différente à toutes tes images et actualiser cette variable dans ta fonction et la relancer pour chaque nouvelle image sélectionnée.

comment sélectionnes tu tes images ?
Modifié par gcyrillus (26 Feb 2020 - 00:51)
Allez un copier collé après tu le mets dans un html et tu reproduira ça a ta sauce !

<!DOCTYPE html >
<head>
<meta charset ="iso-8859-1">
<title>test</title>
<link rel="stylesheet" type="text/css">

<style >
div#galerie	{
  position: absolute;
  width: 900px ; height: 550px;
  background: #998899;
  left:100px;
  top: 50px;
  border: 5px solid #dcb ;
  padding: 0px ;	margin: 0px ;
  text-align: center ;
 }
div#galerie_mini	{
  position: absolute;
  width: 400px ; height: 550px;
  background:#998899;
  top:50px;right: 50px;
  margin:0;padding: 0 ;
  
 }
div#galerie_mini ul li	{	float: right ;	list-style-type: none ;	}
div#galerie_mini ul li a img  {	margin: 5px 1px ;	border:4px solid gold;	}
dl#photo{	clear: both ;	margin: 0 auto ;}
dl#photo dt {	font: italic 1.5em/1.5em Georgia, serif ;	color: #36C;	}
dl#photo dd	{	margin: 0 ;		}
dl#photo img {	border: 1px solid #dcb ;    border-radius:15px;	}

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 20%;
  cursor: none;
  width: 140px;
  height: 100px;
  }
</style>
<script>
function loupe(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  img.parentElement.insertBefore(glass, img);
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
   function moveMagnifier(e) {
    var pos, x, y,flag;
      flag=99; 
      e.preventDefault();
      pos = getCursorPos(e);
      x = pos.x;
      y = pos.y;
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);flag=0;}
    if (x < w / zoom) {x = w / zoom;flag=0;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);flag=0;}
    if (y < h / zoom) {y = h / zoom;flag=0;}
    
    if (flag==0)   {glass.style.visibility="hidden";} else {glass.style.visibility="visible";}
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    a = img.getBoundingClientRect();
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
 }
 function change(e) { 
  var elem=document.getElementById(e); 
  var Limg = elem.src;
  var x = document.getElementById("big_pict");
  x.setAttribute("src", Limg);
  }
</script>
</head><body>
 <div id="galerie">
	<dl id="photo">
     <dt>Gravure </dt>
     <dd><img id="big_pict" src="http://les-astuces-du-web.com/avatar/1avat001.jpg"  width="800" height="450" alt="Gravure" /></dd>
	</dl>
 </div>  
<div id="galerie_mini">
 <ul>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat001.jpg" id="la1" onclick=change("la1"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat003.jpg" id="la3" onclick=change("la3"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat004.jpg" id="la4" onclick=change("la4"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat005.jpg" id="la5" onclick=change("la5"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat006.jpg" id="la6" onclick=change("la6"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat007.jpg" id="la7" onclick=change("la7"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat008.jpg" id="la8" onclick=change("la8"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat009.jpg" id="la9" onclick=change("la9"); return false;" alt="" /></a></li>
    <li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat010.jpg" id="la10" onclick=change("la10"); return false;" alt="" /></a></li>
 </ul>
</div>  
<script>
   loupe("big_pict", 3);
</script>
</body>
</html>

Modifié par Jean-Pierre-Bruneau (26 Feb 2020 - 04:19)
Merci, pour vos réponses.

ta fonction passent 2 variables,
l'id d'une image et la valeur du zoom: function loupe(imgID, zoom).
et tu n'as qu'une seule image avec un id exploitable dans ton code .

Enfin, on ne voit ta fonction lancé qu'une seule fois : loupe("big_pict", 3); .
big_pict est l'id de ta première image.
Si tu n'as que ce code dans ta page, c'est normal.

Il te faut attribué une ID différente à toutes tes images et actualiser cette variable dans ta fonction et la relancer pour chaque nouvelle image sélectionnée.

comment sélectionnes tu tes images ?
Modifié par gcyrillus (26 Feb 2020 - 00:51)

à gcyrillus,

cette ligne sélectionne mon image dans la mini galerie en cliquant sur les vignettes.
<ul id="galerie_mini">
<li><a href="../Img/nat/20190923_112845.jpg" id title="Val"><img src="../Img/aut/m_photo9.png" alt="photo 9" /></a></li>

je ne sais pas placer "l'appel de ma fonction loupe("big_pict", 3); " correctement.
sans perturber la galerie.
bonjour, Jean Pierre et merci.
j'ai copier coller ton correctif.
Mais le problème demeure.
L'intérieure de La loupe reste sur la première image..


<!DOCTYPE html >
<head>
<meta charset ="iso-8859-1">
<title>JPB.Test</title>
<link rel="stylesheet" type="text/css">

<style >
div#galerie	{
  position: absolute;
  width:650px ; height: 450px;
  background: #998899;
  left:100px;
  top: 50px;
  border: 5px solid #dcb ;
  padding: 0px ;	margin: 0px ;
  text-align: center ;
 }
div#galerie_mini	{
  position: absolute;
  width: 400px ; height: 400px;
  background:#998899;
  top:50px;right: 50px;
  margin:0;padding: 0 ;

 }
div#galerie_mini ul li	{	float: right ;	list-style-type: none ;	}
div#galerie_mini ul li a img  {	margin: 5px 1px ;	border:4px solid gold;	}
dl#photo{	clear: both ;	margin: 0 auto ;}
dl#photo dt {	font: italic 1.5em/1.5em Georgia, serif ;	color: #36C;	}
dl#photo dd	{	margin: 0 ;		}
dl#photo img {	border: 1px solid #dcb ;    border-radius:15px;	}

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 20%;
  cursor: none;
  width: 140px;
  height: 100px;
  }
</style>
<script>
function loupe(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  img.parentElement.insertBefore(glass, img);
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
   function moveMagnifier(e) {
    var pos, x, y,flag;
      flag=99;
      e.preventDefault();
      pos = getCursorPos(e);
      x = pos.x;
      y = pos.y;
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);flag=0;}
    if (x < w / zoom) {x = w / zoom;flag=0;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);flag=0;}
    if (y < h / zoom) {y = h / zoom;flag=0;}

    if (flag==0)   {glass.style.visibility="hidden";} else {glass.style.visibility="visible";}
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    a = img.getBoundingClientRect();
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
 }
 function change(e) {
  var elem=document.getElementById(e);
  var Limg = elem.src;
  var x = document.getElementById("big_pict");
  x.setAttribute("src", Limg);
  }
</script>
</head><body>
 <div id="galerie">
	<dl id="photo">
     <dt>Avatar 1 </dt>
     <dd><img id="big_pict" src="http://les-astuces-du-web.com/avatar/1avat001.jpg"  width="600" height="400" alt="Avatar 1" /></dd>
	</dl>
 </div>
<div id="galerie_mini">
 <ul>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat001.jpg" id="la2" onclick=change("la2"); return false;  alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat003.jpg" id="la3" onclick=change("la3"); return false;  alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat004.jpg" id="la4" onclick=change("la4"); return false;  alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat005.jpg" id="la5" onclick=change("la5"); return false;  alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat006.jpg" id="la6" onclick=change("la6"); return false;  alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat007.jpg" id="la7" onclick=change("la7"); return false;  alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat008.jpg" id="la8" onclick=change("la8"); return false;  alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat009.jpg" id="la9" onclick=change("la9"); return false;  alt="" /></a></li>
    <li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat010.jpg" id="la10" onclick=change("la10"); return false; alt="" /></a></li>
 </ul>
</div>
<script>
   loupe("big_pict", 3);
</script>
</body>
</html>

à moins d'une erreur de transcription de ma part....
j'ai tester le code du
https://codepen.io/jplyne/pen/Poqpbqy,
et copier coller ta réponse.Mais j'ai toujours le mème résultat.
La loupe reste sur la première image, par défaut.
en sélectionnant une autre image, la loupe ne change pas.?????


<!DOCTYPE html >
<head>
<meta charset ="iso-8859-1">
<title>test</title>
<link rel="stylesheet" type="text/css">

<style >
div#galerie	{
  position: absolute;
  width: 900px ; height: 550px;
  background: #998899;
  left:100px;
  top: 50px;
  border: 5px solid #dcb ;
  padding: 0px ;	margin: 0px ;
  text-align: center ;
 }
div#galerie_mini	{
  position: absolute;
  width: 400px ; height: 550px;
  background:#998899;
  top:50px;right: 50px;
  margin:0;padding: 0 ;

 }
div#galerie_mini ul li	{	float: right ;	list-style-type: none ;	}
div#galerie_mini ul li a img  {	margin: 5px 1px ;	border:4px solid gold;	}
dl#photo{	clear: both ;	margin: 0 auto ;}
dl#photo dt {	font: italic 1.5em/1.5em Georgia, serif ;	color: #36C;	}
dl#photo dd	{	margin: 0 ;		}
dl#photo img {	border: 1px solid #dcb ;    border-radius:15px;	}

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 20%;
  cursor: none;
  width: 140px;
  height: 100px;
  }
</style>
<script>
function loupe(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  img.parentElement.insertBefore(glass, img);
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
   function moveMagnifier(e) {
    var pos, x, y,flag;
      flag=99;
      e.preventDefault();
      pos = getCursorPos(e);
      x = pos.x;
      y = pos.y;
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);flag=0;}
    if (x < w / zoom) {x = w / zoom;flag=0;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);flag=0;}
    if (y < h / zoom) {y = h / zoom;flag=0;}

    if (flag==0)   {glass.style.visibility="hidden";} else {glass.style.visibility="visible";}
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    a = img.getBoundingClientRect();
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
 }
 function change(e) {
  var elem=document.getElementById(e);
  var Limg = elem.src;
  var x = document.getElementById("big_pict");
  x.setAttribute("src", Limg);
  }
</script>
</head><body>
 <div id="galerie">
	<dl id="photo">
     <dt>Gravure </dt>
     <dd><img id="big_pict" src="http://les-astuces-du-web.com/avatar/1avat001.jpg"  width="800" height="450" alt="Gravure" /></dd>
	</dl>
 </div>
<div id="galerie_mini">
 <ul>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat001.jpg" id="la1" onclick=change("la1"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat003.jpg" id="la3" onclick=change("la3"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat004.jpg" id="la4" onclick=change("la4"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat005.jpg" id="la5" onclick=change("la5"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat006.jpg" id="la6" onclick=change("la6"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat007.jpg" id="la7" onclick=change("la7"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat008.jpg" id="la8" onclick=change("la8"); return false;" alt="" /></a></li>
	<li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat009.jpg" id="la9" onclick=change("la9"); return false;" alt="" /></a></li>
    <li><a href="#"><img src="http://les-astuces-du-web.com/avatar/1avat010.jpg" id="la10" onclick=change("la10"); return false;" alt="" /></a></li>
 </ul>
</div>
<script>
   loupe("big_pict", 3);
</script>
</body>
</html>


Alors amuses toi à terminer mon travail de nettoyage
voila ou j'en suis, mets tout en copier coller dans un html et fais le marcher tu reconnectera et c'est déjà bien nettoyé .... mais il reste du travail !

<!doctype html>
<html lang="fr">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Test Zoom</title>
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.kreatin.fr/jqzoomevolution/1.4/themes/classic/assets/css/theme.css" type="text/css" media="all">
  <link rel="stylesheet" href="https://www.kreatin.fr/jqzoomevolution/1.4/modules/jqzoomevolution/views/css/jqzoomevolution.css" type="text/css" media="all">
  <link rel="stylesheet" href="https://www.kreatin.fr/jqzoomevolution/1.4/js/jquery/ui/themes/base/minified/jquery-ui.min.css" type="text/css" media="all">
  <link rel="stylesheet" href="https://www.kreatin.fr/jqzoomevolution/1.4/js/jquery/ui/themes/base/minified/jquery.ui.theme.min.css" type="text/css" media="all">
  <link rel="stylesheet" href="https://www.kreatin.fr/jqzoomevolution/1.4/modules/ps_imageslider/css/homeslider.css" type="text/css" media="all">
  <link rel="stylesheet" href="https://www.kreatin.fr/jqzoomevolution/1.4/themes/classic/assets/css/custom.css" type="text/css" media="all">
  <script type="text/javascript">
       var jqzoomConf = {"JQZOOM_POSITION":"right","JQZOOM_WIDTH":"0","JQZOOM_HEIGHT":"0","JQZOOM_XOFFSET":"20","JQZOOM_YOFFSET":"0","JQZOOM_BCOLOR":null,"JQZOOM_SHOWTITLE":"0","JQZOOM_LENSSHAPE":"box","JQZOOM_FADEINEFFECT":"1","JQZOOM_FADEOUTEFFECT":"1","JQZOOM_TINTCOLOR":"#000000","JQZOOM_TINTOPACITY":"0.4","JQZOOM_LENSCOLOR":null,"JQZOOM_LENSOPACITY":"0.4","JQZOOM_ZOOMPOWER":"-0.5"};
        var prestashop = {"cart":{"products":[],"totals":{"total":{"type":"total","label":"Total","amount":0,"value":"0,00\u00a0\u20ac"}},"subtotals":{"products":{"type":"products","label":"Sous-total","amount":0,"value":"0,00\u00a0\u20ac"},"discounts":null,"shipping":{"type":"shipping","label":"Livraison","amount":0,"value":"gratuit"},"tax":null},"products_count":0,"summary_string":"0 articles","labels":{"tax_short":"(TTC)","tax_long":"(TTC)"},"id_address_delivery":0,"id_address_invoice":0,"is_virtual":false,"vouchers":{"allowed":0,"added":[]},"discounts":[],"minimalPurchase":0,"minimalPurchaseRequired":""},"currency":{"name":"euro","iso_code":"EUR","iso_code_num":"978","sign":"\u20ac"},"customer":{"lastname":null,"firstname":null,"email":null,"last_passwd_gen":null,"birthday":null,"newsletter":null,"newsletter_date_add":null,"ip_registration_newsletter":null,"optin":null,"website":null,"company":null,"siret":null,"ape":null,"outstanding_allow_amount":0,"max_payment_days":0,"note":null,"is_guest":0,"id_shop":null,"id_shop_group":null,"id_default_group":1,"date_add":null,"date_upd":null,"reset_password_token":null,"reset_password_validity":null,"id":null,"is_logged":false,"gender":{"type":null,"name":null,"id":null},"risk":{"name":null,"color":null,"percent":null,"id":null},"addresses":[]},"language":{"name":"Fran\u00e7ais (French)","iso_code":"fr","locale":"fr-FR","language_code":"fr","is_rtl":"0","date_format_lite":"d\/m\/Y","date_format_full":"d\/m\/Y H:i:s","id":1},"page":{"title":"","canonical":null,"meta":{"title":"T-shirt d\u00e9lav\u00e9 \u00e0 manches courtes","description":"T-shirt d\u00e9lav\u00e9 \u00e0 manches courtes et col rond. Mati\u00e8re douce et extensible pour un confort in\u00e9gal\u00e9. Pour un look estival, portez-le avec un chapeau de paille\u00a0!","keywords":"","robots":"index"},"page_name":"product","body_classes":{"lang-fr":true,"lang-rtl":false,"country-FR":true,"currency-EUR":true,"layout-full-width":true,"page-product":true,"tax-display-enabled":true,"product-id-1":true,"product-T-shirt d\u00e9lav\u00e9 \u00e0 manches courtes":true,"product-id-category-5":true,"product-id-manufacturer-1":true,"product-id-supplier-1":true,"product-available-for-order":true},"admin_notifications":[]},"shop":{"name":"JQZOOMEVOLUTION D\u00e9mo v1.4","email":"contact@kreatin.fr","registration_number":"","long":false,"lat":false,"logo":"\/jqzoomevolution\/1.4\/img\/logo.png","stores_icon":"\/jqzoomevolution\/1.4\/img\/logo_stores.png","favicon":"\/jqzoomevolution\/1.4\/img\/favicon.ico","favicon_update_time":"1324977642","address":{"formatted":"JQZOOMEVOLUTION D\u00e9mo v1.4<br>France","address1":"","address2":"","postcode":"","city":"","state":null,"country":"France"},"phone":"","fax":""},"urls":{"base_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/","current_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/tshirts\/1-1-t-shirt-delave-manches-courtes.html","shop_domain_url":"https:\/\/www.kreatin.fr","img_ps_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/img\/","img_cat_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/img\/c\/","img_lang_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/img\/l\/","img_prod_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/img\/p\/","img_manu_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/img\/m\/","img_sup_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/img\/su\/","img_ship_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/img\/s\/","img_store_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/img\/st\/","img_col_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/img\/co\/","img_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/themes\/classic\/assets\/img\/","css_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/themes\/classic\/assets\/css\/","js_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/themes\/classic\/assets\/js\/","pic_url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/upload\/","pages":{"address":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/adresse","addresses":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/adresses","authentication":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/connexion","cart":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/panier","category":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/index.php?controller=category","cms":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/index.php?controller=cms","contact":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/nous-contacter","discount":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/reduction","guest_tracking":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/suivi-commande-invite","history":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/historique-commandes","identity":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/identite","index":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/","my_account":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/mon-compte","order_confirmation":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/confirmation-commande","order_detail":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/index.php?controller=order-detail","order_follow":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/suivi-commande","order":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/commande","order_return":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/index.php?controller=order-return","order_slip":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/avoirs","pagenotfound":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/page-introuvable","password":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/recuperation-mot-de-passe","pdf_invoice":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/index.php?controller=pdf-invoice","pdf_order_return":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/index.php?controller=pdf-order-return","pdf_order_slip":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/index.php?controller=pdf-order-slip","prices_drop":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/promotions","product":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/index.php?controller=product","search":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/recherche","sitemap":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/plan-site","stores":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/magasins","supplier":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/fournisseur","register":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/connexion?create_account=1","order_login":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/commande?login=1"},"theme_assets":"\/jqzoomevolution\/1.4\/themes\/classic\/assets\/","actions":{"logout":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/?mylogout="}},"configuration":{"display_taxes_label":true,"low_quantity_threshold":3,"is_b2b":false,"is_catalog":false,"show_prices":true,"opt_in":{"partner":true},"quantity_discount":{"type":"discount","label":"R\u00e9duction"},"voucher_enabled":0,"return_enabled":0,"number_of_days_for_return":14},"field_required":[],"breadcrumb":{"links":[{"title":"Accueil","url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/"},{"title":"Women","url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/3-women"},{"title":"Tops","url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/4-tops"},{"title":"T-shirts","url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/5-tshirts"},{"title":"T-shirt d\u00e9lav\u00e9 \u00e0 manches courtes","url":"https:\/\/www.kreatin.fr\/jqzoomevolution\/1.4\/tshirts\/1-t-shirt-delave-manches-courtes.html"}],"count":5},"link":{"protocol_link":"https:\/\/","protocol_content":"https:\/\/"},"time":1582731578,"static_token":"9478a3143b3ce68ceb3cf0bbe08bfc4d","token":"9535cdf626c8c363fab6c5cb60d84009"};
  
  </script>
 </head>
 <body id="product">
 <main>
    <section id="wrapper">
      <div class="container">
    <div id="content-wrapper">
  <section id="main" itemscope itemtype="https://schema.org/Product">
    <meta itemprop="url" content="https://www.kreatin.fr/jqzoomevolution/1.4/tshirts/1-1-t-shirt-delave-manches-courtes.html#/1-taille-s/13-couleur-orange">
  <div class="row">
      <div class="col-md-6">
        
          <section class="page-content" id="content">
            
              
              
                <div class="images-container">
  
    <div class="product-cover">
      <img class="js-qv-product-cover" src="https://www.kreatin.fr/jqzoomevolution/1.4/1-large_default/t-shirt-delave-manches-courtes.jpg" alt="" title="" style="width:100%;" itemprop="image">
      <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
        <i class="material-icons zoom-in">&#xE8FF;</i>
      </div>
    </div>
  

  
    <div class="js-qv-mask mask">
      <ul class="product-images js-qv-product-images">
                  <li class="thumb-container">
            <img
              class="thumb js-thumb  selected "
              data-image-medium-src="https://www.kreatin.fr/jqzoomevolution/1.4/1-medium_default/t-shirt-delave-manches-courtes.jpg"
              data-image-large-src="https://www.kreatin.fr/jqzoomevolution/1.4/1-large_default/t-shirt-delave-manches-courtes.jpg"
              src="https://www.kreatin.fr/jqzoomevolution/1.4/1-home_default/t-shirt-delave-manches-courtes.jpg"
              alt=""
              title=""
              width="100"
              itemprop="image"
            >
          </li>
                  <li class="thumb-container">
            <img
              class="thumb js-thumb "
              data-image-medium-src="https://www.kreatin.fr/jqzoomevolution/1.4/2-medium_default/t-shirt-delave-manches-courtes.jpg"
              data-image-large-src="https://www.kreatin.fr/jqzoomevolution/1.4/2-large_default/t-shirt-delave-manches-courtes.jpg"
              src="https://www.kreatin.fr/jqzoomevolution/1.4/2-home_default/t-shirt-delave-manches-courtes.jpg"
              alt=""
              title=""
              width="100"
              itemprop="image"
            >
          </li>
              </ul>
    </div>
  
</div>

              
              <div class="scroll-box-arrows">
                <i class="material-icons left">&#xE314;</i>
                <i class="material-icons right">&#xE315;</i>
              </div>

            
          </section>
        
        </div>
        <div class="col-md-6">
      </div>
    </div>

      <div class="modal fade js-product-images-modal" id="product-modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
                <figure>
          <img class="js-modal-product-cover product-cover-modal" width="800" src="https://www.kreatin.fr/jqzoomevolution/1.4/1-large_default/t-shirt-delave-manches-courtes.jpg" alt="" title="" itemprop="image">
          <figcaption class="image-caption">
          
            <div id="product-description-short" itemprop="description"><p>T-shirt délavé à manches courtes et col rond. Matière douce et extensible pour un confort inégalé. Pour un look estival, portez-le avec un chapeau de paille !</p></div>
          
        </figcaption>
        </figure>
        <aside id="thumbnails" class="thumbnails js-thumbnails text-xs-center">
          
            <div class="js-modal-mask mask  nomargin ">
              <ul class="product-images js-modal-product-images">
                                  <li class="thumb-container">
                    <img data-image-large-src="https://www.kreatin.fr/jqzoomevolution/1.4/1-large_default/t-shirt-delave-manches-courtes.jpg" class="thumb js-modal-thumb" src="https://www.kreatin.fr/jqzoomevolution/1.4/1-home_default/t-shirt-delave-manches-courtes.jpg" alt="" title="" width="250" itemprop="image">
                  </li>
                                  <li class="thumb-container">
                    <img data-image-large-src="https://www.kreatin.fr/jqzoomevolution/1.4/2-large_default/t-shirt-delave-manches-courtes.jpg" class="thumb js-modal-thumb" src="https://www.kreatin.fr/jqzoomevolution/1.4/2-home_default/t-shirt-delave-manches-courtes.jpg" alt="" title="" width="250" itemprop="image">
                  </li>
                              </ul>
            </div>
          
                  </aside>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</section>
</div>
</div>
</section>

       
</main>
  <script type="text/javascript" src="https://www.kreatin.fr/jqzoomevolution/1.4/themes/core.js" ></script>
  <script type="text/javascript" src="https://www.kreatin.fr/jqzoomevolution/1.4/themes/classic/assets/js/theme.js" ></script>
  <script type="text/javascript" src="https://www.kreatin.fr/jqzoomevolution/1.4/modules/jqzoomevolution/views/js/jqzoomevolution.js" ></script>
  <script type="text/javascript" src="https://www.kreatin.fr/jqzoomevolution/1.4/js/jquery/ui/jquery-ui.min.js" ></script>
  
  </body></html>
Impressionnant....
je vais me mettre au travail, c'est pas évident.
c'est pas de mon niveau, mais on verra.
Je te tient au courant.
Merci.
Modérateur
FlavAnton a écrit :
le site original pour l'utilisation de la loupe.
avec la roulette de la souris on règle le zoom.
http://lienversmonscript.com/xZoom/

Cela n'est apparemment pas ce que l'on trouve dans tes premier post. ... c'est un script qui s'appuie sur jQuery., il y a un zip à télecharger et une documentation : le site du script + /xZoom/docs/index.html . C'est quoi l'idée ici ?
Modifié par gcyrillus (26 Feb 2020 - 23:34)
Bonjour gcyrillus,
l’idée de départ est toujours la mème,
à savoir de choisir une mini-photo, de l’agrandir et d'utiliser une loupe
pour voir les détails.
C'est pour moi le but ultime de mon futur site.
J'ai des photographies perso de mes ballades en montagne en particulier dans le sud de la France.
il existe dans le sud de la France un site de gravures rupestres.
C'est la vallée des merveilles à l'ouest du parc de Mercantour.
upload/1582782160-78944-gravure546x368.jpg
voila le résultat que je souhaite obtenir.
Zoomer sur les gravures pour voir ça en détails et découvrir ces dessins.
La finalité c'est de partager ces photos d'un endroit fantastique que nous ont léguer
nos ancêtres. C'est un endroit magique à préserver, à faire découvrir.
Il y a des milliers de gravures à ciel ouvert sculpter sur des dalles en ocre.
Un patrimoine mondial méconnu en France.
Mon but est de partager ces photos pour ceux qui ne pourront jamais accéder
à ces montagnes.Il faut quelques heures de marche pour atteindre ces endroits
à plus de 2000m d'altitude.
Mon but en ce moment c'est plus de 2000m de Code.....
c'est dur mais j'y vais grâce à votre concours....

Bonne journée.
Modérateur
okay, mais sur quel script butes tu en final ?

Celui que tu as partagé dans ton premier post, le second en lien ou ce dernier script configurable ?

Pour le dernier lien fourni, extrait de la demo qui semble t'interesser. https://codepen.io/gc-nomade/pen/eYNWZpm
Modifié par gcyrillus (27 Feb 2020 - 16:19)
dans la mesure du possible j'aimerai utiliser mon premier post avec la function loupe(imgID, zoom).
je l'ai adapter sur une image, mais je ne sais pas le faire sur plusieurs photos
comme tu l'as écrit:
"Il te faut attribué une ID différente à toutes tes images et actualiser cette variable dans ta fonction et la relancer pour chaque nouvelle image sélectionnée. "
c'est peut être la solution.....
ça je ne sais pas le faire..pas encore..
alors j’essaie les autres pistes.
J'aimerai éviter les gros scripts tout prêt que je ne comprend pas et utiliser une solution que je maitrise.
les gros scripts seront utilisés par défaut....je ne veux pas réinventer la roue...
Modérateur
on peut alors se servir de la base de ce script (dans le sujet https://forum.alsacreations.com/topic.php?fid=5&tid=86225 ) pour ajouter évènement onclick sur chaque lien et mettre à jour l'image affichée ainsi que celle en fond de ta loupe :

dans ta balise script , ajoute aprés l'appel de ta loupe :
loupe("big_pict", 3);
const imgClick = document.querySelectorAll("#galerie_mini li a ");
var IMG = document.querySelector("#big_pict");
var imgLoupe = document.querySelector(".img-magnifier-glass");
for (let i = 0; i < imgClick.length; i++) {
  imgClick[i].addEventListener("click", function() {
    var cetteImg = imgClick[ i].href;
    imgLoupe.style.backgroundImage = "url(" + cetteImg + ")";
    //  setTimeout pour réveiller Firefox , sinon pas de rafraichissement d'image
    IMG.src = "";
    setTimeout(function() {
      IMG.src = cetteImg;
    }, 0);
  });
}


un codepen pour le test : https://codepen.io/gc-nomade/pen/dyoWvEN
il suffit de garder la structure avec l'id gallery ainsi que celui de l'image de présentation. le nombre de lien n'a pas d'importance, il en faut au moins 1

La première image peut te servir pour afficher un mode d'emploi par exemple .

Édit : pas besoin non plus de charger une librairie de type jQuery
https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll
Modifié par gcyrillus (28 Feb 2020 - 11:57)