Hallo zusammen,
ich möchte gerne einen Navigationspunkt über eine Lightbox öffnen lassen und damit eine externe Seite anzeigen lassen.
Verwendet wird das ganz normale Naigations Modul.
Gibt es da eine einfache möglichkeit?
Danke für eure Tips!
Hallo zusammen,
ich möchte gerne einen Navigationspunkt über eine Lightbox öffnen lassen und damit eine externe Seite anzeigen lassen.
Verwendet wird das ganz normale Naigations Modul.
Gibt es da eine einfache möglichkeit?
Danke für eure Tips!
Hat jemand ne Idee wie ich das am einfachsten umsetze?
LG
Schnubi
Die Lightboxen machen das alle ein wenig anders. Normalerweise ist das in Contao so, dass die Lightboxen die Anker (Links), deren HREFs (Ziele) in einer Lightbox geöffnet werden sollen anhand des Attributs data-lightbox erkennen. Auszug aus der Demo http://demo.contao.org/en/media-elements.html
Sobald der DOM geladen ist scannt die Lightbox den Quellcode nach solchen Links.HTML-Code:<a title="DSC_5276.jpg" data-lightbox="lb290" href="files/contaodemo/media/content-images/DSC_5276.jpg" ...
Der Wert von data-lightbox kann auch erstmal leer sein (""). Gibt es mehrere Anker mit dem selben Wert, dann hat man in der Lightbox die Weiterblätternfunktion für diese Anker (Albumfunktion).
Anhand des HREFs entscheidet die Lightbox, was sie macht, z.B. im IFRAME oder im DIV anzeigen.
Versteckten Inhalt anzeigen, welcher bereits auf der Seite ist geht auch, da sollte man dann aber nochmal die jeweilige Anleitung der Lightbox lesen.
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Danke Andreas,
ich hab es geschafft die Seite über einen Link in der Lightbox zu öffnen, soweit schon mal gut, aber.... und jetzt kommts wie bekomme ich diesen Link in meine Navigation, ich hätte gerne einen Punkt in der Navigation der dann nicht auf der Seite geöffnet wird sonder in der Lightbox, ich habe aber keine Funktion gefunden wo ich das eingeben kann.
Vielleicht kannst du mir das noch kurz erklären, vielleicht geht das ja auch garnicht!
Danke dir!
Geändert von Schnubi (27.08.2016 um 19:56 Uhr)
spontane Ideen als Denkansatz:
- eine Seite als externe Weiterleitung anlegen
im Template die Ausgabe so verändern, dass bei diesem Link die Lightbox geöffnet wird- das Navigationstemplate so verändern, dass der Link mit Öffnung in der Lightbox hardcodiert im Template steht
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Da er ja sowieso schon mit JS arbeitet, würde ich das eher über JS regeln, einfach oben ins j_colorbox oder moo_mediabox Template, bevor nach den Links gescannt wird.
Gib deiner Seite in der Seitenstruktur eine Klasse. Beispiel: lightbox (die taucht dann in der Navigation bei den Links auf). Und dann die Templateänderung in j_colorbox:
Diese Ergänzung im Template sucht nach Links mit der Klasse lightbox und fügt diesen das Attribut data-lightbox hinzu bevor die Lightbox nach diesen Links scannt.PHP-Code:
...
$(document).ready(function() {
// next line is new
$('a.lightbox').attr('data-lightbox', "");
$('a[data-lightbox]').map(function() {
...
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Die Lösung finde ich gut. Man merkt, dass ich bei js noch sehr in den Kinderschuhen stecke. Da muss ich noch viel lernen.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Das kommt mit der Zeit. Aber du hattest letztens hier mal was vorgestellt, das fand ich schon ziemlich gut.
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Du meinst sicher den Slider mit den Hintergrundbildern.
Ich freue mich, dass Du es als js-Profi "schon ziemlich gut" findest. Ich hatte ja nicht allzuviel Resonanz auf mein Posting und wusste nacher nicht, ob ich mich vielleicht so doof angestellt habe, dass keiner etwas zur Lösung an sich sagen wollte.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Ja, ich meine der wars. Hatte da mal geguckt, ob man das einfacher machen kann, aber dann doch irgendwie aufgegeben. Ich hätte da vielleicht ein paar Kleinigkeiten geändert, wollte aber nichts sagen, ohne selber ne bessere Lösung präsentieren zu können. Mit der Zeit werden wir ja alle besser, auch die Profis und dazu gehörst du ja auch. Auch wenn du dich mit JS noch ein wenig unsicher fühlst.
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Danke Andreas, das klingt sehr cool, ich glaub das sollte ich hinbekommen.
Ich versuch das morgen gleich, geb dann bescheid obs funktioniert hat.
Danke für eure nette Hilfe!!
EDIT:
Leider bekomm ichs doch nicht hin, wenn ich das jetzt über einen Link löse, dann wandelt mir contao ja das data-lightbox in rel=lightbox um, dann funktionierts, bei der JS Variante leider nicht und darum vermute ich kommt dann die Fehlermeldung "This content faild to load"
Wenn ich mir den Quelltext jetzt anschau sieht das so aus:
Das ist der Link der funktioniert:Code:<li class="lightbox first"> <a class="lightbox first cboxElement" title="Zeig mir die Seite" href="http://www.domain.tdl/7blablabla" data-lightbox="980 680">Zeig mir die Seite</a> </li>
Kann ich das JS so anpassen dass das rel="lightbox" mit in den Link kommt?Code:<a class="cboxElement" rel="lightbox" href="http://www.domain.tdl/7blablabla" data-lightbox="980 680">Zeig mir die Seite</a>
Danke
Geändert von Schnubi (27.08.2016 um 20:30 Uhr)
Ok ich hab das rel="lightbox" selbst reingebracht, aber leider funktioniert das noch immer nicht.
Mein j_colorbox schaut so aus:
Code:... <script> (function($) { $(document).ready(function() { // Die Seite mit der Klasse "lightbox" als Lightbox in der Navi öffen $('a.lightbox').attr('data-lightbox', "980 680"); $('a.lightbox').attr('rel', "lightbox"); $('a[data-lightbox]').map(function() { $(this).colorbox({ // Put custom options here loop: false, rel: $(this).attr('data-lightbox'), maxWidth: '95%', maxHeight: '95%' }); }); }); })(jQuery); </script>
EDIT:
Ich glaub ich hab den Fehler, im Link befindet sich ein "&" das wird von contao umgewandelt in "&", dadurch funktioniert der Linkaufruf nicht.
Kann ich das irgendwie umgehen?
EDIT 2:
Das wars doch nicht
Wenn ich den link mit der rechten Maustaste in einem neuen Tab öffnen lasse gehts, wenn ich ihn direkt anklicke gehts nicht.
Geändert von Schnubi (27.08.2016 um 20:57 Uhr)
Da müsstest du mal einen Link zur Seite zeigen.
Zur Klärung: Mit rel="lightbox" brauchst du da nicht zu arbeiten. Ich gehe davon aus, dass deine Ausgabe HTML und nicht XHTML ist. Das Attribut REL mit dem Wert "lightbox" ist in HTML verboten. Deshalb gibt es unterschiedliche Templates: j_colorbox.html5 und j_colorbox.xhtml. Im ersten wird nach Links mit dem Attribut DATA-LIGHTBOX gesucht, im zweiten nach Links mit dem Attribut REL und dem Wert lightbox.
Was ich oben geschrieben habe bezieht sich auf HTML, nicht XHTML. Die Zeile
solltest du also aus dem Template wieder entfernen, und teste auch erstmal ohne die Angabe "980 680". Einfach genauso, wie ich das im obigen Post geschrieben habe sollte das in HTML funktionieren.PHP-Code:
$('a.lightbox').attr('rel', "lightbox");
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Muss man da im j_colorbox.html5 nicht noch als Custom-Option
einsetzen?Code:iframe: true
Man kann das direkt in der Online-Demo testen. Es funktioniert auch ohne iframe:true. Sieht auf den ersten Blick richtig aus, im DOM aber komisch. Man findet dort kein IFRAME, aber den Inhalt des HEAD und den Inhalt des BODY. Je nachdem was man machen will, muss man sowieso nochmal die Anleitung der jeweiligen Lightbox lesen. Und wenn man eine interne Seite öffnet, sollte die wohl besser ein eigenes Layout bekommen.
Habe gerade mal iframe: true getestet. Sieht auch gut aus, dann hat man auch den IFRAME in der Box. Aber zusätzlich brauchte ich da noch die Angaben width und height.
Code:iframe: true, width: 800, height: 600
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Ja, insofern ist die Mediabox da einfacher im Handling. Der Colorbox muss man die custom option iframe im Template setzen, was erst einmal Zusatzaufwand bedeutet, wenn man die Colorbox sowohl mit als auch ohne iframe braucht.
Hier eine Lösung um mit der Colorbox Linkziele aus der Navigation in einem IFRAME zu öffnen. Gebt der Seite die Klasse lb-iframe.
PHP-Code:
$('a.lb-iframe').attr({
'data-lightbox': "",
'data-iframe': true
});
$('a[data-lightbox]').map(function() {
var iframe = $(this).attr('data-iframe');
$(this).colorbox({
// Put custom options here
loop: false,
rel: $(this).attr('data-lightbox'),
maxWidth: '95%',
maxHeight: '95%',
iframe: iframe ? true : false,
width: iframe ? 800 : false,
height: iframe ? 600 : false
});
});
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Danke Andreas, das funktioniert perfekt!!!!
Leider sind die Äbstände an den Seiten so schmal, kann ich die noch irgendwie vergrössern, so kann es passieren das man ganz unten was klicken will und dann is die lightbox weg.
Am besten wäre wenn die lightbox nur über das [X] geschlossen werden kann.
EDIT:
CSS hab ich hinbekommen, hab einfach unter /assets/jquery/colorbox/1.5.8/css/colorbox.min.css bearbeitet.
Und damit es nicht bei click auf das overlay geschlossen wir hab ich flgende zeile hinzugefügt:
Code:overlayClose: false
Somit ist der Fall erledigt, danke nochmal allen Beteiligten und besonders dir Andreas!!
Geändert von Schnubi (28.08.2016 um 13:02 Uhr)
Habe zwar nicht verstanden was du meinst, aber egal, weil es ja für dich erledigt ist.
Du solltest aber diese CSS-Datei in Ruhe lassen und die Regel einfach mit deiner eigenen CSS korrigieren, sonst ist das beim nächsten Update wieder weg. Kannst auch mal gerne das Ergebnis zeigen.
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Genau so eine Lösung habe ich gesucht! Allerdings für die Mediabox ... Kann mir jemand helfen, den Code von Andreas so umzuschreiben, dass er in der moo_mediabox verwendet werden kann?
Wichtig ist mir vor allem die prozentuale Größenangabe, für die ich bislang noch keine Lösung gefunden habe.Code:$('a.lb-iframe').attr({ 'data-lightbox': "", 'data-iframe': true }); $('a[data-lightbox]').map(function() { var iframe = $(this).attr('data-iframe'); $(this).colorbox({ // Put custom options here loop: false, rel: $(this).attr('data-lightbox'), maxWidth: '95%', maxHeight: '95%', iframe: iframe ? true : false, width: iframe ? 800 : false, height: iframe ? 600 : false }); });
Geändert von Lufine (14.03.2018 um 15:09 Uhr)
Versuch mal sowas hier (ungetestet)
PHP-Code:
...
window.addEvent('domready', function() {
// add data-lightbox attribute to a special link - here link with class lb-iframe
$$('a.lb-iframe').set('data-lightbox', ''); // second param can also be e.g. "foobar 80% 400"
$$('a[data-lightbox]').mediabox({
...
Geändert von Andreas (15.03.2018 um 11:57 Uhr)
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Super, das funktioniert einwandfrei! Danke!
Hallo Andreas,
Du hattest mit Deinem Code-Schnipsel eine super Lösung für mich:
Kann man das Skript so erweitern, dass auch Links in option-Tags auf diese Art und Weise geöffnet werden?<script>
(function($) {
window.addEvent('domready', function() {
// Put custom options here
// add data-lightbox attribute to a special link - here link with class lb-iframe
$$('a.lb-iframe').set('data-lightbox', "Immobilienangebote 85% 85%");
$$('a[data-lightbox]').mediabox({
}, function(el) {
return [el.href, el.title, el.getAttribute('data-lightbox')];
}, function(el) {
var data = this.getAttribute('data-lightbox').split(' ');
return (this == el) || (data[0] && el.getAttribute('data-lightbox').match(data[0]));
});
$('mbImage').addEvent('swipe', function(e) {
(e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
});
});
})(document.id);
</script>
HTML-Code:<select onChange="document.location.href=this.value"> <option selected="" value="">Bitte wählen Sie ...</option> <option class="link_lightbox lb-iframe" value="{{link_url::147}}">> Köln</option> [ ... ] </select>
Geändert von Lufine (23.05.2018 um 15:39 Uhr)
Ich hab viel zu kompliziert gedacht ...
Das ist jetzt mein HTML-Code:
Die Seiten werden leider nicht in der lightbox geöffnet. Ich vermute, es hängt mit 'document.location.href=this.value' zusammen. Hat jemand eine Idee, wie ich die Lightbox zum Laufen bringen kann?HTML-Code:<select class="select" style="width: 220px;" name="wohnimmobilien" onChange="document.location.href=this.value"> <option selected="" value="">Bitte wählen Sie ...</option> <option data-lightbox="Immobilienangebote 85% 85%" value="{{link_url::147}}">> Köln</option> [ ... ] </select>
Geändert von Lufine (23.05.2018 um 16:16 Uhr)
Das Beispiel war für die Mediabox. Ich vermute du benutzt die Colorbox. Da musst du sehen, wie man das machen kann. Hier http://www.jacklmoore.com/colorbox/ und respektive auf Github. Mit der Mediobox müsste man da auch erstmal nachsehen, wie dies ginge.
Korrigiere mal dein HTML, damit es so aussieht:
Dann packe dies hier in dein j_template. Evtl. irgendwo in dein j_colorbox Template. Colorbox muss auf jeden Fall vorher geladen sein. (ungetestet)HTML-Code:<select class="select open-lb" name="wohnimmobilien"> <option selected value="">Bitte wählen Sie ...</option> <option value="https://example.org">Köln</option> [ ... ] </select>
BTW: Mit der Colorbox kann man über den Wert des Attributes nicht out of the box die Höhe und Breite der Lightbox bestimmen so wie früher mit der Mediabox.PHP-Code:
$('.open-lb').on('change', function() {
$.colorbox({
href: $(this).val(),
width: '85%',
height: '85%',
iframe: true
});
})
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Ups, sorry, habe gerade erst gesehen, dass du ja tatsächlich die Mediabox am Start hast. Da müsste man dann nochmal nachsehen. Es geht darum, dass man die Lightbox direkt bei onchange startet und ihr das Ziel mit auf den Weg gibt. http://iaian7.com/webcode/mediaboxAdvanced ziemlich weit unten, da wo dies hier steht:
Mit nem großen Fragezeichen:PHP-Code:
Mediabox.open('url', 'title', 'width height');
PHP-Code:
$$('.open-lb').addEvent('change', function() {
Mediabox.open(this.get('value'), 'a fancy title', '85% 85%');
})
Geändert von Andreas (24.05.2018 um 04:08 Uhr)
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Wie super! Das funktioniert einwandfrei
Der HTML-Code sieht jetzt so aus:
Und in der moo_mediabox.html5 habe ich diesen Code-Schnipsel abgelegt:HTML-Code:<select class="open-lb" name="wohnimmobilien"> <option selected value="">Bitte wählen Sie ...</option> <option value="https://example.org">Köln</option> </select>
Tausend Dank!HTML-Code:$$('.open-lb').addEvent('change', function() { Mediabox.open(this.get('value'), 'a fancy title', '85% 85%'); })
Ja ist doch super
Bitte!
Vor Anfragen im Forum HTML validieren.
Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.
Vielen Dank an alle Wunschlistenerfüller
Andreas Burg, Web Solutions
Aktive Benutzer in diesem Thema: 2 (Registrierte Benutzer: 0, Gäste: 2)