Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Skalierungs Funktion per jquery“

DemoZid

lernfähig

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

undefined

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 ;)
 
Zuletzt bearbeitet:

DemoZid

lernfähig

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

undefined

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

lernfähig

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

undefined

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

lernfähig

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

Mod | Web

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

lernfähig

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

undefined

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?

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.
 
Zuletzt bearbeitet:

DemoZid

lernfähig

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

lernfähig

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

undefined

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...
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.143
Beiträge
2.581.737
Mitglieder
67.210
Neuestes Mitglied
MaikMH78
Oben