[cerabox_bz] Eine Alternative zur Mediabox

[joe]

Moin,

Wir haben eine kleines Mini Plugin im ER zur Verfügung gestellt welches die Cerabox zur Verfügung stellt. Die Cerabox unterstützt eine ganze Palette von Elementen (Ajax,iFrames,Bilder etc.) und ist dadurch eine echte alternative zur Mediabox. Zu dem ist sie für Mobile optimiert und bietet sehr viele Möglichkeiten zur Konfiguration.

Wir stellen mit diesem Modul quasi die Basis mit den Mootools Templates, die ihr an eure Bedürfnisse anpassen könnt.

Falls Ihr Probleme, Fragen oder Ideen habt freuen wir uns wie immer über euer Feedback.

Die Extension findet Ihr im ER unter: http://contao.org/de/extension-list/...box_bz.de.html

Viele Grüße Joe

[tblumrich]

Hi.

Sieht gut aus. Danke.

Bei mir geht das allerdings nicht... hab ich eventuell noch was vergessen? Oder falsch verstanden?
Nach der Installation hab ich im Layout die moo_cerabox aktiviert und die moo_mediabox deaktiviert. Contao ist 2.11.5 - Mootools Version sollte als ausreichend sein. Caches hab ich gelöscht...
Auf jeden Fall werden z.B. Großansichten einfach direkt in einem neuen Fenster geöffnet... ohne Lightbox.

Ich Quelltext scheint alles aufgerufen zu werden - die mitgelieferte CSS und auch der Aufruf:

<script src="plugins/cerabox/cerabox.min.js"></script>
<script>
    window.addEvent('domready', function() {
        $$('a[data-lightbox').cerabox();
    });
</script>

EDIT:
Irgendwas muss falsch sein... jetzt werden zwar die Bilder nicht in der Lightbox geöffnet, dafür aber die Seiten aus meinem Navigatinsmenü?

Gruß
Thomas

[Andreas]

Du hast einen Schreibfehler

$$('a[data-lightbox]').cerabox();

[tblumrich]

Danke Andreas. Das wars wohl.

Ich hab das auch gleich mal auf Github vermerkt.

Gruß
Thomas

[joe]

Moin,

Vielen Dank für den Hinweis. Da hat sich in der .html5 Datei tatsächlich der Fehlerteufel eingeschlichen. Im ER steht nun Version 1.0.1 zur Verfügung.

vg Joe

[Supermann]

Hallo,

ich finde nach der Installation aber nichts im "Elementtyp" wo ich die Box auswählen kann....

Gruß

[joe]

Hi,

Unter Themes -> Layout im Bereich Skript-Einstellungen -> Mootools Templates wird dir nicht moo_cerabox angezeigt?

[Supermann]

Hallo,

doch das wird es.

Es war mein Fehler, ich hatte gedacht das man das ganze einfacher einsetzen kann ohne irgentwelche Einstellungen am Code, ähnlich wie bei den anderen angebotenen Lightbox Versionen.

Denn so kann ich ja auch die normale Lightbox nutzen, ich bin nicht so der Coder um das ganze so anzupassen das dort auch ein Flash oder sonstiges drinn läuft.

Dachte halt an eine einfach und Komfortable Einstell Lösung.

Gruß

[joe]

Ja wir liefern mit den Mootemplates wirklich nur die Grundbasis. Die Cerabox bietet jede Menge Möglichkeiten zur individuellen Einstellung und Anpassung.

Wir überlegen gerade hierfür einen "Mediabox Converter zu bauen", damit man die Cerabox identisch zur Mediabox in allen Fällen verwenden kann ohne das man selbst Anpassungen vor nehmen muss.

Zudem überlegen wir Tutorials im Github abzulegen.

[Supermann]

Hallo,

das wäre eine Super Idee...

Gruß

[andreasisaak]

Hallo,

doch das wird es.

Es war mein Fehler, ich hatte gedacht das man das ganze einfacher einsetzen kann ohne irgentwelche Einstellungen am Code, ähnlich wie bei den anderen angebotenen Lightbox Versionen.

Denn so kann ich ja auch die normale Lightbox nutzen, ich bin nicht so der Coder um das ganze so anzupassen das dort auch ein Flash oder sonstiges drinn läuft.

