Kategorien
(Free-) Software Websiteerstellung Wordpress

WordPress: Lightbox mit autmatischem Resize

Immer wieder gerne und oft genutzt für Fotogalerien ist der Lightbox-Effekt. Doch leider bietet dieser – zumindest in den gefundenen Varianten – keine Möglichkeit, daß die Bilder skaliert werden, falls Sie zu groß für die Bildschirmansicht sind.
Hier die Lösung, wie Sie – getestet mit WordPress v2.7.1 und Lightbox 2.8.2 – funktioniert:

In der Datei lightbox.js folgende Zeile suchen:

myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);

und durch folgenden Code ersetzen:

 
// WiSch - Skalierung auf max. moegliche Bildhoehe falls Bild groesser
// Moegliche Hoehe ermitteln
  var hoehe;
  // alle außer IE
  if (self.innerHeight)
    {  hoehe = self.innerHeight;  }
  // IE 6 strict Mode
  else if (document.documentElement && document.documentElement.clientHeight)
    { hoehe = document.documentElement.clientHeight; }
  // andere IE
  else if (document.body)
    { hoehe = document.body.clientHeight; }
  hoehe = (hoehe - 50);
  // Rezise nur wenn das Bild zu gross waere			  
  if (hoehe < imgPreloader.height) 
    {
      var breite = Math.floor((hoehe / imgPreloader.height) * imgPreloader.width);
      Element.setHeight('stimuli_lightboxImage', hoehe);
      Element.setWidth('stimuli_lightboxImage', breite);
      myLightbox.resizeImageContainer(breite, hoehe);
    }
  else
    {
      myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height); 
    }

Im Code wird von der ermittelten maximalen Höhe noch einmal ein Wert (hier 50) abgezogen. Das ist der Platz, der für die Navigation unter dem Bild benötigt wird und kann je nach Einsatz bzw. Theme abweichen, also ggf. entsprechend anpassen.

Auch wird vom Originalscript noch ein Element-Style eingefügt, um die korrekte Positionierung von oben zu erreichen. Dort war hier jedoch der Abstand zum Browserrand oben zu groß. Um das einzustellen, einfach diese Zeile suchen:

 var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);

und am Ende einen Korrekurwert mit an die Berechnung anhängen (hier -60 Pixel):

var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10) - 60;

Der Entscheidenden Hinweis war im WordPress-Forum zu finden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.