Lupen effekt

[skymen]

Hallo,

kann mir einer sagen wie ich diesen Efekt hinbekomme?
Klick auf das Fahrradbild
http://www.canyon.com/mountainbikes/bike.html?b=2581
oder dieser
http://www.cube.eu/full/hpc/ams-100-super-hpc-slt/

Danke für Tipps Tuts oder extensions!

[Stefan]

Hey :-)

Wie sieht's mit Kenntnisse in Javascript oder gar Frameworks wie jQuery bzw. jQuery UI aus? Damit lässt sich's relativ einfach umsetzen.

Der MTB-Hersteller aus dem Link setzt jedoch auf Flash. Einziger Vorteil ist die schöne Glättung bei der Bildvergrößerung bzw. Bildverkleinerung. Das kommen die Browser wahrscheinlich nicht so gut hin, zumindest der Internet Explorer :-D ...

Sinngemäß brauchst du folgende Umsetzung:

1. Anzeige des Bilds in Normalgröße
2. Bei Doppelklick wird dann an das Bild herangezoomt
3. Das kannst du über die animate-Funktion lösen. Achte hier jedoch drauf, dass der Eltern-DIV eine fixe Breite und Höhe bzw. zusätzlich die Eigenschaft "overflow:hidden" hat, damit der übergroße Inhalt einfach ausgeblendet wird.
4. Nun kommt das Draggable aus jQuery UI zum tragen, mit welches du die Bildverschiebung realisieren kannst.

Gerne helfe ich dir bei der genauen Umsetzung, falls die Kenntnisse nicht ganz ausreichen sollten. So schwer ist's nicht, sollte recht schnell gehen :-)

Gruß Stefan :-)

[Stefan]

Argh, mir ist jetzt erst das zweite Beispiel aufgefallen. Dies funktioniert deutlich anders:

Hier wird, beim überfahren mit der Maus (hover) ein weiterer DIV eingeblendet, der exakt das selbe Bild enthält, jedoch nur mit einern höheren Auflösung, also großer.

Dieser neu eingeblendete DIV hat auch overflow: hidden zugewiesen bekommen. Das Produktbild in hoher Auflösung kann z.b. als Hintergrundbild eingebunden werden (dann wird overflow:hidden sogar unnötig). Anschließend wird die Mausposition (offset) ausgelesen und mit einem Faktor versehen, welches das Hintergrund eben verschiebt.

Ich hoffe, ich konnte etwas weiterhelfen, ansonsten einfach melden! :-)

[skymen]

Tja meine Kenntniss sind so la la (;
Vom prinzip her versteh ich das, aber in der Umsetztung sechs setzten ^^
Wäre es frech nach einer Muster Datei / Ordner zu fragen?

[Stefan]

Mal sehen ;-)

Welche Variante würdest du denn bevorzugen? :-)

[skymen]

Variante 2 fände ich besser, da kein Doppelklick (;
Magst zwei Bilder haben (orignal ist 820 x 500, Zoom 3000 x 1830)?
Merci erstmal!

[Stefan]

Her damit! :-)

[skymen]

Iss raus!