Dachte halt an eine einfach und Komfortable Einstell Lösung.

Gruß

Aber die Cerabox macht nichts anderes als die Mediabox. Wenn du die nutzen willst, musst du auch erst im Seitenlayout das Template aktivieren.

@joe

Bitte bleibt dabei. Das ist perfekt und Contao-style.

[qba]

Hallo liebe Mitstreiter,

ich habe die cerabox unter Contao 2.11.4 installiert. Die Großansicht der Bilder funktioniert klasse, aber irgendwie bekomme ich es nicht hin, dass auch ein youtube Video in der Box abgespielt wird. Es kommt immer folgende Fehlermeldung: "The requested content cannot be loaded or might not be supported. Please try again later."

Muss ich dafür noch irgendwo irgendwas einstellen, einfügen?

Schaut mal hier: http://exalto-sport.de/de/angebot/mu...wellbeing.html

Rechts die Bildergalerie funzt, links gibt es einen Link zum youtube Video.

Jemand ne Idee?

Danke

[joe]

Hi,

dein Link ist falsch. Youtube hat vor längerem an seiner Api gedreht. Der Link muss lauten http://www.youtube.com/embed/aKR-VUtKN8M

Zu dem solltest du das Mootemplate anpassen, damit du die Dimensionen steuern kannst, siehe das Beispiel auf der Cerabox Seite:

// Items that don't have a youtube class
$$('#example2 a:not(.youtube)').cerabox({
    group: false
});
// Add the items with a youtube class with a specific size
$$('#example2 a.youtube').cerabox({
    group: false,
    width: 480,
    height: 390
}); 

vg Joe

[qba]

Hallo Joe,

danke Dir für die Antwort. Das mit dem youtube Link war schon mal hilfreich. Ich werde das mal so weitergeben.

Nun habe ich aber immer noch ein Problem mit der Anpassung des mootemplates.

Ich müsste doch das moo_cerabox.xhtml anpassen oder? Meine sieht jetzt so aus:

<?php $GLOBALS['TL_CSS'][] = 'plugins/cerabox/style/cerabox.css'; ?>
<script type="text/javascript" src="plugins/cerabox/cerabox.min.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function() {
        $$('a[rel^=lightbox]').cerabox();
    });

    // Items that don't have a youtube class
$$('#example2 a:not(.youtube)').cerabox({
    group: false
});
// Add the items with a youtube class with a specific size
$$('#example2 a.youtube').cerabox({
    group: false,
    width: 480,
    height: 390
});
   
</script>

aber auf die Größe reagiert er trotzdem nicht. Könntest Du mir bitte noch mal helfen und verraten, was ich falsch mache?

[joe]

Naja dadurch das du den Code nicht angepasst hast kann das auch nicht funktionieren da du keine id example2 hast

Kurzer Exkurs. Javascript Frameworks habe alle eine sogenannte Selector Search Engine. In jQuery wird diese z.B. mit $('#meineId a') und in Mootools mit $$('#meineId a') benutzt. Die Selector Engines arbeiten nach dem querySelector Verfahren welches mit css Anweisungen arbeitet. D.h. $$('#example2 a.youtube') bedeutet nimm alle a tags mit der css klasse youtube in dem Element mit der id example2. Da es die id bei dir nicht gibt kann das auch nicht funktionieren.

Wenn du den Code wie folgt änderst sollte es gehen.

<?php $GLOBALS['TL_CSS'][] = 'plugins/cerabox/style/cerabox.css'; ?> 
<script type="text/javascript" src="plugins/cerabox/cerabox.min.js"></script> 
<script type="text/javascript"> 
    window.addEvent('domready', function() { 
        $$('a[rel^=lightbox]').cerabox(); 
    }); 

    // Items that don't have a youtube class 
$$('a:not(.youtube)').cerabox({ 
    group: false 
}); 
// Add the items with a youtube class with a specific size 
$$('a.youtube').cerabox({ 
    group: false, 
    width: 480, 
    height: 390 
}); 
    
</script>

vg Joe

[qba]

Hallo Joe,

vielen Dank für die kleine Einführung. Da war ich ja echt mal wirklich sehr blind. So ganz funktioniert es zwar immer noch nicht, weil er nämlich nicht auf die Größenangaben reagiert, aber immerhin werden die Videos und Bildergalerien abgespielt. Das ist ja schon mal was.

