Skalierungs Funktion per jquery

DemoZid · 04.06.2010

Hallo zusammen

Ich habe ein Problem und hoffe ich finde hier die Leute die mir vielleicht weiterhelfen können

Ich muss in meinem Studium gerade eine Homepage erstellen. Habe schon gute Ideen dazu, kenn mich mit HTML und CSS einigermaßen aus.
Allerdings habe ich ein paar spezielle Wünsche an meine Seite.
Und zwar möchte ich einen art Intro Bereich machen, mit 4 Navi Punkten.
Diese Navi punkte liegen mittig und nebendran/untendran jeweils ein kleines Bild der entsprechenden Unterseite.
Nun möchte ich, dass wenn der user auf ein Navi Element klickt, die entsprechende Navi in die untere Ecke wandert (habe ich per animate top/left schon geschafft) und das kleine Vorschaubild sich jetz groß skaliert, so dass es der User die gewünschte Unterseite größer sieht und die restlichen Navipunkte dahinter verschwinden.

Kann ich das Vorschaubild, welches ich in der Introseite habe durch jquery skalieren lassen, wenn der User auf die entsprechende Navi klickt?
Wenn ja, wie?
Oder hättet ihr andere vorschläge wie zum beispiel Flash einbinden?

Würde mich über eine schnelle Antwort freuen, habe nicht mehr allzu lange alles fertig zu stellen^^

Vielen Dank im Vorraus
MFG

cebito · 04.06.2010

AW: Skalierungs Funktion per jquery

Das kannst du genauso mit animate lösen:

HTML:

thisImg.animate({
   width: imgWidth + 'px',
   height: imgHeight + 'px'
}, 150);

Hab das grad bei mir rauskopiert, für imgWidth bzw. imgHeight kannst ja z.B. die Viewportgröße bestimmen und die Werte übernehmen. Musst nur schaun, das es nicht verzerrt...

Edith sagt - und das Bild sollte natürlich auch die entsprechende Grundgröße besitzen

DemoZid · 04.06.2010

AW: Skalierungs Funktion per jquery

Ok danke schonmal für die schnelle Antwort. Jetz ist nur die Frage, wo genau binde ich das ein?

Wegen des ganzen ein und Ausblendens habe ich mit Ebenen gearbeitet.
Habe also eine Ebene angelegt für das Vorschaubild und das dort reingesezt.
Wo genau schreibe ich jetz das rein, was du gepostet hast?

Mein Code für das verschieben der Navi sieht so aus:

Code:

</script>
        
        
        
   <script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var UserN_state = 1;     
        
        		$("#UserN").click(function(){
				if(UserN_state == 1) {
					$("#UserN").animate({
						top: '+=350px',
						left:'-=450px'
					});
				} else {
					$("#UserN").animate({
						top: '-=350px',
						left:'+=450px'
					});				
				}
				UserN_state *= -1;
			});
		});
		</script>

UserN ist in diesem Fall der Menüpunkt "User" ^^

cebito · 04.06.2010

AW: Skalierungs Funktion per jquery

z.B. so:

HTML:

$(document).ready(function(){
 var UserN_state = 1;
$("#UserN").click(function(){
 if(UserN_state == 1) {
 $("#UserN").animate({
 top: '+=350px',
 left:'-=450px'
 });
$("#meinImage").animate({
 width: imgWidthGross + 'px',
 height: imgHeightGross + 'px'
}); 
} else {
 $("#UserN").animate({
 top: '-=350px',
 left:'+=450px'
 });
$("#meinImage").animate({
 width: imgWidthKlein + 'px',
 height: imgHeightKlein + 'px'
}); 
}
 UserN_state *= -1;
 });
 });

DemoZid · 04.06.2010

AW: Skalierungs Funktion per jquery

Und #meinImage ist dann die Url des Bildes? die Ebene in dem das Bild liegt?
Wie spreche ich da mein Bild direkt an? Oder skaliert der das Bild mit, wenn ich die Ebene skaliere?
Das verstehe ich noch nicht ganz^^

Aber ansonsten hast du mir sehr weitergeholfen.

cebito · 04.06.2010

AW: Skalierungs Funktion per jquery

#meinImage wäre in diesem Fall etwas mit der ID meinImage (bspw. dein Bild)

Zu der Ebene kann ich nichts sagen, dazu fehlt hier ein bissl mehr Quelltext. Gib mal deinem Bild die ID und probiers aus, wenn was nicht so will wie du, dann frag nochmal...

DemoZid · 04.06.2010

AW: Skalierungs Funktion per jquery

