Ergebnis 1 bis 2 von 2

Thema: Colorbox Contao 3.x - Bild resize

  1. #1
    Contao-Nutzer Avatar von joc
    Registriert seit
    17.01.2011.
    Ort
    Bad Breisig am Rhein
    Beiträge
    84
    Partner-ID
    8461

    Standard Colorbox Contao 3.x - Bild resize

    Wer die Colorbox als Lightbox verwendet, dem mag aufgefallen sein, dass die Skalierung der gross-geklickten Bilder sich nicht der Bildschirmgröße anpasst, sondern die unter den Contao-Einstellungen festgelegte Größe (Dateien und Bilder -> Maximale Frontend-Breite ) als Grundlage verwendet.

    Man kann das Colorbox-Template (z.B. j_colorbox.html5) aber leicht kopieren und erweitern, damit sich Bilder, die größer sind als der Browser-Viewport, anpassen.
    Hier ein Beispiel, das das Bild auf 95% der Breite und 90% der Höhe des Browser-Viewports skaliert:

    Code:
    <script>
    (function($) {
      $(document).ready(function() {
        $('a[data-lightbox]').map(function() {
          $(this).colorbox({
            // Put custom options here
            maxWidth:"95%",
            maxHeight:"90%",
            current:"Bild {current} von {total}",
            loop:false,
            rel:$(this).attr('data-lightbox')
          });
        });
      });
    })(jQuery);
    </script>
    Und hier noch eine (wenn auch vielleicht noch nicht perfekte) Möglichkeit, das Bild auch bei einem Browser-Resize neu zu skalieren:

    Code:
    $(function() {
        var timeoutId;
    
        $(window).on('resize', function() {
            if (timeoutId) {
                clearTimeout(timeoutId);
            }
    
            timeoutId = setTimeout(function() {
                if ($('#colorbox:visible').length) {
                    $.colorbox.load();
                }
            }, 250);
        });
    });

  2. #2
    Contao-Fan
    Registriert seit
    03.09.2013.
    Beiträge
    493

    Standard

    Ich nutze auch die colorbox, allerdings möchte ich mit dem rel="lightbox" auch gerne mal unterschiedliche größen angeben, bei der mediabox ging das mit rel="lightbox[400 600]" aber wie funktioniert das bei der colorbox?

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •