"MACH DEINE SEITE JETZT FIT,
    DER nächste SOMMER KOMMT BESTIMMT!"

    Bilder oder Grafiken könnt Ihr mit folgendem Tutorial zoomen. Füge dazu diesen Code in den Head-Bereich ein.

    <style type="text/css">
    /*<![CDATA[*/
    /* Deine Slideshow */
    #zoom img {

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;

    }
            
    #zoom img:hover {
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);

    }

    /*]]>*/
    </style>

    Den Zoomgrad kannst Du hier scale(1.5) verändern. Aktuell werden die Grafiken 1 1/2 mal vergrößert.


    Diesen Code musst Du nur noch in ein Widget/HTML-Modul einfügen.

     

    <div id="zoom">
            <div>
                <img src="DEINE GRAFIKADRESSE" alt="" width="200" height="100" />
            </div>

     

    Den Bildlink (rot markiert) könnt Ihr natürlich jederzeit durch eine eigene Grafik ersetzen.

    Die Größe (grün markiert) der Grafik, kannst Du hier auch ganz individuell anpassen.

    Wichtiger Hinweis: Um die Originalgröße deiner Bilder zu erhalten, ändere in der Bild-Url einfach das Kürzel "std" in "orig" ab. Hier mal im Beispiel:

    Vorher: http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/img/i0137e52ac6e03857/1408450524/std/image.jpg

    Nachher: http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/img/i0137e52ac6e03857/1408450524/orig/image.jpg

    Kommentare: 21
    • #21

      Jörg Bünger (Montag, 19 Januar 2015 19:11)

      Ich hab es selbst zusammengebaut bekommen:

      <div id="zoom">
      <div>
      <a><img src="Bild1_sw" onmouseover=
      "src='Bild1_bunt'" onmouseout=
      "src='Bild1_sw'" alt="" width="60" /></a>
      </div>
      </div>

    • #20

      Jörg Bünger (Montag, 19 Januar 2015 18:06)

      Vielen Dank für die tolle Funktion!
      Fällt jemandem ein, wie man das kleine Bild schwarzweiß und das gezoomte Bild bunt bekäme?

    • #19

      B.A-W (Donnerstag, 16 Oktober 2014 14:56)

      Kann man auch einen Link zu einem Anker in diese Funktion einfügen?

    • #18

      Franz (Donnerstag, 11 September 2014 13:10)

      Suuuuuuupersache!!! 1000000000 Dank!!!!!

    • #17

      floralilie (Freitag, 01 August 2014)

      Also echt jetzt: Das sind ganz super Tipps, eine sehr schöne Seite und wirklich idiotensicher erklärt!!!!
      Vielen Dank dafür!!!! Ich habe den Zoom jetzt bei einem Foto auf meiner Startseite eingefügt und auch bei zwei Link-Bildern.

      Was ich auch super finden würde, wenn man Bilder einer Bildergalerie auf diese Weise vergrößern könnte. Ich möchte sie in der Voransicht quadratisch mit diesen schicken Rähmchen lassen, und fände es aber toll wenn man nur mit der Maus drüber gehen würde und die Bilder in der Vergrößerung dann ihr Originalformat hätten. Vermutlich wird das aber nicht gehen.
      Macht aber nichts, ist auch so schon toll! :)
      LG
      Tina

    • #16

      fotoscheu (Donnerstag, 28 November 2013 19:21)

      Mich würde die Frage von artofcars auch brennend interessieren...

      Vielen Dank für die tolle Seite

    • #15

      artofcars (Montag, 27 Mai 2013 16:50)

      Das mit dem Zoom ist eine tolle Sache nur leider wird es immer unscharf, jpg, oder png, oder in Photoshop umgewandelte Bildgröße in Webgrafik... bisher weiß ich noch nicht wo der Fehler liegt...

      Aber die Seite hier ist super habe schon verschiedenes ausprobiert, Danke für die tollen Tutorials!!!

    • #14

      Ute Vogel (Sonntag, 26 Mai 2013 03:54)

      Ich habe meine Galerie-Bilder einzeln und mit Zoom eingestellt. Hat prima geklappt. Vielen Dank. Meine Frage: Wie kann ich da noch Untertitel einfügen?

    • #13

      Franny (Freitag, 24 Mai 2013 18:30)

      Manchmal besitze ich leider die Fähigkeit erst zu schreiben bevor ich mal richtig nachgedacht habe, typisch Blondine eben ;-)) Hab direkt nach meiner Frage alle Bilder als PNGs abgespeichert und jetzt hab ich auch einen verlustfreien Zoom xD

    • #12

      Franny (Donnerstag, 23 Mai 2013 20:37)

      Huhu

      Gibt es noch einen Befehl, der die Bildqualität beim Zoom verbessert? Ich hab richtig große Bilddateien hochgeladen und mittels Code eingefügt und den Zoomgrad auf 1.25 eingestellt und obwohl die Originalgrafik eine viel bessere Auflösung hat, wird der Zoom leicht unscharf. Kann man da was machen? Vielleicht besser als PNG speichern?

    • #11

      1356980604 (Dienstag, 14 Mai 2013 13:27)

      Klasse! Vielen, vielen Dank! Deine Arbeit ist Gold für uns wert.

    • #10

      Deine Slideshow (Dienstag, 14 Mai 2013 13:15)

      Ja das geht. Der Code sieht dann so aus:

      <div id="zoom">
      <div>
      <a href="LINK"><img src="DEINE GRAFIKADRESSE" alt="" width="" height="" />
      </div>


      Viele Grüße.

    • #9

      1356980604 (Dienstag, 14 Mai 2013 13:11)

      Kann man die gezoomten Bilder eigentlich noch zusätzlich verlinken?

    • #8

      Deine Slideshow (Mittwoch, 08 Mai 2013 12:41)

      @ beautex-friseure, Du kannst das ganz einfach mit Hilfe eines Spaltenmoduls umsetzen.

      Viele Grüße.

    • #7

      beautex-friseure (Sonntag, 21 April 2013 22:42)

      ich würde diese Funktion gerne für Bilder die nebeneinander stehen anwenden. Bitte um Erklärung.

    • #6

      Deine Slideshow (Donnerstag, 28 März 2013 12:21)

      Hallo Holger, schau' mal hier vorbei http://deine-slideshow.jimdo.com/bilder-hochladen/.

      Viele Grüße.

    • #5

      Holger (Mittwoch, 27 März 2013 23:58)

      allo, ich möchte gern in den Header eine Slideshow bauen.
      Erstmal würde ich gern erfahren, was es mit der Bildergrafikadresse auf sich hat.
      WIe ich verlinken muss oder wo ich die Bilder speichern muss, um sie zu verarbeiten.
      DAnke Gruss Holger

    • #4

      reissdesign (Montag, 18 März 2013 12:48)

      Hallo Slideshow, vielen Dank, hat geklappt!!

    • #3

      Deine Slideshow (Montag, 18 März 2013 09:29)

      Sorry Tina, hier fehlte im ersten Code eine Klammer, daher dann die Fehlermeldung im Head-Bereich. Das Widget/HTML-Modul kannst Du im Hauptbereich auswählen, dort wo Du auch Deinen Text und Deiner Bilder hinzufügst.

      Viele Grüße.

    • #2

      Tina Reiss (Freitag, 15 März 2013 14:26)

      Hallo,

      ich würde gerne die Zoomfunktion bei einigen Bildern einsetzen. Aber jedesmal, wenn ich den Code in den Header-Bereich reinkopiere, sagt Jimdo, dass ein Fehler aufgetreten ist. Der Header-Bereich ist doch der unter „Einstellungen", oder?
      Und wie füge ich den Code unten in ein Widget/HTML-Modul ein – wo finde ich das? Wie du schon merkst, bin ich eine gaaanz blutige Anfängerin und dankbar für deine Hilfe :-)

      LG, Tina

    • #1

      reissdesign (Freitag, 15 März 2013 13:53)

      Hallo,

      ich würde gerne die Zoomfunktion bei einigen Bildern einsetzen. Aber jedesmal, wenn ich den Code in den Header-Bereich reinkopiere, sagt Jimdo, dass ein Fehler aufgetreten ist. Der Header-Bereich ist doch der unter „Einstellungen", oder?
      Und wie füge ich den Code unten in ein Widget/HTML-Modul ein – wo finde ich das? Wie du schon merkst, bin ich eine gaaanz blutige Anfängerin und dankbar für deine Hilfe :-)

      LG, Tina