Contao 3.5.0: Colorbox

[Lengen1971]

Hi, ich hätt eine Frage, ich möchte die Colorbox in einem Template benutzen. Anscheinden wird die aber nicht geladen,
im Layout hab ich j_colorbox angehäkelt, aber im Quellcode ist davon nichts zu finden.

folgendes hab ich:

<a href="<?php echo $this->link; ?>" class="button overlay">Weiterlesen ...</a>

<script language="JavaScript">
$(document).ready(function(){
$(".overlay").colorbox({iframe:true, width:"80%", height:"80%"});
});
</script>

Fehlermeldung ist:

TypeError: $ is not a function objekte.html:1:0

Danke für Tipps.

vG
Michael

[Spooky]

Deine Fehlermeldung deutet weiters darauf hin, dass nicht mal jQuery geladen wird. Hast du jQuery + das j_colorbox Template auch ganz sicher im richtigen Seitenlayout aktiviert?

[Lengen1971]

Hi, ja, dacht ich auch, aber ich finde diesen Code im Quelltext:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Das Layout hab ich auch mehrmals kontrolliert, dass es das richtige ist. Sicherheitshalber schon bei allen aktiviert.

Danke für weitere Tipps...

[Spooky]

Link zur Seite?

[Lengen1971]

PN

[Spooky]

Ok, im Source der Seite ist die Colorbox auf jeden Fall vorhanden. Dein JavaScript Code funktioniert nicht, weil du ihn definierst bevor jQuery eingebunden wird. Außerdem solltest du das nicht so machen. Stattdessen musst du den Weiterlesen Link folgendermaßen definieren:

<a href="…" data-lightox="iframe[80% 80%]" class="button ML_OVERLAY">Weiterlesen ...</a> 

Bei der Größenangabe bin ich mir nicht sicher ob das funktionieren wird, ich denke du brauchst da absolute Werte. Dein JavaScript solltest du entfernen.

[Lengen1971]

Hoi,
sry für die späte Antwort, versteh ich nicht ganz genau.

JQuery wird im Head eingebunden, mein JS ist in einem Modul, also im Body.. ist das nicht später im Code?

Aber mit deinem Code kommt zumindest das Popup, aber es wird die Seite nicht reingeladen. Es dreht
sich ewig das Rädchen.

Der Code von mir war so von der Colorbox-Dokumentation.

Noch Ideen?

Danke..

[Spooky]

JQuery wird im Head eingebunden, mein JS ist in einem Modul, also im Body.. ist das nicht später im Code?

Sorry, ja stimmt eigentlich. Warum dein code dann nicht funktioniert verstehe ich auch nicht, aber ist ohnehin irrelevant.

Aber mit deinem Code kommt zumindest das Popup, aber es wird die Seite nicht reingeladen. Es dreht
sich ewig das Rädchen.

Da bin ich momentan auch überfragt, sollte eigentlich funktionieren.

[Spooky]

Ah, ich hatte mich bzgl. der Funktionalität mit iframe und colorbox geirrt. Du musst das Colorbox Template anpassen. Gehe also im Backend zu Layout - Templates und erzeuge dort ein neues j_colorbox Template. In diesem Template machst du dann bspw. folgende Änderung:

<?php

// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/jquery/colorbox/'. $GLOBALS['TL_ASSETS']['COLORBOX'] .'/css/colorbox.min.css|static';

?>

<script src="<?= TL_ASSETS_URL ?>assets/jquery/colorbox/<?= $GLOBALS['TL_ASSETS']['COLORBOX'] ?>/js/colorbox.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $('a[data-lightbox]').map(function() {
        $(this).colorbox({
          // Put custom options here
          loop: false,
          rel: $(this).attr('data-lightbox'),
          maxWidth: '95%',
          maxHeight: '95%'
        });
      });
      $('a.ML_OVERLAY').map(function() {
        $(this).colorbox({
          // Put custom options here
          loop: false,
          maxWidth: '80%',
          maxHeight: '80%',
          iframe:true
        });
      });
    });
  })(jQuery);
</script>

Den data-lightbox Parameter musst du dann wieder entfernen.

[Lengen1971]

... ich hab die gute alte AdvMediaBox von Moo genommen. Die geht.

Keine Ahnung, woran das wieder liegt.

VG
Michel

@ Spooky: sry, grad erst gesehen, werde ich beherzigen.. Danke dafür.