JS Problem bei Galerie

[kubjo]

Hi Leute,
ich habe die Galerie aus :
https://community.contao.org/de/show...reite-anpassen
jetzt schon öfters verwendet und immer ist alles OK, doch hier:
http://www.contao4.hochzeit-jaichwil...rshooting.html
will es die Bilderreihen nicht bis nach hinten bündig machen. Die JS Konsole spuckt einen Fehler aus, mit dem ich nichts anfangen kann.

TypeError: $(...) is null

Weiß da jemand Bescheid?

Grüße aus Ludwigsburg
JK

[Andreas]

Das hier wird bei dir nicht erkannt, evtl. weil neben jQuery noch MooTools läuft. Benötigst du MooTools? Sonst schalte es aus und probiere nochmal.

<script src="files/JS/jquery.flex-images.js"></script>
<script> $('.fleximages_59').flexImages({rowHeight: 200}); </script>  

Wenn du MooTools benötigst, dann versuche die Einbindung nochmal so:

<script src="files/JS/jquery.flex-images.js"></script>
<script>
  (function($) {
    $('.fleximages_59').flexImages({rowHeight: 200});
  })(jQuery);
</script>

Dazu kommt noch, dass dein Server bei der Datei http://www.contao4.hochzeit-jaichwil...lex-images.css einen 404 meldet. Evtl. ist sie auch kaputt (BOM?) und wird von deinem Server deshalb nicht als CSS erkannt und wegen "X-Content-Type-Options: nosniff" nicht ausgeliefert.

[tblumrich]

Hallo!

Ich muss auch mal einhaken, da ich ein ähnliches Problem habe...

Auf einer Testseite funktionierts > Hier die erste Galerie
Und hier hab ich alles identisch eingestellt, nur greift das dort irgendwie nicht...

Kann eigentlich auch keine JS Fehler entdecken und Mootools ist auch nicht an.

Hat da jemand eine Idee?

Danke im voraus!

[Andreas]

Beim 4. Bild fehlt data-w und data-h.

[tblumrich]

Ahhhh, super, vielen Dank.
Da ist bei der Größe was schief gegangen. Das Original ist kleiner als die eingestellte Höhe in der Galerie.

Nun passt es. Fein!

[Andreas]

Das müsste doch egal sein. Du solltest die Bilder im BE in der Galerie einfach auswählen. Ok, wenn du ein Bild mit einer Höhe von 2000px auswählst und die Höhe der Reihen auf 150px stellst macht dies natürlich keinen Sinn.

Du brauchst dazu kein angepasstes Galerie-Template, nur ein js_-Template. Da das ja sowieso mit JS läuft, kannst du alle benötigten Attribute usw. direkt mit JS aufsetzen, bevor du flex-images instanziierst.

Beispiel von meiner Spielwiese:

<!-- js_fleximages.html5 -->
<?php

// Add the fleximages style sheet
$GLOBALS['TL_HEAD'][] = '<link rel="stylesheet" href="files/jQuery-flexImages-master/jquery.flex-images.css">';

// Add some user style sheet
$GLOBALS['TL_HEAD'][] = '<style>
  html {
    overflow-y: scroll;
  }
  .fleximages li {
    opacity: 0;
    transition: opacity .2s ease .2s;
  }

  /** reset for Contao demo */
  .ce_gallery > ul li.col_first {
      clear: none;
  }
  #container .fleximages .item img {
    padding: 0;
    border: 0 none;
    display: block;
  }
</style>';

?>

<script src="files/jQuery-flexImages-master/jquery.flex-images.js"></script>
<script>
  var
    galleryClass = 'fleximages', // the class for your gallery
    rowHeight    = 200,          // the max row height
    galleries    = $('.' + galleryClass + ' > ul')
  ;

  for(var i = 0, j = galleries.length; i < j; i++) {
    galleries.eq(i).addClass('flex-images');
    var galImages = galleries.eq(i).find('img');

    for(var m = 0, n = galImages.length; m < n; m++) {
      galImages.eq(m).closest('li').attr({
        'data-w': galImages.eq(m).attr('width'),
        'data-h': galImages.eq(m).attr('height')
      }).addClass('item');
    }
  }

  galleries.flexImages({
    container: 'li',
    rowHeight: rowHeight
  });

  // if you want to fade in after flex-images has finished
  galleries.find('li').css('opacity', 1); 
</script>

Keine Ahnung, wie du da so einen Fehler rein bekommen hast.

[tblumrich]

Ich kann nur vermuten... und das eine Bild war als einziges in einem viel kleineren Format (180x135), als der Rest.
Aber egal, jetzt gehts ja... übrigens auch mit deiner Variante..., was nochmal einiges flexibler ist. Dankeschön!

Gruß
Thomas