Navilink in Lightbox öffnen

[Schnubi]

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!

[Schnubi]

Hat jemand ne Idee wie ich das am einfachsten umsetze?

LG
Schnubi

[Andreas]

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

<a title="DSC_5276.jpg" data-lightbox="lb290" href="files/contaodemo/media/content-images/DSC_5276.jpg" ...

Sobald der DOM geladen ist scannt die Lightbox den Quellcode nach solchen Links.

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.

[Schnubi]

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!

[mlweb]

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

[Andreas]

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:

...
$(document).ready(function() {

  // next line is new
  $('a.lightbox').attr('data-lightbox', "");

  $('a[data-lightbox]').map(function() {
... 

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.

[mlweb]

Die Lösung finde ich gut. Man merkt, dass ich bei js noch sehr in den Kinderschuhen stecke. Da muss ich noch viel lernen.

[Andreas]

Das kommt mit der Zeit. Aber du hattest letztens hier mal was vorgestellt, das fand ich schon ziemlich gut.

[mlweb]

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.

[Andreas]

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.

[Schnubi]

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:

<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>

Das ist der Link der funktioniert:

<a class="cboxElement" rel="lightbox" href="http://www.domain.tdl/7blablabla" data-lightbox="980 680">Zeig mir die Seite</a>

Kann ich das JS so anpassen dass das rel="lightbox" mit in den Link kommt?

Danke

[Schnubi]

Ok ich hab das rel="lightbox" selbst reingebracht, aber leider funktioniert das noch immer nicht.

Mein j_colorbox schaut so aus:

...
<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.

[Andreas]

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

$('a.lightbox').attr('rel', "lightbox"); 

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.

[tab]

Muss man da im j_colorbox.html5 nicht noch als Custom-Option

iframe: true

einsetzen?

[Andreas]

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.

iframe: true,
width: 800,
height: 600

[Andreas]

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.

Wie man sieht machen die Lightboxen das unterschiedlich, die Mediabox entscheidet anhand des Links, der Colorbox muss man es explizit mitteilen.

[tab]

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.

[Andreas]

Hier eine Lösung um mit der Colorbox Linkziele aus der Navigation in einem IFRAME zu öffnen. Gebt der Seite die Klasse lb-iframe.

$('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
  });
}); 

[Schnubi]

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:

overlayClose: false

Somit ist der Fall erledigt, danke nochmal allen Beteiligten und besonders dir Andreas!!

[Andreas]

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.

[Lufine]

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?

$('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
  });
});

Wichtig ist mir vor allem die prozentuale Größenangabe, für die ich bislang noch keine Lösung gefunden habe.

[Andreas]

Versuch mal sowas hier (ungetestet)

...
    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({
... 

[Lufine]

Super, das funktioniert einwandfrei! Danke!

[Lufine]

Hallo Andreas,

Du hattest mit Deinem Code-Schnipsel eine super Lösung für mich:

<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>

Kann man das Skript so erweitern, dass auch Links in option-Tags auf diese Art und Weise geöffnet werden?

<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>

[Lufine]

Ich hab viel zu kompliziert gedacht ...

Das ist jetzt mein 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>

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?

[Andreas]

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:

<select class="select open-lb" name="wohnimmobilien"> 
  <option selected value="">Bitte wählen Sie ...</option>
  <option value="https://example.org">Köln</option>
  [ ... ]
</select>

Dann packe dies hier in dein j_template. Evtl. irgendwo in dein j_colorbox Template. Colorbox muss auf jeden Fall vorher geladen sein. (ungetestet)

$('.open-lb').on('change', function() {
  $.colorbox({
    href:   $(this).val(),
    width:  '85%',
    height: '85%',
    iframe: true
  });
}) 

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.

[Andreas]

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:

Mediabox.open('url', 'title', 'width height'); 

Mit nem großen Fragezeichen:

$$('.open-lb').addEvent('change', function() {
  Mediabox.open(this.get('value'), 'a fancy title', '85% 85%');
}) 

[Lufine]

Wie super! Das funktioniert einwandfrei

Der HTML-Code sieht jetzt so aus:

<select class="open-lb" name="wohnimmobilien"> 
  <option selected value="">Bitte wählen Sie ...</option>
  <option value="https://example.org">Köln</option>
</select>

Und in der moo_mediabox.html5 habe ich diesen Code-Schnipsel abgelegt:

$$('.open-lb').addEvent('change', function() {
  Mediabox.open(this.get('value'), 'a fancy title', '85% 85%');
})

Tausend Dank!

[Andreas]

Ja ist doch super