Modifizierte Colorbox

[andreasisaak]

Hallo,

leider musste ich vor wenigen Tagen feststellen das die Colorbox keine Parameter versteht um die Lightbox zu vergrößern oder zu verkleinern. Besonders bei der Datenschutzerklärung und dem Widerspruch des Trackings ist das aber immer sehr hilfreich da man die Checkbox von Piwik nicht einfach in den Text einbauen mag. Und die Colorbox öffnet sich standardmäßig bei Text leider immer nur so groß wie sie es grade will.

Daher haben wir eine kleine Modifizierung vorgenommen so das man ab jetzt die Abmessungen steuern kann. Das angepasste Template dafür findet ihr in der Contao Boilerplate:

https://github.com/andreasisaak/cont...colorbox.html5

Im Grunde sind diese zwei Werte dazugekommen:

'innerWidth': (($(this).data('width') !== undefined) ? $(this).data('width') : false),
'innerHeight': (($(this).data('height') !== undefined) ? $(this).data('height') : false)

Anwenden kann man das dann so:

<a href="{{link_url::*}}" data-height="200px" data-width="700px" data-lightbox="">Klicken Sie hier, um einen Widerspruch einzulegen</a>

Die Höhen- und Breitenangaben beziehen sich auf den inneren Container der Lightbox.

Viel Spaß bei der Nutzung.

[aportmann]

hoi andreas

hatte gestern richtig freude, als ich den beitrag gefunden habe. erleichtert einem einen grossen missstand.
in den inhaltselementen kann man aber nicht darauf zugreifen, oder? dort lässt sich ja leider nur das «rel» definieren.


gruss andi

[andreasisaak]

Da gibt es ganz einfachen Trick schreib ich dir später hier noch rein. sitze grade beim arzt mit meiner erkältung

[aportmann]

oh, da bin ich gespannt musste für ein anderes element auch noch iframe aktivieren und habe dazu:

$('a[rel^=iframe]').colorbox({
        // Put custom options here
        loop: false,
        maxWidth: '95%',
        maxHeight: '95%',
        iframe:true,
        innerWidth:800,
        innerHeight:600
      });

ins template genommen.

gruss andi

[andreasisaak]

Wo genau willst du es einsetzen? Also in welchen Inhaltselementen?

[aportmann]

im konkreten fall ist es eine statische, kleine google map (dlh_googlemaps), welche auf eine grosse, interaktive karte in einer lightbox (interne seite) verlinkt.

bis anhing hatte ich dort bei lightbox «lightbox [800 600] stehen unter 2.11.16. nun mit 3.2.7 wollte ich auf jquery wechseln.
zurzeit habe ich das template um den schnippsel oben erweitert und gebe ihm dann im lightboxfeld einfach so «iframe» mit.

gruss andi

[andreasisaak]

Ok. Und zwar hatte ich mir vor einigen Wochen eine generelle Lösung in Form von CSS-Klassen ausgedacht. Ich vergebe in dem Hyperlink Inhaltselement z.B. einfach die Klassen "cby520px" und "cbx800px" um Pixelwerte zu verarbeiten. Für Prozenzwerte nehme ich die Klassen "cby90%" und "cbx90%". Im Template prüfe ich dann einfach generell erstmal ob eine Klasse mit dem Anfangswert von "cby" und "cbx". Wenn die Prüfung zuschlägt dann kürze ich die jeweiligen passenden CSS-Klassen um die ersten 3 Zeichen und vergeben für die Höhe den Wert von "cby90%" -> data-height="90%" und für die Breite "cbx90%" -> data-width="90%".

Der Fall das es Klassen gibt die genau mit cby und cbx anfangen ist extrem gering und so kann der Redakteur selbst Größen bestimmen. Ich gebe zu das es etwas holprig wirkt aber CSS-Klassen sind immer im Core vorhanden (extra Extensions waren mir nur für ein Feld zu doof) und das Template muss ich ja leider sowieso anpacken.

[andreasisaak]

Wenn du mir deine Bedingungen ganz genau schildern kannst oder eventuell ein Link hast, dann kann ich dir meine Prüfung der CSS-Klassen hier aufschreiben.

[aportmann]

klingt für mich logisch. das template selbst magst du dazu nicht veröffentlichen? finde ich einen guten workaround.



gruss andi

[andreasisaak]

Schiebe ich heute mal in die Contao Boilerplate

[andreasisaak]

https://github.com/andreasisaak/cont...765304d9cbb8ea

Dank meinem Kollegen Stefan (Chibineko) habe ich die Abfrage noch kürzer bekommen.

<?php 
foreach(trimsplit(' ', $this->class) as $strPart)
{
    if(stripos($strPart, 'cby') !== false)
    {
        echo 'data-height="'.substr($strPart, -3).'"';
    }
    if(stripos($strPart, 'cbx') !== false)
    {
        echo ' data-width="'.substr($strPart, -3).'"';
    }
}
?>