Schönen Wochenbeginn. :-)

[Urlicht]

Zunächst vielen Dank für diese interessante Alternative

Eine Frage zur Anpassung im template:

Wenn ich die Option "displayTitle: false" einbaue, verschwindet der Titel unten komplett. Ich würde ihn aber gerne anzeigen lassen, OHNE daß er den unteren Bildrand überdeckt oder sich vielleicht sogar ausblendet (ähnlich wie in galeria)

Gibt´s da eine Lösung?

Gruß,
das Urlicht

[joe]

@qba Falls du nicht weiter kommst sag bescheid dann werfe ich da gerne nochmal nen Blick drauf.

@Urlicht
Das ist ganz einfach. Am besten gehst du wie folgt vor:

1. Gehe in den Ordner plugins/cerabox/style und kopiere dir die cerabox.css einfach nach z.B. tl_files/
2. Kopiere dir die Datei moo_cerabox.html5 /.xhtml aus dem ordner system/modules/cerabox_bz/templates nach templates/eventuellDeinThemeOrdner/
3. Ändere nun den Pfad in:

<?php $GLOBALS['TL_CSS'][] = 'tl_files/cerabox.css'; ?>

4. Nun kannst du die CSS Datei editieren und an deine Bedürfnisse anpassen. In deinem Fall langt es einfach in Zeile 84 bei der Css Klasse #cerabox .cerabox-title das position: absolute zu entfernen.

Hoffe das hilft dir

Vg Joe

[Urlicht]

super! Ich wußte nicht, daß man das über css lösen kann. Umso besser

[qba]

Hallo Joe,

da würde ich gern auf Dein Angebot zurückkommen. Was brauchst Du von mir, damit Du mal gucken kannst?

[joe]

Falls jemand ähnliche Herausforderungen wie qba hat könnte folgende Anpassung helfen:

<?php $GLOBALS['TL_CSS'][] = 'plugins/cerabox/style/cerabox.css'; ?> 
<script type="text/javascript" src="plugins/cerabox/cerabox.min.js"></script> 
<script type="text/javascript"> 
    window.addEvent('domready', function() { 
        $$('a[rel^=lightbox]:not(.youtube)').cerabox();

// Add the items with a youtube class with a specific size 
        $$('a.youtube').cerabox({ 
            group: false, 
            width: 480, 
            height: 390 
        }); 
    }); 
</script>

[Flex]

Hmm, hab da ein kleines Problem.
Scheint so als würde die Cerabox leider keine mehrfachen Gruppen unterstützen...

Ich habe mehrere Galerien auf einer Seite (ausgeblendet) und werden per Thumbnail geöffnet... Leider reichen die Bordmittel hier nicht aus um die Gruppen zu trennen für die Cerabox.

Gibt es hier eine einfache Möglichkeit? Die Doku scheint den Fall nicht zu kennen.

Danke im voraus

/edit:
Ich hätte mal den Support suchen sollen und wäre dann in den Google Groups auf meine Antwort gestoßen...

Cerabox doesn't work with the rel attribute to determine collections. What you should do is make a collection of elements that are part of the group and pass them to the cerabox method.

Example; you have a few anchors with the class "collection-1" and a few with the class "collection-2". Your code should look something like this:

window.addEvent('domready', function(){
    // Group 1
    $$('a.collection-1').cerabox();
    // Group 2
    $$('a.collection-2').cerabox();

});

[joe]

Hat sich deine Frage via Twiiter damit erübrigt oder ist das ein anderes Problem? Wenn ja schick mir doch mal ein Beispiel, gerne auch via PM, dann schau ich mir das mal an

[Urlicht]

Inzwischen funktioniert das bei mir schon sehr ordentlich ^^

Eine Frage zum background overlay: Das scheint prozentual fix zu sein, jedenfalls kann ich über CSS keine andere Stärke einstellen. Kann ich irgendwo darauf Einfluß nehmen?

Danke und Gruß,
Gerhard

[joe]

Leider ist das Opacity im Script fest verankert. Ich werde aber mal ein Ticket erstellen das dies bei der nächsten Version geändert wird. Du kannst dir aber mit den onOpen Hook weiterhelfen:

