Bildgröße ändern

[schokomueller]

JavaScript: Bildgröße ändern

Hallo,

ich schlage mich nun schon ziemlich lange mit PHP rum, das klappt auch soweit ganz gut, aber mit JavaScript komme ich nun nach etlichen Stunden Ausprobieren, Recherchieren und Lernen trotzdem nicht weiter.

Ausgangspunkt ist das Plugin Lightbox. Damit kann ich Bilder beim Anklicken aufpoppen lassen, damit sie größer dargestellt werden.

Nun ist es jedoch so, dass ich gerne ein paar Anpassungen durchführen würde:
- Ein .class-Container mit dem Namen .lb-container soll eine (maximale) Höhe von 85% der verfügbaren Bildschirmhöhe haben (Bild + div mit Titel und Schließfunktion)
- Die Breite soll sich proportional anpassen
- Der Div mit Titel und Schließfunktion (.lb-dataContainer) soll die gleiche Breite wie das Bild haben

Das ganze soll darum so sein, da sowohl Bilder im Hoch-, als auch Querformat vergrößert werden sollen, jedoch immer nur maximal Bildschirmgroß dargestellt werden darf. Bei Querformat funktioniert das einwandfrei, aber im Hochformat vergrößert mir der Browser alles auf die Breite des Querformatbildes.

So weit bin ich schon, aber es tut sich nichts:

var screenavailheight = screen.availHeight;
var lbcontainerheight = $screenavailheight * 85 / 100;
var node = document.getElementsByClassName('lb-container');
node.style.height = $lbcontainerheight + 'px';

Damit wäre, wenn es funktionieren würde, der erste Punkt abgehakt.
Den zweiten löse ich per CSS, das ist schon geschehen.
Aber beim dritten Punkt finde ich noch nicht einmal einen möglichen Ansatz, wie ich das realisieren könnte.

Der Quellcode ist quasi der selbe wie auf der offiziellen Lightbox 2 Website.

Für Hilfe wäre ich sehr dankbar, ich komme einfach nicht voran...

 

[Duddle]

AW: Bildgröße ändern

Ich habe direkt die lightbox.js angepasst und ein wenig rumgespielt. Wenn ich dich richtig verstanden habe, willst du folgende Änderungen:

preloader = new Image;
preloader.onload = function() {
  $image.attr('src', _this.album[imageNumber].link);
$image.width = preloader.width;
$image.height = preloader.height;
return _this.sizeContainer(preloader.width, preloader.height);
};

wird zu

preloader = new Image;
preloader.onload = function() {
    $image.attr('src', _this.album[imageNumber].link);
    var p = 0.85;
    maxHeight = Math.min(preloader.height, screen.availHeight * p);
    maxWidth = Math.min(preloader.width, screen.availWidth * p);

    $image.width = maxWidth;
    $image.height = maxHeight;
    $image.css({"width":$image.width, "height":$image.height});
    return _this.sizeContainer($image.width, $image.height);
};

Ich mache mehr oder weniger das gleiche wie du, nur direkt im Script und nicht im Nachhinein. Das ist nicht besonders schick, funktioniert aber erstmal. Getestet ist es nur in einem alten FF, keine Ahnung wie es in anderen Browsern aussieht.
Edit: Blödsinn, das beschränkt auch die Breite auf 85% des Bildschirms. Du willst ja nur die Höhe, also brauchen wir den Verkleinerungsfaktor für die Breite:

preloader = new Image;
preloader.onload = function() {
    $image.attr('src', _this.album[imageNumber].link);
    var p = 0.85;
    maxHeight = Math.min(preloader.height, screen.availHeight * p);
    maxWidth = preloader.width * (maxHeight/preloader.height);

    $image.width = maxWidth;
    $image.height = maxHeight;
    $image.css({"width":$image.width, "height":$image.height});
    return _this.sizeContainer($image.width, $image.height);
};

Ende Edit.

Damit sind 1 und 2 abgehakt. Beim dritten ist mir unklar, was du mit "Bild" meinst, ob da der Rahmen mit zählt. Falls ja, ist das jetzt schon so breit wie Bild und Rahmen. Falls nein, kannst du bei

      setTimeout(function() {
        $lightbox.find('.lb-dataContainer').width(newWidth);
        $lightbox.find('.lb-prevLink').height(newHeight);
        $lightbox.find('.lb-nextLink').height(newHeight);
        _this.showImage();
      }, this.options.resizeDuration);

das erste "newWidth" (für dataContainer) mit "imageWidth" ersetzen, dann wird das padding ignoriert.


Duddle

 

[schokomueller]

AW: Bildgröße ändern

Auf jeden Fall vielen Dank.
Ich werde mich damit morgen genau auseinandersetzen, auf die Schnelle hat es jetzt nicht geklappt, habe für heute aber genug :hmpf:

Zu 3.: Ich möchte, dass die Leiste unter dem Bild genauso lang ist, wie das Bild selbst, sodass sie gemeinsam abschließen. Werde bei Unklarheiten morgen mal ein Bild nachreichen.

 

[schokomueller]

AW: Bildgröße ändern

Neuer Tag, neues Glück.
Ich hatte gestern noch CSS-Eigenschaften auf !important gesetzt, weshalb es keine Änderung gab, die habe ich nun alle deaktiviert.

Soweit so gut, bis auf eine Kleinigkeit funktioniert deine Lösung jedoch sehr gut:
- Im Querformat ist das Bild viel zu klein - da reichen auch 85% in der Bildschirmgröße, es müssen nicht gleich ca. 70%. Habe leider selbst den Fehler nicht gefunden (vielleicht 2x 85% genommen?).

Vielen Dank bis hierhin, wenn du den letzten Fehler auch noch ausmerzen kannst, bist du wirklich der beste !

Edit: Bin jetzt selbst etwas weiter gekommen, aber es hakt noch bei dem .lb-dataContainer; den bekomme ich einfach nicht hin. Mal schauen, wie sich das entwickelt...