Bild zeigen und getrennt davon Zoom

    Hat jemand eine Idee, wie man
    "Bild zeigen und getrennt davon Zoom"
    mit X5 realisieren kann?


    Gemeint ist:
    Bild anzeigen, wenn Maus über Bild, dann an anderer Stelle eine Vergrößerung des Ausschnitts anzeigen.
    Sinnvoll immer dann, wenn ein Kunde ein Produktfoto ansieht und sich einen Teil davon vergrößert ansehen möchte.


    Muster
    Tamaris Mokassin - red - Zalando.de

    also ich weiß jetzt momentan nicht was er meint!? sry, ?(

    Lg.

    Thabo-Umasai

    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."

    ;)

    Ah hab mir diesen Link angeschaut, ja das sieht toll aus, aber leider kostenpflichtig, wie ich sehe. Sieht aber gut aus, echt war. Das würde mich auch interessieren. Könnte man gut für so eine Grafikseite gebrauchen. Muss mich mal ein wenig dafür interessieren. :S ;)

    Lg.

    Thabo-Umasai

    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."

    ;)

    Einmal editiert, zuletzt von Thabo-Umasai ()

    Ja, andy DU hast mich verstanden, genau DAS meinte ich :)


    Vielleicht gibt da auch was ähnliches gratis?
    Ist aber so wirklich perfekt. Mal schauen, wie sich das mit X5 verträgt!
    Danke
    salguri

    "Magic Zoom" ist gut dokumentiert und echt vielseitig. Mit guten Beispielen und individuellem Code-Generator.
    CSS einhängen, Bild mit "class" und schon gehts los:


    <a href="small.jpg" class="MagicZoom" rel="zoom-position: inner; zoom-fade: true"><img src="big.jpg"/></a>


    Stellt sich nur die Frage, wie man das in X5 einbindet?
    "class"-Vergabe bei Bild kann ich nicht finden, als HTML-Code?


    Soll ja so sein, das auf der Seite noch andere Infos stehen ....
    Tipps??


    danke
    salguri

    Ich glaube zwoemti kann da sicher ein Tutorial zaubern


    müsste aber so ungefähr lt. dieser Anleitung funktionieren


    Bitte loggen Sie sich ein, um den versteckten Inhalt zu sehen.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Einmal editiert, zuletzt von zwoemti () aus folgendem Grund: Anhang entfernt :-)

    na warten wir mal ab, ich würde mich sehr freuen wenn wir eine Lösung finden würden. ?(

    Lg.

    Thabo-Umasai

    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."

    ;)

    da sag ich erst schon mal danke schön!!
    Diese Hilfe gibts nur hier ..
    salguri

    Ist im Prinzip ganz einfach in WSX5 einzubauen.


    Hier meine TESTSEITE


    Die Magic Zoom Demo runterladen und die 2 Ordner "images und magiczoom" in den Root eures Servers.


    Danach in "Eigenschaften der Seite" "Erweitert" vor dem </HEAD> Tag dann folgenden Code


    XML
    1. <link type="text/css" rel="stylesheet" href="magiczoom/magiczoom.css"/>
    2. <script type="text/javascript" src="magiczoom/magiczoom.js"></script>


    Danach in einem HTML Widget folgenden Code (den man haben will) in der Demo ist der...


    HTML
    1. <a href="images/r1-blue-3.jpg" class="MagicZoom" id="Zoomer3" rel="selectors-change: mouseover; selectors-effect: fade" title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a> <br/>
    3. <a href="images/r1-red-3.jpg" rel="zoom-id:Zoomer3" rev="images/r1-red-2.jpg" title="Red Yahama YZF-R1"><img src="images/r1-red-1.jpg"/></a>
    4. <a href="images/r1-black-3.jpg" rel="zoom-id:Zoomer3" rev="images/r1-black-2.jpg" title="Black Yamaha YZF-R1"><img src="images/r1-black-1.jpg"/></a>
    5. <a href="images/r1-blue-3.jpg" rel="zoom-id:Zoomer3" rev="images/r1-blue-2.jpg" title="Blue Yamaha YZF-r1"><img src="images/r1-blue-1.jpg"/></a>


    Speichern - raufladen - fertig

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    danke andy: so klappts. Warst Du schneller als ich den Weg zu veröffentlichen. Super!!
    Wie immer hat zwoemti den TIPP: da die JQ Zoom Lösung kostenlos ist, lohnt es sich auch da hinzuschauen.
    Vielleicht gibts mal ein Demoprojekt?


    salguri

    !da freuen wir uns drauf! :)
    Das das nur per HTML-Feld läuft ist doch kein Problem (mehr)


    Bekomm es (jQZoom) selbst nicht zum laufen, da ich nicht weiß wohin welcher Teil des "Benutzerdefinierten Codes" im HTML-Feld kopiert werden muss. Was muss "vor, nach, innerhalb des <bodyA, <html>- Tags eingefügt werden??
    a little bit confused!


    Salguri