Hallo,
nachdem ich hier gerade den Anwendungsfall habe, dachte ich mir, schreibst mal eine kleine Anleitung, wird scheinbar öfter gesucht.
Aufgabenstellung:
es soll mit dem jQuery-Plugin Colorbox ein Content als Popup angezeigt werden. Außerdem soll dieses Popup nicht dauernd beim Wechseln der Seite angezeigt werden, sondern nur einmal pro Session.
Lösung:
1. jquery.cookie.js einbinden
Es gibt da ein kleines, feines und leicht anzuwendendes Plugin für jQuery, mit dem man Cookies setzen kann. Zu finden ist es hier: https://github.com/carhartl/jquery-cookie
Das Plugin in der aktuelle Version einfach ins Upload-Verzeichnis von Contao hochladen (z.B. files/theme/js/jquery.cookie.js).
Danach ein neues Template anlegen, z.B. j_cookie.html5, und folgenden Code eingeben:
Code:
<script src="files/theme/js/jquery.cookie.js"></script>
Im Template (z.B. im Standardtemplate für die Webseite) in der Sektion "jQuery" folgendes anhaken:
screenshot-stage stocksportevents info 2015-02-16 13-08-08.png
So weit, so fertig mal für den Anfang
2. Colorbox anzeigen und Cookie setzen
Der Rest ist nun ziemlich einfach. Wir müssen nur noch Javascript-Code einfügen und das war es dann schon. Wir machen unter Theme -> Layouts wieder das betroffene Layout auf (falls nicht noch offen) und geben nun folgendes in der Sektion "Skript-Einstellungen" in "Eigener Javascript-Code" ein:
Code:
<script>
(function($){
$(document).ready(function() {
if ( $.cookie("MeinCookie") != 'shown' ) {
$.colorbox({
href: 'files/images/meinbild.jpg',
transition: 'elastic',
speed: 500,
opacity: 0.6
});
$.cookie("MeinCookie", 'shown');
};
});
})(jQuery);
</script>
Jetzt einfach mal einen Reload der eigenen Seite machen und voilá, das Popup ist zu sehen. Ein nochmaliger Reload sollte das Bild nicht mehr anzeigen, bis zu dem Zeitpunkt, bis die Session zerstört wurde.
Hoffe, das hilft hier mal wem.
Gruß, Thomas
Lesezeichen