Lägga till i funktion i jquery och jcrop?

3 svar · 741 visningar · startad av clacke 2 nov. 2010

clackeMedlem sedan feb. 2003234 inlägg

Frågan2 nov. 2010 20:16#1

Jag håller på med ett upload script där jag också beskär bilden med hjälp av Jcrop, vilket funkar kanon.
Startkoden i Jcrop ser ut så här:

jQuery(window).load(function(){
		var api = $.Jcrop('#cropbox',{
		boxWidth: 450,
		setSelect: [0,0,320,460],
		onChange: showPreview, //showPreview är en annan funktion
		onSelect: showPreview,
		aspectRatio: 4 / 5.75,    
		minSize: [ 100, 200 ],
		maxSize: [ 320, 460 ]	
	});

Jag har 2st knappar i ett formulär som sätter storleken på croprutan i bilden, med nedan funktioner.

                        jQuery('#image320x460').click(function(e) {
			api.animateTo([ 0, 0, 320, 460 ]);
			return nothing(e);
			});			   
			
			jQuery('#image100x200').click(function(e) {
			api.animateTo([ 0, 0, 100, 200 ]);
			return nothing(e);
			});

Det jag behöver hjälp med är:
När man klickar på knapparna vill jag sätta nedan kod i ovan funktioner och inte i den övre koden, så att tex aspectRatio kan ha olika värden beroende på vilken knapp man har klickat på.

		onChange: showPreview,
		onSelect: showPreview,
		aspectRatio: 4 / 5.75, 
		minSize: [ 100, 200 ],
		maxSize: [ 320, 460 ]

Så att det ser ut ungefär så här: (fast fungerande :-) )

                        jQuery('#image320x460').click(function(e) {
			api.animateTo([ 0, 0, 320, 460 ]);
			return nothing(e);

		        onChange: showPreview,
		        onSelect: showPreview,
		        aspectRatio: 4 / 5.75, 
		        minSize: [ 320, 460 ],
		        maxSize: [ 320, 460 ]

			});			   
			
			jQuery('#image100x200').click(function(e) {
			api.animateTo([ 0, 0, 100, 200 ]);
			return nothing(e);

		       onChange: showPreviewNr2,
		       onSelect: showPreviewNr2,
		       aspectRatio: 16 / 9, 
		       minSize: [ 100, 200 ],
		       maxSize: [ 100, 200 ]
			});

Lite krångligt att förklara, hoppas det är någon som kan och förstår vad jag menar.
Har suttit hela dan och testat, men inte fått till det, mycket tacksam för hjälp.

voigtann1Medlem sedan juni 20019 519 inlägg

2 nov. 2010 20:40#2

Okej, nu vet jag inte riktigt vad du vill göra, men return nothing(e), förstå jag inte varför du vill ha kör hellre e.preventDefault()

Sen vet jag inte alls hur "bra" jCrop är när det gäller plugin eller om du måste bindar om hela funktionen till objektet igen, men:

onChange: showPreviewNr2,
		       onSelect: showPreviewNr2,
		       aspectRatio: 16 / 9, 
		       minSize: [ 100, 200 ],
		       maxSize: [ 100, 200 ]

Kommer aldrig att fungera, möjlightvis om du gör det till ett objekt (vilket du förmodligen menar)

Du ser ju exemplet: http://deepliquid.com/projects/Jcrop/demos.php?demo=animation jag gissar att det är något i den stilen du är ute efter och där ser du i källkoden:

for(i in ac) jQuery('#'+i).click(anim_handler(ac[i]));

att den loopar igenom alla ac (längre upp i koden) och den gör ett anrop till:

function anim_handler(ac)
		{
			return function(e) {
				api.animateTo(ac);
				return nothing(e);
			};
		};

Bara att läsa API koden: http://deepliquid.com/content/Jcrop_API.html

Vad jag kan se så finns det inte mycket möjligheter att ändra allt för mycket (animateTo, setSelect och release).

Om du nu inte kan bindar om #cropbox med jCrop igen

clackeMedlem sedan feb. 2003234 inlägg

3 nov. 2010 08:24#3

Tack voigtann1
Jag löste det, så nu funkar det som det ska.

voigtann1Medlem sedan juni 20019 519 inlägg

3 nov. 2010 08:42#4

Och hur löste du det? Dela gärna med dig till andra.