• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Automatischer Zoom-In?

G

Geri345

Neues Mitglied
Hallo Leute,

Ich hab ein dringendes Problem:

Ich muss bei einem Bild einen Zoom-Effekt einbinden, der beim Laden der Seit das Bild aus einem Detail heraus auf volle Größe zoomt.

So wie hier nur umgekehrt und beim Laden der Seite: Photo Zoom Out Effect with jQuery

Wie ist das realisierbar...bitte um schnelle Antwort ist echt dringend :(
 
Das geht mit der jQuery-Funktion animate(). Bild in voller Größe hochladen. Mit den Properties width und height auf klein skalieren. Beim Laden der Seite mit animate() auf volle Größe zoomen.
Viel Erfolg und viele Grüße - Ulrich
 
ja, aber soll ja nicht das bild in klein gezeigt werden, sondern nur ein ausschnitt (zB ein baum neben einem haus) und beim seitenladen soll das bild vom baum aus rauszoomen um das gesamte haus zu zeigen. Das gesamtbild (also das div) soll immer gleich groß sein bzw mit dem bild ausgefüllt werden. (der baum soll also zB so groß sein wie das ganze div und beim rauszoomen in original-größe zu sehen sein)
 
Ach so. Hm. Vielleicht wäre es eine Möglichkeit, das Bild in einem div-Element zu platzieren, das entsprechend kleiner ist. Bei diesem div muss dann overflow:hidden gesetzt werden, damit nur der Ausschnitt angezeigt wird, der im div liegt. Beim Laden der Seite dann das div mit animate() vergrößern.
 
ok nur mal um zu verstehen ob ichs richtig kapiert habe:

angenommen ich machs mit animate und habe das div mit dem originalbild (das ich zB auf 1x1px) skalieren lasse. dann lege ich ein zweites div drüber und lasse das kleine bild groß werden, damit es dann das alte bild "überdeckt"?
 
Nein, Du brauchst kein zweites div. Und nur das div skalieren, nicht das Bild. Weil es mich interessierte, habe ich es mal eben ausprobiert. So funktioniert es, jedenfalls hoffe ich, dass es das ist, was Du dir vorstellst:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type+"text/javascript">
$('#bild').ready (function () {
    $('#bild').animate ({left: "0px", top: "0px"}, "slow");
    $('#d').animate ({width: "800px", height: "600px"}, "slow");
    });
</script>
</head>
<body>
<div id="d" style="margin:auto;overflow:hidden;width:300px;height:200px;"><img src="2011-05_Epicactus_Luminosa.jpg" id="bild" style="position:relative;left:-200px; top:-200px">
</div>

</body>
</html>
 
omg thx, das ist fast perfekt :D

das einzige was ich noch bräuchte wäre, dass das bild sich zB aus der Ecke raus vergrößert. (nicht so wie jetzt wo es mehr oder weniger aus der ecke raus fliegt)

aber falls das zu aufwendig ist nehme ich auch sehr gerne dieses beispiel :D

(ps: ein kleiner fehler ist drinnen: im zweiten script-tag ist ein + statt = beim type ;)
 
Zuletzt bearbeitet:
Du brauchst nur das "margin:auto" im div-Tag rauszunehmen, dann liegt das div in der linken oberen Ecke.
 
Habe nochmal oben nachgelesen:
ja, aber soll ja nicht das bild in klein gezeigt werden, sondern nur ein ausschnitt (zB ein baum neben einem haus) und beim seitenladen soll das bild vom baum aus rauszoomen um das gesamte haus zu zeigen. Das gesamtbild (also das div) soll immer gleich groß sein bzw mit dem bild ausgefüllt werden.
Zum Vergrößern anklicken....
Also das div soll immer gleich groß sein und nur das Bild soll rausgezoomt werden, so dass es am Schluss ganz zu sehen ist. Dann musst Du es wahrscheinlich so machen:
Code: 
$('#bild').ready (function () {
    $('#bild').animate ({left: "0px", top: "0px; width: "300px"; height="200px"}, 3000);
    });
Dann musst Du das Bild natürlich ziemlich groß skalieren, damit es am Anfang nicht verpixelt wird.
 
Zuletzt bearbeitet von einem Moderator:
also das funktioniert bei mir nicht, hab die angaben in den divs gleich gelassen und nur den script ausgetauscht.
 
Stimmt, da waren mir noch zwei Fehler unterlaufen. So funktionierts:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('#bild').ready (function () {
    $('#bild').animate ({left: "0px", top: "0px", width: "300px", height: "225px"}, 3000);
    });
</script>
</head>
<body>
<div id="d" style="margin:auto;overflow:hidden;width:300px;height:225px;"><img src="2011-05_Epicactus_Luminosa.jpg" id="bild" style="position:relative;left:-200px; top:-200px">
</div>

</body>
</html>
... zumindest im Firefox. IE8 scheint das overflow:hidden zu ignorieren. Ich sehe es mir heute Abend nochmal an. Oder vielleicht hat jemand anders eine Idee, woran es liegt.
 
ok thx, werd ich dann später ausprobieren bzw etwas dran rumspielen, da es ohne IE-Kompatibilität eh nichts für mich ist (leider benutzt nicht jeder nur chrome und firefox -.-)
 
Na sowas, mit der Version, die ich hier zu Hause habe, funktioniert es auch im IE! Muss wohl irgendwie an den Browsereinstellungen liegen.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('#bild').ready (function () {
    $('#bild').animate ({left: "0px", top: "0px", width: "300px", height: "225px"}, 3000);
    });
</script>
</head>
<body>
<div id="d" style="margin:auto;overflow:hidden;width:300px;height:225px;"><img src="2011-05_Epicactus_Luminosa.jpg" id="bild" style="position:relative;left:-200px; top:-200px">
</div>

</body>
</html>
PS: Textdiff der Datei von der Arbeit und hier von zu Hause ergibt keinen Unterschied. Muss also an den Browsereinstellungen liegen. Hat da jemand eine Idee, wie das möglich ist?
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben