[Aide] Problème avec un script de loupe

cytheria · Octobre 7, 2018, 2:12

Bonjour à tous,

J’essaye actuellement d’incorporer un script pour activer une loupe sur mon portfolio, j’utilise pour ça le plugin elevateweb.

Dans mon code, j’ai bien ajouté cette partie :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/javascripts/jquery.elevatezoom.js"></script>
<script type="text/javascript">
    $(".zoom").elevateZoom({
        zoomType			: "lens",
	lensShape			: "round",
	lensSize			: 250,
	lensZoom			: true,
	borderSize		: 2,
	borderColour	: "#bfa96e"
    });
</script>

Tout fonctionne très bien, jusqu’à ce que j’essaye d’appeler une fonction qui se trouve dans la page de config : la fonction containLensZoom.

Quand je la met sur false (qui est la valeur par défaut) tout va bien. Par contre quand je passe celle-ci à true le JS ne fonctionne plus du tout, la loupe entière disparait mais sans me sortir d’erreurs dans la console.

N’ai-je pas compris quelque chose ? Avez-vous des pistes pour m’aider ?

Merci beaucoup !

EDIT : Si vous voulez avoir une idée plus globale du problème en condition réelle, vous pouvez vous rendre directement sur mon portfolio à cette adresse. C’est au niveau des captures d’écrans de présentation, ça vous aidera peut-être d’une quelconque manière !

androd · Octobre 15, 2018, 10:18

Bonsoir Cytheria,

Alors je t’avouerai que je n’ai jamais utilise ce plugin, cependant je me demande si tu ne dois pas utiliser l’option responsive : true

"responsive
false
Set to true to activate responsivenes. If you have a THEMES WHICH CHANGES SIZE or tablets which change orientation this is needed to be on. Possible Values: "True" , "False""

vu que ton conteneur => containLensZoom doit changer de taille, peut etre que l’option responsive resoudra le probleme,

Si tu as trouve la reponse et/ou que ma reponse n’est pas bonne, je veux bien savoir du coup ce qui faisait buguer le code finalement

cytheria · Octobre 17, 2018, 11:45

Bonjour @androd :)

Je viens de tester ta solution, en effet le responsive s’active sans souci quand je le passe à true ; par contre ça “replante” pareil qu’avant quand je viens mettre mon containLensZoom.

Tu devines donc que je n’ai toujours pas trouvé le problème, mais je ne manquerais pas de le signaler et l’expliquer si je trouve !

androd · Octobre 17, 2018, 8:47

Bonsoir @cytheria,

Alors je me suis permis de reprendre un bout de ton code et de l’essayer :)
Apparemment ca fonctionne pour moi (selon la taille de l’image)
Quand tu cliques sur l’onglet réseau de l’inspecteur d’élément
tu as juste l’état 200 ou il t’affiche un autre état ?

 <!DOCTYPE html>
<html>
	<head>
		<title>Justine Muller - Intégratrice, Webdesigner & formatrice</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			img{
				
				width:200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<main id="load" class="animate-bottom">
			<section class="work">
				<h1>Teezily : Création d'objets personnalisés</h1>
				<p>Fondée en janvier 2014, Teezily est une plateforme commercialisant des milliers de produits personnalisés. Que vous soyez à la recherche d’un cadeau personnalisé pour un proche ou d’un accessoire unique et décalé pour vous démarquer des autres, ne cherchez pas plus loin : Teezily est là pour satisfaire vos besoins ! </p>
				<h2>Nature du projet :</h2>
				<p>En charge de l'intégration des mockups des nouvelles fonctionnalités ou bien des modifications apportées aux existantes, avec comme technologie du HAML, du Less, du Bootstrap ou d'une manière plus classique du HTML et du CSS. Les pages étant toujours en cours de création lors de mon départ, celles-ci ne sont pas encore forcément visible sur le site actuellement.</p>
				<article>
					<img class="zoom site" src="aston.jpg" data-zoom-image="aston.jpg" alt="Maquette de Mindgeek">
					<div class="work__sticky">
						<h3>La page de login :</h3>
						<p>Mise à jour de la page prééxistante, elle conserve les mêmes fonctionnalités mais allège la page qui se doit d'être simple et agréable.</p>
					</div>
				</article>
			</section>
		</main>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.elevatezoom.js"></script>
		<script type="text/javascript">
		$(".zoom").elevateZoom({
			zoomType			: "lens",
			lensShape			: "round",
			lensSize			: 250,
			lensZoom			: true,
			borderSize		: 2,
			borderColour	: "#bfa96e",
			containLensZoom : "true"
		});
		</script>
	</body>
</html>