Mein (nur minimal geänderter^^) Code für das animieren ist der hier:

Code:

<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var UserN_state = 1;     
        
        		$("#UserN").click(function(){
				if(UserN_state == 1) {
					$("#UserN").animate({
						top: '+=350px',
						left:'-=450px'
					});
					$("UserP").animate({
						width: +'525px',
						height: +'398px'
					});
				} else {
					$("#UserN").animate({
						top: '-=350px',
						left:'+=450px'
					});		
					$("UserP").animate({
						width: - '525px',
						height: - '398px'
					});
				}
				UserN_state *= -1;
			});
		});

Wobei hier UserP für ein divcontainer steht in dem ich das Bild drin liegen habe:

Code:

<div id="Userp"><img src="Bilder/Userpageklein.gif" width="300" height="227" alt="Userpklein" /> </div>

Mit der dazugehörigen css beschreibung:

Code:

#UserP {
	position:absolute;
	width:300px;
	height:227px;
	z-index:1;
	left:450px;
	top:101px;
}

Habe es so versucht, bewegt sich aber nichts^^
Ich glaube ich habe noch einiges zu lernen...

sokie · 04.06.2010

AW: Skalierungs Funktion per jquery

'Ebene' ist ein schwieriger Begriff (den es so eigentlich in html nicht gibt) ist wohl aus dem Adobe/dreaweaver... Sprachraum...
wie auch immer,
wenn du ein Bild animiert sklaieren willst, musst du es direkt ansprechen. Dazu kannst du zB die nomalen css selektoren in jQuery benutzen. In deinem Fall liegt das Bild(img) im Container mit der id #Userp und wäre per $("#Userp img").animate(...); direkt manipulierbar (insofern das Bild das einzige ist, dass in dem Container ist). alternativ, und das meinte cebito, kannst du dem img auch eine id geben, zB "meinImage" und es dann natürlich einfach über $("#meinImage").animate(...); erreichen.

DemoZid · 04.06.2010

AW: Skalierungs Funktion per jquery

Ok super.
Kann ich einem Bild dann direkt in dem string eine Id geben, indem ich einfach id="meinImg" davor setze?

cebito · 04.06.2010

AW: Skalierungs Funktion per jquery

DemoZid schrieb:
Ok super.
Kann ich einem Bild dann direkt in dem string eine Id geben, indem ich einfach id="meinImg" davor setze?

In welchem String? Kannst du mal genauer werden?

Du hast dein Bild, das steht irgendwie so in der HTML

Code:

<img src="images/dasBild.jpg" alt="Naja, ein Bild" />

das änderst du in

Code:

<img src="images/dasBild.jpg" id="meinImage" alt="Naja, ein Bild" />

jetzt hat das Bild eine ID und über die kannst du es (wie oben) mit jQuery ansprechen.

DemoZid · 04.06.2010

AW: Skalierungs Funktion per jquery

Dein geänderter Code hat mir die Frage beantwortet.
Sorry für meine Ungenauigkeit, ist für mich noch nen recht neues Thema mit der ganzen Programmierung. War vorher nur mit PS, ID und Illu unterwegs^^

Danke an euch beide.

DemoZid · 05.06.2010

AW: Skalierungs Funktion per jquery

Funktioniert leider immer noch nicht^^
Habe dem Bild jetz direkt eine ID gegeben und diesem Bild per CSS seine position zugewiesen.

Wenn ich übrigens in dem Bereich für die Animation des Bildes wie cebito in seinem Code schreibe

Code:

$("#meinImage").animate({
 width: [COLOR="DarkRed"]imgWidthGross+ 'px',[/COLOR]
 height: [COLOR="DarkRed"]imgHeightGross + 'px'[/COLOR]

funktioniert mein Button nicht mehr^^

Schreibe ich es so

Code:

$("#meinImage").animate({
 width: [COLOR="DarkRed"]+ 'px',[/COLOR]
 height: [COLOR="DarkRed"]+ 'px'[/COLOR]

oder so:

Code:

$("#meinImage").animate({
 width: [COLOR="DarkRed"] '+px',[/COLOR]
 height: [COLOR="DarkRed"] '+px'[/COLOR]

dann funktioniert der Button wieder.
Das Bild skaliert sich allerdings nicht.
Könnte das an der position Zeile liegen?
*überfordert*^^

cebito · 05.06.2010

AW: Skalierungs Funktion per jquery

imgWidthGross bzw. -Klein sind Variablen, die musst du natürlich definieren und ihnen einen numerischen Wert zuweisen, oder du schreibst direkt deine Pixelangaben in die function...