<?php $GLOBALS['TL_CSS'][] = 'plugins/cerabox/style/cerabox.css'; ?>
<script src="plugins/cerabox/cerabox.js"></script>
<script>
    window.addEvent('domready', function() {
        var cerboxOverlay = document.id('cerabox-background');

        $$('a[data-lightbox]').cerabox({
            events: {
                onOpen: function()
                {
                    cerboxOverlay.tween('opacity', 1);
                }
            }
        });
    });
</script>

Er nimmt dabei aber Anfangs immer noch zuerst den in der cerabox vorgegebene opacity wert und erst dann kannst du ihn überschreiben. Wenn du die Option unbedingt brauchst kann ich dir hier eine modifizierte Cerabox zur Verfügung stellen wo die Opacity option eingestellt werden kann.

vg Joe

[Urlicht]

hallo Joe,

vielen Dank für deine Hilfe. Nein, das ist jetzt nicht so wichtig, daß du dich extra für mich in's Zeug legen mußt. Aber ich könnte mir vorstellen, daß beim ein oder anderen auch irgendwann der Wunsch danach aufkommt, dem man ja vorläufig mit dem onOpen workaround abhelfen kann.

Toller support hier!!

[markaba]

Mir gefällt die Cerabox als Alternative sehr gut... es gibt aber Probleme bzgl. der Einbindung von inline-content...

Also irgendwo ein Container hinzupacken und per javascript zu verstecken, ist nicht das Problem...

Dann benötigt die Cerabox aber wohl einen link mit href="#id_des_containers". Den kann man so im ce_hyperlink nicht setzen, da er konvertiert wird (witzigerweise zu ""). Im ce-text wird vom tiny editor ein {{env::request}} davor gesetzt und damit funktioniert es dann nicht! Letzeren kann man natürlich über die html-Funktion entfernen, das ist aber recht unpraktisch auf Dauer.

Hat jemand eine Idee? Vielleicht den link nachträglich bearbeiten über das javascript?

[Andreas]

{{env::request}} muss bei Ankern davor gesetzt werden, da wir ja das BASE im HEAD haben.

Ja, einfach mit JS aufsetzen, bevor die cerabox scannt.

[rockmo10]

Hallo zusammen,

ich hab folgendes Problem und hoffe, dass mir da jemand weiterhelfen kann.

Ich würde gerne per Hyperlink einen Vimeolink einbinden damit er in der Box angezeigt wird.

Und zwar gebe ich die Domain ein und dann bei dem Feld Lightbox: lightbox[800 600]

Dazu noch ein Bild, weil es soll halt auf das Bild geklickt werden und dann soll die Box mit der Einbindung des Videos erscheinen.

Leider erscheint dann statt des Inhaltes nur eine weiße Fläche


Bei der Mediabox funktioniert das super aber leider nicht bei der Cerabox.

Jetzt fragen sicher einige warum ich dann nicht die Mediabox verwende, aber ich benutze die Cerabox, weil ich da alles besser konfigurieren kann bzgl. Fullsize etc.


Hat jemand eine Idee?

Lieben Dank schonmal !!

[rockmo10]

Hallo zusammen,

ich hab folgendes Problem und hoffe, dass mir da jemand weiterhelfen kann.

Ich würde gerne per Hyperlink einen Vimeolink einbinden damit er in der Box angezeigt wird.

Und zwar gebe ich die Domain ein und dann bei dem Feld Lightbox: lightbox[800 600]

Dazu noch ein Bild, weil es soll halt auf das Bild geklickt werden und dann soll die Box mit der Einbindung des Videos erscheinen.

Leider erscheint dann statt des Inhaltes nur eine weiße Fläche


Bei der Mediabox funktioniert das super aber leider nicht bei der Cerabox.

Jetzt fragen sicher einige warum ich dann nicht die Mediabox verwende, aber ich benutze die Cerabox, weil ich da alles besser konfigurieren kann bzgl. Fullsize etc.


Hat jemand eine Idee?

Lieben Dank schonmal !!

okay, habs gerade herausgefunden

Der Fehler den ich gemacht habe:
Ich habe den Browserlink verwendet.

Richtig:
Bei den Videos gibt es einen Button: Teilen
Und dort kann man sich einen Link für die Einbettung ausgeben lassen.

Und dann funktioniert es auch mit der Cerabox