28111 sujets

CSS et mise en forme, CSS3

[Résolu] Galerie avec vignettes et loupe sur l'image choisie

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)
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>
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)
Bravo, vous assurez un max.
Jean Pierre, j'essaie d'ajuster ton script qui fonctionne, la loupe est sur la bonne image.
enfin...
Mais je ne comprend pas tout, j'ai un décalage de zoom avec mes images.
quelles dimensions....pour mes images et quel réglage du zoom.

gcyrillus, j'ai pas encore réussi avec ton script, ton codepen fonctionne mais je ne l'ai pas bien adapter, je tourne avec firefox....
Encore Merci les gars.. c'est du top..
Modérateur
.. quand à mon script, il se base sur le html que tu as donné, il ajoute un onclick sur chaque lien. Quand tu click, le href est appliqué comme source a big_pict et aussi comme fond à ta loupe. Il ne fait rien d'autre.
Cest ton script loupe() qui deplace la loupe en réactualisant le background-position. 

<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>
      <!-- etc .. -->
		</ul>
	</div>  <!-- galerie -->
    <script>
   /* fonction avec l'id de l'image et la force de la loupe:*/
   loupe("big_pict", 3);
      // ici tu insère le script qui ajoute onclick sur tes liens et qui met a jours la grande image et la loupe
</script>


Si tu as modifier ton html, id et liste. Alors il te faut mettre à jour le sélecteur qui cible les liens ou être clair dans l'exposé de ton problème. (Pas besoin de réinventé la roue Smiley cligne )

ce que fait le script équivaut a faire sur chaque lien :
<ul id="galerie_mini">
			<li><a href="../Img/nat/20190923_112845.jpg"	onclick="updtateBimg(this.href);return false;"  id title="Val"><img  src="../Img/aut/m_photo9.png" alt="photo 9" /></a></li>    
<!-- etc ... -->

en appelant une fonction du style :
function updtateBimg(img){
  var bigImg = document.getElementById('big_pict');
  var bgLoupe =document.querySelector('.img-magnifier-glass');
  bgLoupe.style.backgroundImage= "url(" + img + ")";;
  bigImg.src=img;
}


Voilà si tu préfère mettre le onclick à la main sur chaque lien et mettre les actions à effectuer à part .

Cdt
Modifié par gcyrillus (28 Feb 2020 - 20:18)
Modérateur
Jean-Pierre-Bruneau a écrit :
Alors vous savez le vieux JP n'aimes pas les Jquery et autres usines à gaz, alors juste pour le plaisir, je me le suis fait façon tout "à la main"
Brzavo quand même pour ta version parce que le placement de mon background est un peut léger... je verrais ça au réveil ! Smiley confused
https://codepen.io/jplyne/pen/mdJmMXW


position:relative/absolute devrait suffire à regler ton soucis pour repositionner ta loupe https://codepen.io/gc-nomade/pen/OJVmqZV

modif sur ligne 4 et 16 :
.content {/* ... */position:relative;}
div#divloupe{/* ...  */ position:/*fixed*/absolute;/* ...  */ }


bien joué!
Modifié par gcyrillus (29 Feb 2020 - 15:39)
Merci les gars, j'ai réussi à avancer avec vos réponses.
A voir sur "https://oreade.me" page rupestre...
le reste est en construction...j'ai du boulot...
MERCI.
J’ai apporté quelques modifications,

Pour obtenir un rendu facile à lire, sans zoom, et que le viewport soit le même que la largeur de l’écran :
<meta name=" viewport " content ="width=device -width" /> suffit .
« initial-scale=1.0 » perturbe de trop mes pages…
Sur mon mobile Samsung ca passe très bien..sur ma tablette la page » MercanTour « bugge..
Je crois que le css float je ne maitrise pas bien…

A+
Pages :
Sujet clos
Aller à