11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu par Ze Nenex] JQuery : utilisation de resize et de cropping

Bonjour à tous,

J'ai un petit problème d'interactions et je voudrais connaître votre avis sur mon code qui fait à peu près 60 lignes...
Le but que je cherche à atteindre, c'est coupler un resize (redimensionnement de l'image) avec un crop(sélection d'une partie de l'image en vue d'un découpage)

Le soucis, c'est que pour le resize, j'ai un code qui fonctionne, et pour le cropping, le code fonctionne également. Mais dès que je les assemble, il se passe des choses bizarres. Les images ne se redimensionnent plus. Pourtant, le ghost (fantome de l'image qui aide à obtenir l'agrandissement voulu), lui, prend la bonne taille !!

Voici mon code :

<html>
	<head>
		
		<title>jQuery UI Resizable - Preserve aspect ratio</title>
		<link type="text/css" href="../css/ui.allPERSO.css" rel="stylesheet" />
		<link type="text/css" href="../css/Une_Ligne.css" rel="stylesheet" />
		
		<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="../js/ui.core.js"></script>
		<script type="text/javascript" src="../js/ui.resizable.js"></script>
		
		<!-- Ci dessous les sources pour le JCROP-->

		<script src="../js/jquery.Jcrop.js"></script>
		<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
		
		<script language="Javascript">
		
			jQuery(document).ready(function(){
				$(function(){
					$("img").resizable({
						aspectRatio: true,
						ghost: true
					});
				});
				
				jQuery($("img")).Jcrop({
					onChange: showCoords,
					onSelect: giveCoords
				});
			});
					
			function showCoords(c)
			{				
				jQuery('#x').val(c.x);
				jQuery('#y').val(c.y);
				jQuery('#x2').val(c.x2);
				jQuery('#y2').val(c.y2);
				jQuery('#w').val(c.w);
				jQuery('#h').val(c.h);
			}; 
			
			function giveCoords(c)
			{
				jQuery(alert("Les coordonnees sont les suivantes : \nOrigine : x= " + c.x + " et y= " + c.y +"\nExtrémité : x= " + c.x2 + " et y= " + c.y2 + "\nLa largeur de la sélection fait " + c.w + "pixels, et la hauteur fait " + c.h + "pixels"));
			}
				
		</script>
	
	</head>
	
	<body>
		
			<img src="../images/flowers.jpg" />
			
			<img src="../images/flowers2.jpg" />

	</body>
	
</html>


Y voyez-vous une grosse erreur ?
Dans l'idéal, il faudrait que j'envoie le zip à la bonne âme prête à m'aider...

Merci d'avance,

Salutations à tous,

Davor
Modifié par Davorrovad (13 Aug 2009 - 00:42)
Salut

Tu mets un écouteur sur document ready à l'intérieur du premier écouteur de document ready. Donc, déjà, essaie de remplacer ça
jQuery(document).ready(function(){

	$(function(){
		$("img").resizable({
			aspectRatio: true,
			ghost: true
		});
	});
	
	jQuery($("img")).Jcrop({
		onChange: showCoords,
		onSelect: giveCoords
	});

});
Par ça
$(function(){

	$("img").resizable({
		aspectRatio: true,
		ghost: true
	}).Jcrop({
		onChange: showCoords,
		onSelect: giveCoords
	});

});
Merci pour l'astuce. Elle n'empire rien, au contraire elle allège mon code.
Par contre, j'ai toujours le même problème. Elle ne le résout pas...

Voilà, j'ai hébergé mon zip si vous voulez y jeter un coup d'oeil.
http://dl.free.fr/qNcjs9aVd
Le mot de passe pour le téléchargement est : Alsacreation
Et le mot de passe pour extraire l'archive, c'est le même.

Merci pour votre aide

Salutations,

Davor
Modifié par Davorrovad (12 Aug 2009 - 19:21)
Soyons grossier
Putain de bordel de merde! Mais... j'ai réussi... T'en as de la veine.

Le soucis était que ce Jcrop (pas optimisé, pas documenté et franchement le code est moche) n'a aucune fonction de mise à jour. Et comme ça m'a grave gavé de lire ce truc, voici ce que tu devras faire.

Jcrop ligne 1094. Rajouter:
function bounds(w, h) {
    boundx = w;
    boundy = h;
    interfaceUpdate();
}
Une fois fait, Jcrop ligne 1151. Rajouter:
bounds: bounds,
Et enfin, ton code principal:
$(function(){
	var baseImg = $("img");
	
	// Mets tes fonctions ici, puis

	baseImg.resizable({
		aspectRatio: true,
		ghost: true,
		resize: function(event, ui) {
			$(this).find(
				".ui-resizable, " +
				".jcrop-holder, " +
				".jcrop-holder img, " +
				".jcrop-tracker"
			)
			.width(ui.size.width)
			.height(ui.size.height);
			
			baseImg.each(function() {
				$(this).data("Jcrop").bounds(
					ui.size.width,
					ui.size.height
				);
			});
		}
	}).Jcrop({
		onChange: showCoords,
		onSelect: giveCoords
	});
});
Voila.
Bon courage

Edit: merci pour le challenge!
 
Modifié par Ze Nenex (12 Aug 2009 - 19:32)
Merci l'ami, pour le temps que tu m'as consacré. Je vais à présent sauter sur ce que tu m'as gracieusement offert. Je reviendrai clore le sujet si c'est bon. Mais les remerciement priment Smiley cligne

Mille fois merci,

@+
Merci, ça marche impeccablement bien...Tu es un génie...Je dirai même :
upload/23286-TuesunDieu.JPG


Par contre, il demeure un petit soucis... Smiley confused Smiley confused Smiley confused Smiley confused Le Ghost...il n'apparaît que lorsque j'agrandis mon image. Mais bon...C'est un détail Smiley cligne
Merci encore pour l'aide !!
Modifié par Davorrovad (12 Aug 2009 - 22:16)
AAAAAaaaahhhhhh

Madonne...Quand je rétrécis l'image numéro 2, le cropping sur l'image du dessus ne fonctionne plus très bien...Pire, il n'est plus élargissable à toute la largeur (...) de l'image du dessus.

Ouïe ouïe ouïe Smiley eek
Ouais je viens de revoir mon code et effectivement il y a une erreur.
Remplace la fonction resize par ça:
resize: function(event, ui) {
	var t = $(this),
		r = t.find(".ui-resizable");

	t.find(
		".jcrop-holder, " +
		".jcrop-holder img, " +
		".jcrop-tracker"
	)
	.add(r)
	.width(ui.size.width)
	.height(ui.size.height);
	
	r.data("Jcrop").bounds(
		ui.size.width,
		ui.size.height
	);
}
Trop fort, tu es géant, ça marche !

Par contre, c'est mon PC qui rame, ou le ghost apparaissant lors du rétrécissement n'apparaît que sur l'image du bas ? en principe il devrait être présent dès que l'image change de taille.

Quand je pense que ça fait 3 jours que je cherche une solution pour résoudre ces problèmes d'interactions entre ce JCrop et ce Resize...Franchement tu me sauves Smiley smile
Modifié par Davorrovad (13 Aug 2009 - 00:13)
Comme je te l'ai dit en MP, ces deux scripts ne sont pas du tout fait pour s'entendre. Normal que ce soit compliqué. Et puis la solution que je te donne n'est pas géniale non plus, quoi qu'à l'image du script Jcrop... Ça bouffe beaucoup de ressources.
Salut,

pourrais-tu remettre ton code à disposition ?
J'ai le même problème entre Jcrop et resize.

Merci d'avance,

Fireknight
Sujet clos
Aller à