[js][jquery] Proporcjonalność zdjęcia Opcje

[deha21]

Witam,
Potrzebuję jquery lub ewentualnie czystym javascript takie działanie które z podanych danych szerokości i wysokości danego zdjęcia poda wynik zdjęcia proporcjonalnego względem nowej szerokości. Czyli mam dane
X=1024 oraz Y=768 i teraz wpisuje do X np. 640 i klikam na przycisk (on wywołuje funckcję) i wtedy wartość Y oblicza się proporcjonalnie czyli 480.
Działanie proporcjonalności zasięgnąłem z kodu tworzenia miniaturek biblioteką GD. Na matematyce się nie znam ale mniemam, że to coś takiego (IMG:style_emoticons/default/winksmiley.jpg)

[PHP] pobierz, plaintext 
$thumb_w=$new_w;
$thumb_h=$old_y*($new_h/$old_x);
[PHP] pobierz, plaintext 

A więc zrobiłem coś takiego:

[JAVASCRIPT] pobierz, plaintext 
$('#ratiox').click(function(){
	var newY = orgH*(orgW/orgW);
	$('#orgH').val(newY);
});
[JAVASCRIPT] pobierz, plaintext 

Jest orgW/orgW dlatego, że newH będzie takie jak orgW.
Niestety nie działa. Dane z orgH i orgW są dobrze pobierane. I jeszcze, żeby się zaokrąglało do pełnych pikseli (IMG:style_emoticons/default/winksmiley.jpg)

Proszę o pomoc
Pozdrawiam

Ten post edytował deha21 3.09.2009, 08:49:39

[erix]

Potrzebuję jquery lub ewentualnie czystym javascript takie działanie które z podanych danych szerokości i wysokości danego zdjęcia poda wynik zdjęcia proporcjonalnego względem nowej szerokości. Czyli mam dane

To nie ma znaczenia, czy JS, czy +jQuery.

Na matematyce się nie znam ale mniemam, że to coś takiego

A ciężko policzyć proporcje jednego wymiaru względem drugiego i przemnożyć? Tu nie matematyka, tylko bardziej geografia. (IMG:style_emoticons/default/tongue.gif)

[deha21]

Nie wiem do jakiej szkoły ty chodziłeś ale u mnie to właśnie nazywało się matematyką (IMG:style_emoticons/default/winksmiley.jpg) Jakieś wskazówki co do kodu?

[erix]

Ale skala głównie przydaje się w praktyce na geografii. (IMG:style_emoticons/default/tongue.gif)

W PHP korzystam mniej więcej z takiej konstrukcji:

[PHP] pobierz, plaintext 
function scaleTo($maxValue, $scaleByWidth){
		if($scaleByWidth){
			$heightFactor = $this->height/$this->width;
			$this->resizeTo($maxValue, round($heightFactor*$maxValue));
		}else{
			$widthFactor = $this->width/$this->height;
			$this->resizeTo(round($widthFactor*$maxValue), $maxValue);
		}
		return;
	}
[PHP] pobierz, plaintext 

Praca domowa - wykombinuj coś z tego. ;]

[nitek]

problemu raczej w "algorytmie" nie ma... (IMG:style_emoticons/default/winksmiley.jpg)

[JAVASCRIPT] pobierz, plaintext 
var old_szer=1024;
var old_wys=768;
 
var new_szer=640;
 
var new_wys= (new_szer/old_szer)*old_wys;
alert(new_wys);
 
//new_wys=480
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował nitek 3.09.2009, 14:42:23

[deha21]

Hmm... Coś jakby nie działa:

[JAVASCRIPT] pobierz, plaintext 
var orgw = $('#orgw').val();
var orgh = $('#orgh').val();			
var old_w = $('#old_w').val();
var old_h = $('#old_h').val();
 
$('#ratiox').click(function(){	
	var new_y = (orgw/old_w)*old_h;
	$('#orgh').val(new_y);
});
[JAVASCRIPT] pobierz, plaintext 

Zapewniam, że nazewnictwo jest dobre na 100% więc tu się nie pomyliłem.
Aha i orgw, org_h itp. są polami input text więc dlatego jest val a nie attr (IMG:style_emoticons/default/winksmiley.jpg)

Ten post edytował deha21 3.09.2009, 17:13:28

[erix]

Nie działa, to znaczy?

[deha21]

Aa już odkryłem co nie działa (IMG:style_emoticons/default/winksmiley.jpg) Sam algorytm działa dobrze i wypisuje liczbę (jeszcze tutaj prośba jak ją zaokrąglić?). Tylko problem jest taki, że jak zmienię w polu "orgw" daną to nie jest ona uaktualniana.

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
   var orgw = $('#orgw').val();
   var orgh = $('#orgh').val();
   var old_w = $('#old_w').val();
   var old_h = $('#old_h').val();
 
   $('#ratiox').click(function(){	
      var newy = (orgw/old_w)*old_h;
   $('#orgh').val(newy);
   });
});
[JAVASCRIPT] pobierz, plaintext 

Dane z orgw i orgh są na początku ustalane przez PHP (getimagesize). Ale przy zmianie zmienna orgw w js powinna się uaktualnić.

[PHP] pobierz, plaintext 
<?
	Szerokość: <input type='text' name='width' id='orgw' value='".$width."' size='4'>
	Wysokość: <input type='text' name='height' id='orgh' value='".$height."' size='4'>
?>
[PHP] pobierz, plaintext 

Może znam rozwiązanie ale jest trochę na około i wydaje mi się, że znacie lepszy sposób. Chodzi o to, że przy edycji pola orgw zmienna orgw w js pobiera ponownie dane z pola orgw.

[erix]

Chodzi o to, że przy edycji pola orgw zmienna orgw w js pobiera ponownie dane z pola orgw.

Jaśniej?

[deha21]

Ok zrobiłem. Chodziło o to, żeby przy naciśnięciu przycisku jeszcze raz pobrano wartość z pola.
Czyli dopisałem nową zmienną która jest tą uaktualnianą (ta stara odczytająca początkową wartość weight jest mi potrzebna jeszcze do czegoś innego).

[JAVASCRIPT] pobierz, plaintext 
$('#ratiox').click(function(){
	var orgw2 = $('#orgw').val();
	var newy = (orgw2/old_w)*old_h;
	$('#orgh').val(newy);
});
[JAVASCRIPT] pobierz, plaintext 

A co do zaokrąglania liczb to znalazłem Math.round (IMG:style_emoticons/default/winksmiley.jpg)