Diashow
Klicken Sie auf das Bild, um Bedienelemente einzublenden! Dies verschwindet nach 10 Sekunden und wird noch mal angezeigt. !
Nur das Bild zeigen.
X

Bedienungshinweise

Navigationshilfen
... werden sichtbar, wenn Sie mit der Maus in die oberen 300 oder unteren 50 Pixel gehen.
Oben:
Oben finden Sie Vorschaubilder zur Navigation. Oben links und rechts in den Ecken können Sie die Vorschaubilder seitenweise überspringen.
Unten, von links nach rechts.
Start/Stop der Diashow, An den Anfang / Bild zurück / Bild vor / An das Ende.
Optionen zur Vergrößerung und Verkleinerung der Bilder (Skalierung).
Die Einstellung der Pausendauer.
i blendet den Bildtitel ein.
b Bildseite einblenden.
ESC Beenden der Diashow.
Skalierung:
Ja: Das Bild wird so angepaßt, daß es noch auf den Bildschirm paßt - bei Bedarf wird es vergrößert oder verkleinert.
Kleiner: Das Bild wird so angepaßt, daß es noch auf den Bildschirm paßt. Dabei wird es nur verkleinert, nie vergrößert.
2x: Das Bild maximal auf die zweifache Fläche vergrößert, nie aber verkleinert.
Nie: Das Bild wird exakt in den Maßen dargestellt, für die es gedacht ist. Übergroße Bilder werden angeschnitten.
Tastatur:
Leertaste: Start/Stop. Links / Rechts: Zurück und Vor. Pos1 bzw. Home / Rechts: Erstes / Letztes.
Tab: Geht die Skalierungsoptionen durch. Punkt: Blendet den Bildtitel aus. Minus: Verläßt die Diashow.
X
i ? Bildseite Ende Start/Stop <<< < > >>> Skalieren: Ja Kleiner Nur 2x Nie. Pause (5Sek.)
Frame Schließen

CSS-Zoom

Kategorie Webentwicklung
Inhalt
Internet-Explorer hatte ja diese nette CSS-Eigenschaft "zoom", mit der man Elemente vor dem Rendering vergrößern oder verkleinern konnte. Für sie wurde dabei auch der nötige Platz bereitgestellt.
Meistens wurde allerdings "zoom:1" genutzt: Damit hat man dem IE gesagt, daß das Element ein 'Layout' habe, und damit seine Behandlung des Elements beeinflußt. Das ist so eigenwillig wie es klingt.
"Zoom" war nie Standard, wird aber immer noch vom IE und außerdem von Chrome/Chromium unterstützt. Angeblich versteht auch Opera die Eigenschaft, aber mir ist es nicht gelungen, es unter Opera zu nutzen.
Allerdings taucht der Begriff "zoom" mittlerweile im Kontext der "CSS Device Adaptation" (http://dev.w3.org/csswg/css-device-adapt/#the-lsquozoomrsquo-descriptor) auf - vielleicht bezieht sich der mögliche Opera-Support darauf.
"zoom" ist nicht dasselbe wie "transform:scale()". Ersteres reserviert Platz für das Element, zweiteres zeichnet es einfach größer oder kleiner, paßt aber das Layout nicht an. Beide Varianten haben ihren eigenen Zweck.
Zum Testen, ob der Browser "zoom" unterstützt, verwende ich jetzt folgendes:
    var test=document.createElement('div');
    if (test.style.zoom != undefined) {                                                                                                                             
        var old=test.style.zoom;
        test.style.zoom=0.5;
        if (test.style.zoom!=old)
            wir_haben_zoom_nun_tu_was();
    }
Die Existenz von test.style.zoom alleine zu testen hat nicht ausgereicht, denn Opera kennt die Eigenschaft, nur akzeptiert es sie nicht für alle Elemente:
    >>> c=document.createElement("img");
    <img/>
    >>> c.style.zoom
    ""
    >>> c.style.zoom=0.5
    0.5
    >>> c.style.zoom
    ""
Genutzt habe ich das hier, um via CSS die Bilder verkleinern zu können und nicht noch beim Nachladen im Endlos-Scroll erst noch verkleinern zu müssen. Diese Lösung:
    <style>
    #container.scaledown .pw-thumb {
        -ms-zoom:50%;
        -o-zoom:50%;
        zoom:50%;
    }
    </style>

     <button id='smaller'>Größe Ändern</button>
     ...
     $("#smaller").click(function() {
        $("#container").toggleClass("scaledown");
        nachladen_wenn_nötig();
     });
ist erheblich schöner als diese:
var momentan_ist_alles_skaliert=0;
var skaliere=function(i,factor)
{
    var w=i.width();
    var h=i.height();
    if (factor==1) {
        i.removeAttr("width");
        i.removeAttr("width");
    } else {
        i.width(w*factor);
        i.height(w*factor);
    }
}
$("#smaller").click(function() {
    $("img","#container").each(function() {
        var $i=$(this);
        $i.toggleClass("scaled");
        if ($i.hasClass("scaled")) {
            skaliere($i,0.5);
            momentan_ist_alles_skaliert=1;
        } else {
            skaliere($i,1);
            momentan_ist_alles_skaliert=1;
        }  
    })
    ...
    function endless_scroll_load_callback(data)
    {
        var html=make_thumbs(data);
        var div=$("<div />").html(html);
        if (momentan_ist_alles_skaliert) {
           $("img",div).each(function() {
               // wie oben noch mal.
           });
        }
        $("#container").html($(div).html()); // ein Weg, den Inhalt des Divs in den Thumbnail-Container zu kopieren
     }
});

Das Beispiel ist übrigens etwas zu dumm programmiert, um wirklich tauglich zu sein - was ist, wenn img.width schon gesetzt war?
Das richtig zu machen, wird eine interessante Codewüste.
Diashow
Home Impressum
Alle Inhalte unterliegen, soweit nicht ausdrücklich anders angegeben, dem Copyright.