Jump to content

Probleme zoom jqzoom

Akwel
 Share

Recommended Posts

Akwel Newbie

Akwel

Posted
Posted
Bonjour

 

Je rencontre un pb sur le jqzoom 

 

j’ai tenté des dizaines de configurations mais je n’arrive pas a obtenir de zoom plus grand avec l’option jqzoom.

j’ai modifier la taille de l image thickbox défaut comme thickbox du thème et modifié les valeurs dans le fichier product.js du thème.

Mais rien ne zoom plus grand …le cadre lui s’agrandit bien mais l’image reste aux dimensions d’origine …et cela ne fonctionne qu avec la première image produit. (quand on zoom sur la deuxième image ou la troisième etc… on a toujours la première image qui s’affiche dans le zoom au lieu des images sélectionnés) (voir captures jointes)

 

Que puis je faire pour avoir un vrai effet de zoom et pour chacune des images du produit?

D’avance merci 

Cordialement.

post-742681-0-13624900-1407316094_thumb.jpg

post-742681-0-21689100-1407316101_thumb.jpg

Link to comment
Share on other sites
  • 1 month later...
Sam Minerve Newbie

Sam Minerve

Posted
Posted

Bonjour,

 

Avez-vous trouvé une solution à votre problème ? Je cherche aussi à obtenir un effet de zoom plus grand. J'ai lu ici et là qu'il fallait agrandir la taille de l'image même mais dans ce cas on augmente également le poids de l'image. D'après les conseils que j'ai pu lire, pour optimiser le chargement, le poids de l'image ne doit pas dépasser les 150 ko. Plutôt compliqué. :/

Link to comment
Share on other sites
  • 1 month later...
Eolia Grand Master

Eolia

Posted
Posted (edited)

POUR VERSIONS 1.5 UNIQUEMENT :

 

Remplacez le contenu du fichier jquery.jqzoom.js  (situé dans: votre_boutique/js/jquery/plugins/ jqzoom/jquery.jqzoom.js) par:

// jQZoom allows you to realize a small magnifier window,close
// to the image or images on your web page easily.
//
// jqZoom version 1.2
// Author Doc. Ing. Renzi Marco(www.mind-projects.it)
// Released on Dec 05 2007
// i'm searching for a job,pick me up!!!
// mail: [email protected]
//
// modified by Eolia - 2/11/2014


(function($) {
		$.fn.jqueryzoom = function(options) {
			var settings = {
				xzoom: 200,			//zoomed width default width
				yzoom: 200,			//zoomed div default width
				offset: 10,			//zoomed div default offset
				position: "right"	//zoomed div default position,offset position is to the right of the image
			};

			if(options)
				$.extend(settings, options);

			$(this).hover(function() {
				var imageRelativeLeft = $(this).get(0).offsetLeft;
				var imageLeft = $($(this).get(0)).offset().left;
				var imageRelativeTop =  $(this).get(0).offsetTop;
				var imageTop = $($(this).get(0)).offset().top;
				var imageWidth = $(this).get(0).offsetWidth;
				var imageHeight = $(this).get(0).offsetHeight;
				var imageNew = $('#bigpic').attr('src');
				var bigimage = imageNew.replace('large', 'thickbox');
				if($("div.zoomdiv").get().length == 0)
					$(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");

				if(settings.position == "right")
					leftpos = imageRelativeLeft + imageWidth + settings.offset;
				else
					leftpos = imageRelativeLeft - settings.xzoom - settings.offset;

				$("div.zoomdiv").css({top: imageRelativeTop,left: leftpos});
				$("div.zoomdiv").width(settings.xzoom);
				$("div.zoomdiv").height(settings.yzoom);
				$("div.zoomdiv").show();

				$(document.body).mousemove(function(e) {
					var bigwidth = $(".bigimg").get(0).offsetWidth;
					var bigheight = $(".bigimg").get(0).offsetHeight;
					var scaley ='x';
					var scalex= 'y';

					if(isNaN(scalex)|isNaN(scaley)) {
						var scalex = Math.round(bigwidth/imageWidth) ;
						var scaley = Math.round(bigheight/imageHeight);
					}

					mouse = new MouseEvent(e);

					scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ;
					$("div.zoomdiv").get(0).scrollTop = scrolly * scaley  ;
					scrollx = mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ;
					$("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;
				});
			}, function() {
				$("div.zoomdiv").hide();
				$(document.body).unbind("mousemove");
				$(".lenszoom").remove();
				$("div.zoomdiv").remove();
			});
		}
})(jQuery);

function MouseEvent(e) {
	this.x = e.pageX
	this.y = e.pageY
}

Enjoy :)

Edited by Eolia (see edit history)
  • Like 2
Link to comment
Share on other sites
  • 1 month later...
  • 3 weeks later...
  • 2 years later...
  • 1 year later...
Lyn&Or Bijoux Explorer

Lyn&Or Bijoux

Posted
Posted

Bonjour,

J'ai le même soucis, sous PS 1.6.1.12

Le zoom agrandit seulement la marge autour de l'image. J'aimerai que l'image thickbox, utilisée sur le zoom, sois l'image que je télécharge au départ. Comme ça, je suis sûre qu'elle aura la taille maximum possible, car certaines de mes images font 200 px, et d'autres 1200px... Donc le rendu des images thickbox paramétrées en 600 x 600 ou 900 x 900 ne peuvent pas convenir à tous les produits.

Quelqu'un a une idée de comment procéder pour faire ça?

Merci par avance et bonne journée

Marilyne

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...