Mal ne Frage... wie funktioniert den sowas???
https://contao.org/
Die Lightbox die aufgeht ?
Mal ne Frage... wie funktioniert den sowas???
https://contao.org/
Die Lightbox die aufgeht ?
Wenn du genau hinschaust, wird an die URL der Zusatz #new-name gehängt.
Im Quelltext der Startseite steht dann folgendes JavaScript:
Fraachmichnich nach Details, aber dieser Code macht dasPHP-Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
var u = new URI(document.URL);
if (u.get('fragment') == 'new-name') {
Mediabox.open('#mb_inline', '', '380 200');
}
});
//--><!]]>
</script>
»pmueller.de« | »groningen-info.de«
Also, Du erstellst im /templates Verzeichnis eine Datei z.B. moo_popup.tpl mit folgendem Inhalt:
nun bindest Du diese Datei im entsprechenden Seitenlayout (falls "moo_mediabox" bereits ausgewählt ist, bitte deaktivieren) ein.Code:<?php // Add mediabox style sheet $GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox.css|screen'; ?> <script type="text/javascript" src="plugins/mediabox/js/mediabox.js"></script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- Mediabox.scanPage = function() { var links = $$("a").filter(function(el) { return el.rel && el.rel.test(/^lightbox/i); }); $$(links).mediabox({/* Put custom options here */}, null, function(el) { var rel0 = this.rel.replace(/[[]|]/gi," "); var relsize = rel0.split(" "); return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1])); }); }; window.addEvent("domready", Mediabox.scanPage); //--><!]]> </script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- window.addEvent('domready', function() { var u = new URI(document.URL); if (u == 'http://www.xxxxxxxxx.xx/xxxxxxxxxxxxxx.html') { Mediabox.open('#mb_popup', '', '380 200'); } }); //--><!]]> </script>
Auf der Seite/Artikel auf der das Popup erscheinen soll erstellst Du ein Textelement mit der CSS ID mb_popup (siehe code). Diese CSS ID mußt Du noch in deiner CSS-Definition auf display:none setzen.
Dieser Eintrag http://www.xxxxxxxxx.xx/xxxxxxxxxxxxxx.html im obigen Code muß natürlich durch die entsprechende URL erstetzt werden.Code:#mb_popup{display:none;}
So, ich hoffe ich habe nichts vergessen und konnte ein wenig helfen.
Gruß
Marrxx
Falls man wie bei der Contao Site ein Popup-Hinweis mit Hilfe der light4award Box vor der eigentlichen Startseite seiner Homepage anzeigen möchte, so ist der obige Code oben Marrxx eine sehr schöne Lösung.
Bei dieser Variante wird jedoch bei jedem Aufruf der Startseite das Popup Fenster angezeigt. Das heißt jedesmal wenn ein User in eine Unterseite verzweigt und anschließend wieder ins Hauptmenü zurück kommt so öffnet sich das Popup Fenster.
Dies läßt sich jedoch mittels eines Cookies unterbinden so das, dass Popup Fenster für den User nur einmal innerhalb einer einstellbaren Zeit (in Tage) erscheint.
Hierfür muss der vorhandene Code von Marrxx wie folgt ergänzt werden:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
var u = new URI(document.URL);
if ((u == 'http://www.xxxxxxxxx.xx/xxxxxxxxxxxxxx.html') && !Cookie.read('POPUP')) {Cookie.write('POPUP', '1',{duration: 365})
Mediabox.open('#mb_popup', '', '380 200');
}
});
//--><!]]>
</script>
Der Wert {duration: 365} besagt, das der Cookie 365 Tage bestand hat, wenn der User also seine Cookies nicht löscht, wírd das Popup erst nach einem Jahr wieder erscheinen.
An diese Stelle noch mal ein Dankeschön an Marrxx für den Code!
MiTsch
Wer nichts weiss muss alles Glauben !
Super, vielen Dank für die lössung, funktioniert prima, was ist aber wenn man die moo_mediabox doch braucht?
Hallo Rocksoft,
die Mediabox sollte trotzdem funktionieren, das Popup ist nur eine Ergänzung!
Das original Template muß nur deaktiviert werden, weil es sonst der Java Script doppelt aufgerufen wird, was zu Problemen führt!
Gruß
Marrxx
Hallo Marrxx,
ok vielen Dank für die Antwort.
Mfg
Robert
Hallo,
ganz komm ich mit dem noch nicht klar.
Ich möchte, dass die Lightbox erscheint, wenn man die Domain eingibt.
Wenn ich also www.hohenburgerhof.at eingebe soll dann die Lightbox erscheinen.
Ich weiss nur nicht, wo ich den Text hinstellen soll. Ich hab nun einen Artikel unter Restaurant mit dem Text eingebaut. Da funktioniert es auch. Wenn ich also im Browser zur Domain noch /restaurant.html (was eigentlich auch die Startseite ist) eingebe, dann kommt die Lightbox.
Ich möchte aber, dass diese nur erscheint, wenn man nur die Domain eingibt.
Kann mir da mal jemand bitte belhilflich sein?
LG, Andi
wenn ich http://www.hohenburgerhof.at/index.html angebe, funktioniert die weiterleitung.
wenn ich nur http://www.hohenburgerhof.at eingebe nicht...
das würde mich auch mal interessieren
Versucht mal anstelle von
folgenden CodeCode:<script type="text/javascript"> <!--//--><![CDATA[//><!-- window.addEvent('domready', function() { var u = new URI(document.URL); if (u == 'http://www.hohenburgerhof.at/restaurant.html') { Mediabox.open('#mb_popup', '', '350 250'); } }); //--><!]]> </script>
GrußCode:<script type="text/javascript"> <!--//--><![CDATA[//><!-- window.addEvent('domready', function() { var u = location.pathname; if (u == '/' || u == '/restaurant.html') { Mediabox.open('#mb_popup', '', '350 250'); } }); //--><!]]> </script>
Marrxx
Spitze, danke marrxx, das funktioniert.
Ich hätte sonst noch eine andere Lösung gehabt. Und zwar habe ich in der Seitenstruktur vor dem Punkt Restaurant eine neue Seite mit einer Internen Weiterleitung auf Restaurant erstellt. Diese Seite habe ich veröffentlicht und aus dem Menü weggeblendet.
Das hätte auch funktioniert.
In der Adresszeile hat sich dann immer nach eingabe der Domain die Adresse um /restaurant.html erweitert.
Wie gesagt, das hätte auch funktioniert, aber im Template ist es schöner.
Danke nochmals
LG, Andi
Hi,
das ist genau das was ich suche, leider basiert meine seite nicht auf contao.
Denkt ihr es ist auch möglich den code so umzubauen das er auch ohne cantao funktioniert.
Sprich die .js .css und .jpg dateien laden neue verknüpfen?
Muss man die CSS dann wirklich so renladen? Und muss es ein php doc sein?
Danke schon mal.PHP-Code:
<?php
// Add mediabox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox.css|screen';
?>
Gruß Matthias
Geändert von hensmatt (18.11.2010 um 11:46 Uhr)
Hallo Matthias,
da das ganze nicht auf Code von Contao zurückgreift, funktioniert das auch in allen Seiten, die nicht mit Contao erstellt wurden.
Weitere Infos, u.a. zum Einbinden der von Contao verwendeten Mediabox findest du hier: http://iaian7.com/webcode/mediaboxAdvanced
Gruß Janosch
Hi Janosch,
vielen dank für den link, der hat mich schon mal ein gutes Stück weiter gebracht.
Es klappt auch soweit, jedoch kann ich die lighbox nur auf linkklick hin öffnen,
der automatische startup kappt noch nicht.
Hier mal die Beispielseite:
http://demo.studio-thiel.de/
Und hier der Code:
HTML-Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> <link href="css/mediaboxAdvBlack21.css" rel="stylesheet" type="text/css" /> <script src="js/mootools-core-1.3-full-compat-yc.js" type="text/javascript"></script> <script src="js/mediaboxAdv-1.3.4b.js" type="text/javascript"></script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- Mediabox.scanPage = function() { var links = $$("a").filter(function(el) { return el.rel && el.rel.test(/^lightbox/i); }); $$(links).mediabox({/* Put custom options here */}, null, function(el) { var rel0 = this.rel.replace(/[[]|]/gi," "); var relsize = rel0.split(" "); return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1])); }); }; window.addEvent("domready", Mediabox.scanPage); //--><!]]> </script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- window.addEvent('domready', function() { var u = new URI(document.URL); if ((u == '/index.html') && !Cookie.read('POPUP')) {Cookie.write('POPUP', '1',{duration: 365}) Mediabox.open('#mb_popup', '', '380 200'); } }); //--><!]]> </script> </head> <body> <a href="#mb_popup" rel="lightbox[inline 360 180]" title="">inline content</a> <div id="mb_popup" style="display: none;"> <span style="color: #999999; text-align: center;">This is an example of content that was hidden on the page, and opened in Mediabox using an anchor link.<br/><br/> <a href="" onclick="Mediabox.close();return false;">close onClick »</a></span></div> </body> </html>
Hallo,
wenn du dir das ganze z.B. im Firefox mit Firebug anschaust, siehst du, dass das JavaScript diese Fehlermeldung erzeugt:
URI is not defined
[Break on this error] var u = new URI(document.URL);
Dies kann daran liegen, dass Contao derzeit noch mit Mootools 1.2 arbeitet, du aber bereits die 1.3 verwendest.
Gruß Janosch
An irgendwie sowas wird es liegen... :-(
Ich hab mir jetzt mal die Dateien von www.contao.org aus dem Quelltext gezogen und die Elemente auch so angeordnet wie bei Ihnen also die Scripts am ende des Bodys.
Aber es geht leider immer noch nicht. Das Aufrufen über den link ist nun auch nicht mehr möglich.
Firebug zeigt jetzt den Fehler an:
contao.js (Zeile 1)HTML-Code:$("mainmenu") is null [Break on this error] window.addEvent("domready",function(){...(a,{duration:300}).start({opacity:1})
Die testseite habe ich aktualisiert http://demo.studio-thiel.de/ hier mein aktueller Code:
HTML-Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> <link href="css/mediabox.css" rel="stylesheet" type="text/css" /> <script src="js/mootools-yui-compressed.js" type="text/javascript"></script> <script src="js/mootools-more.js" type="text/javascript"></script> <script src="js/contao.js" type="text/javascript"></script> </head> <body> <a href="#mb_popup" rel="lightbox[inline 360 180]" title="">inline content</a> <script src="js/mediabox.js" type="text/javascript"></script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- Mediabox.scanPage = function() { var links = $$("a").filter(function(el) { return el.rel && el.rel.test(/^lightbox/i); }); $$(links).mediabox({/* Put custom options here */}, null, function(el) { var rel0 = this.rel.replace(/[[]|]/gi," "); var relsize = rel0.split(" "); return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1])); }); }; window.addEvent("domready", Mediabox.scanPage); //--><!]]> </script> <div id="mb_popup" style="display: none;"> <span style="color: #999999; text-align: center;">This is an example of content that was hidden on the page, and opened in Mediabox using an anchor link.<br/><br/> <a href="" onclick="Mediabox.close();return false;">close onClick »</a></span></div> <script type="text/javascript"> <!--//--><![CDATA[//><!-- window.addEvent('domready', function() { var u = new URI(document.URL); if ((u == '/index.html') && !Cookie.read('POPUP')) {Cookie.write('POPUP', '1',{duration: 365}) Mediabox.open('#mb_popup', '', '380 200'); } }); //--><!]]> </script> </body> </html>
Hallo hensmatt,
der Fehler kommt aus der
<script src="js/contao.js" type="text/javascript"></script>
Datei.
Wenn das richtig sehe, brauchst Du die garnicht. Kommentier die mal raus, mal sehen was dann passiert.
Gruß
Marrxx
Hallo marrxx,
ich hab die datei rausgeworfen und die Konsole ist nun schon mal fehlerfrei, die box lässt sich nun auch wieder über den link öffnen.
Aber beim besuchen der Seite passiert noch nix.
Ich hab auch schon die cookies gelöscht.
Er schreibt auch gar keine neuen cookies mehr.
Oder unter welchem eintrag muss ich da suchen?
Hab den domainnamen eingegeben bei der Firefox cookie verwaltung.
so far...
matthias
Soll die Lightbox nur beim ersten betreten der Seite aufgehen oder jedes mal wenn man auf die Startseite geht?
Ich habe mir in templates/lbStartseite.php angelegt mit
und per HTML-Inhaltselement mit {{file::lbStartseite.php}} eingebunden.Code:<script type="text/javascript"> window.addEvent('load',function(){ Mediabox.open([ ['tl_files/content/bild01.jpg','Title Bild1'], ['tl_files/content/bild02.jpg','Title Bild2'] ],0,Mediabox.customOptions); }); </script>
Hier wird KEINE URL-Prüfung gemacht sondern bei jedem Aufruf der Startseite die Lightbox geöffnet. (Also entweder Mediabox oder Lightbox4ward)
Hallo,
der Hinweis soll nur erscheinen wenn der user das erste mal die Seite betritt.
Ich arbeite ja auch nicht mit dem contao cms, sonst würde es ja wahrscheinlich schon gehen.
Gruß Matthias
Dann setz doch einfach n Cookie:
HTML-Code:<script type="text/javascript"> window.addEvent('load',function(){ if(Cookie.read('POPUP')) return; Cookie.write('POPUP', '1',{duration: 365}); Mediabox.open([ ['tl_files/content/bild01.jpg','Title Bild1'], ['tl_files/content/bild02.jpg','Title Bild2'] ],0,Mediabox.customOptions); }); </script>
Sooo ich habe es hinbekommen,
ich hab deinen Code mal angepasst und es klappt
Hier noch mal der Code:
Vielen Dank für die Hilfe!Code:<script type="text/javascript"> window.addEvent('load',function(){ if(Cookie.read('POPUP')) return; Cookie.write('POPUP', '1',{duration: 365}); Mediabox.open('#mb_popup', '', '380 200'); }); </script>
Zu früh gefreut,
also der Testballon hat ja geklappt, aber als ich den Code dann in die richtige Seite einfügen wollte ging es natürlich nicht.
Problem sind die anderen Scripte, wenn ich diese rausnehme geht es.
Aber das ist natürlich nicht sinn der Sache.
Ich glaub es liegt daran das wenn alle mit dem gleichen Ereignis (onLoad, onClick) gestartet werden sollen kommen die sich in die quere.
Wie kann ich eigentlich mehrere Scripte in einem Dokument laufen lassen?
Die Fehlerkonsole meckert über die prototype.js aber wenn ich die rausnehme dann tauchen auf einmal Fehler in der mud_Script_hochzeit1.js und mediabox.js auf.
Hier mal ein link zur aktuellen Seite:http://mb.studio-thiel.de/
Hier der Head Bereich:
HTML-Code:<link href="style/all.css" rel="stylesheet" type="text/css" media="screen" /> <link href="style/mediabox.css" rel="stylesheet" type="text/css" media="screen" /> <script src="scripts/mootools-yui-compressed.js" type="text/javascript"></script> <script src="scripts/mootools-more.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="scripts/cufon-yui.js" type="text/javascript"></script> <script src="scripts/helv_unsecure.font.js" type="text/javascript"></script> <script src="scripts/prototype.js" type="text/javascript"></script> <script src="scripts/mud_ShiftContent.js" type="text/javascript"></script> <script src="scripts/mud_Script_hochzeit1.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('#navVertical li a',{hover: true}); Cufon.replace('#navHorizontal li',{hover: true}); Cufon.replace('h2'); Cufon.replace('h3'); </script>
Sieht für mich aus als würde sich was nicht mit Prototype vertrage - ist das Framework wirklich nötig? Gibts kein Mootools-Pendant?
Vielleicht müsste man jQuery im sog. "noConflict"-Modus betreiben...
There is no jQuery
Ich würds mal ohne Prototype probiern
Wie schon geschrieben, wenn ich die prototype.js rausnehme klappt es trozdem nicht es kommen nur andere fehlermeldungen.
HTML-Code:Event.observe is not a function [Break on this error] Event.observe(window, 'load', init, false); mud_Sc...eit1.js (Zeile 197) $(document.body).adopt is not a function [Break on this error] var Mediabox;(function(){var A,h,P,H,O...new Element("div",{id:"mbCaption"})); mediabox.js (Zeile 2)
Wenn ich die "jquery.min.js" und die "protoype.js" rausnehme geht es erst.
Und ich brauch die prototype.js auch damit das mit den Bildern funktioniert und die jquery brauch ich für die Schriftformatierung.
Edit: Die "jquery.min.js" kann ich doch rausnehmen, jetzt funkt nur noch die "prototype.js" dazwischen.
Geändert von hensmatt (18.11.2010 um 17:39 Uhr)
Ich hab kein jQuery im Source gefunden?
ABER wenn wir von Cufon reden, dann brauchst du dafür jQuery NICHT. Cufon kann auch die selector-engine von Mootools nutzen und wenn du nur trivial Selectoren nutzt wie "h1" dann brauchst du nicht mal Mootools.
Doch doch, jQuery war drin.
Wie du schon geschrieben hast, mootools macht es unnötig, deshalb hab ich es rausgemommen.Code:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Wie bekomm ich denn jetzt die prototype.js angepasst damit es klappt?
Ich hab auch schon alle möglichen Anordnungen bzw. Reihnfolgen der scripts druchprobiert.
Hallo zusammen,
sorry stehe gerade aufm Schlauch...
Wie binde ich das Script denn ins Seitenlayout ein?
Ich möchte, dass beim Aufruf der Startseite eine spezielle NEws aufgerufen wird!
Danke
EDIT: Bin wieder vom Schlauch runter, musste natürlich komplett ins Seitenlayout (<script>)
Geändert von matuweb (26.04.2011 um 10:17 Uhr)
Hallo zusammen,
die Lösung hier funktioniert prima. Herzlichen Dank dafür.
Ich möchte nun noch, dass die Lightbox einem Besucher alle 60 Minuten angezeigt wird. Durch das Einbinden ins Seitenlayout bekomme ich das Script ja auf jede Seite, aber wie kann ich die Cookie-Zeit auf Sekunden/Minuten einstellen?
In der Mootools-Doku habe ich auch nur die Duration mit Tagen gefunden.
Hat jemand eine Idee?
Grüße
PAndroid
Hallo PAndroid,
dann mußt Du es nur dezimal angeben, also
0.5 wären z.B. ca. 10 Stunden
Ich habe es mit:
Cookie.write('POPUP', '1',{duration: 0.125});
ausprobiert, dass ist ca. 1 Stunde.
Gruß
Marrxx
Hallo Marrxx,
vielen Dank für Deine schnelle Lösung. Das funktioniert prima.
Eigentlich logisch, aber manchmal sieht man den Wald...
Wäre es auch möglich, die Lightbox erst nach ein paar Minuten nachdem der Besucher das erste Mal auf der Seite war zu laden und dann wieder nach ein paar Minuten?
Hintergrund: Ich möchte gern auf eine Umfrage zur Webseite aufmerksam machen. Das macht aber erst Sinn, wenn der Besucher ein paar Minuten auf der Seite war. Wenn die Lightbox gleich beim ersten Aufruf kommt, wird sie der Großteil wegklicken.
Grüße
PAndroid
Ich glaube das wird mit Mootools schwierig. Da muss ich passen und an die Anderen kompetenten Forumsbesucher verweisen.
Gruß
Marrxx
Hallo Marrxx,
vielen Dank für Deine Rückmeldung.
Dann stelle ich das Thema nochmal neu in die Runde - wohl mehr Richtung Cookie-Verarbeitung.
Gruß
PAndroid
Ergänzend zu dem Beitrag von Marrxx. Eigentlich gibt es immer das Problem, dass die domain mit "http://www.domain.de" und "http://domain.de" aufgerufen werden kann. Mit einer kleinen "oder" Abfrage kann auch das abgefangen werden.
Einfach den Code bei Marrxx an dieser Stelle mit dem Ersetzen.Code:if (u == 'http://www.xxxxxxxxx.xx/xxxxxxxxxxxxxx.html' || u == 'http://xxxxxxxxx.xx/xxxxxxxxxxxxxx.html') { Mediabox.open('#mb_popup', '', '380 200'); }
Dieser Eintrag [ url]http://www.xxxxxxxxx.xx/xxxxxxxxxxxxxx.html[ /url] im obigen Code muß natürlich durch die entsprechende URL erstetzt werden.
Viel Spaß damit
sehr gut, vielen dank für die infos hier!
ein problem habe ich noch. das pop-up funktioniert bestens, wenn ich den ganzen link eingebe (sowohl im code als auch in der adresszeile des browsers):
http://myweibel.ch/index.php/willkommen-50.html
wenn ich aber über:
www.myweibel.ch oder myweibel.ch
gehe, dann funktioniert es nicht. auch wenn ich den link im code entsprechend anpasse.
ok, hab die lösung grad selbst gefunden!
Hallo zusammen,
gibt es auch eine Möglichkeit für eine automatische Größenanpassung?
Momentan wird ja 380 x 200 px für das Popup verwendet.
Grund:
Ich habe eine Seite die responsive ist und z.B. in der Smartphoneversion wäre das Popup zu groß.
ODER
Gibt es eine Möglichkeit in dem Script zu sagen, dass ab einer bestimmten Browsergröße das Popup nicht aufgerufen werden soll?
Leider bin ich in Javascript nicht so fit, daher würde ich mich SEHR freuen, wenn Ihr ein paar Tipps/Lösungen hättet.
Vielen Dank schonmal in die Runde !
Ich muss diese unsägliche Technik gerade notgedrungen bei einem Kunden auf der Startseite einbauen (ja, ich weiß, gruselig).
Bei dem Kunden ist auf der Seite Mootools schon aktiv und ebenso die Mediabox (hat im Content der Seite noch Bilder die vergrößerbar sind).
Deshalb habe ich den Code so zusammengekürzt:
Auf der Startseite selbst habe ich ein Bild-Element mit der ID mb_popup angelegt und im Seitenlayout zusätzlich zum schon bestehenden Mediabox-Template dahinter auch dieses Popup-Template eingebunden. Ruft man die Startseite auf, kommt aber kein Popup zum Vorschein.HTML-Code:<script type="text/javascript"> <!--//--><![CDATA[//><!-- window.addEvent('domready', function() { var u = new URI(document.URL); if (u == 'http://www.domain.de' || u == 'http://domain.de' || u == 'http://www.domain.de/startseite.html' || u == 'http://domain.de/startseite.html') { Mediabox.open('#mb_popup', '', '800 600'); } }); //--><!]]> </script>
Könnte das mit der sitemap-Erweiterung zusammenhängen die bewirkt, dass die Startseite immer mit (www).domain.de (ohne startseite.html) aufgerufen wird? Bin für Anregungen dankbar.
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
Lesezeichen