Masonry Effekt sauber umsetzen

[jeanfredo]

Moin,

ich schraube da nun schon seit einer Weile daran rum, komme aber nicht weiter. Ich habe eine Seite mit einer Galerie, deren Thumbnails kompakt zusammenrutschen sollen (Masonry) und deren Inhalte (Bilder), sich in einer Lightbox öffnen sollen. Das Problem, dass immer nur die Lightbox oder der Masonry Effekt funktionieren, findet man zu hauf im Netz.

Als Masonry js habe ich mir folgendes ausgewählt http://masonry.desandro.com/

Nun kommt die große Frage: benutze ich jQuery oder Mootools als für die Lightbox? Hat das jemand schonmal sauber und updatesicher in Kombination umgesetzt?

Der Momentane Ansatz ist: jQuery Addon, jQuery Colorbox Addon, Masonry. Masonry funktioniert, die Lightbox nicht.

im "head"

<script src="plugins/jquery/js/jquery-1.9.1.min.js"></script>
<script src="plugins/colorbox/javascript/jquery.colorbox-min.js"></script>
<script src="files/template/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="system/modules/linklist/html/tag.js"></script>

<script type="text/javascript">
  $.noConflict();
</script>

Galerie in main

<div id="ce_gallery">
<div class="item grid3">
  <figure class="image_container">
    <a href="url_des_fotos/foto.jpg" class="gallery" data-lightbox="gal" rel="gal" title="title"><img src="url_des_fotos/foto.jpg" data-lightbox="group" alt="title"></a>
  </figure>
</div>

...

Ganz zum Schluss

<script type="text/javascript">
	$(document).ready(function(){
		$('a.gallery').colorbox({rel:'gal'});
	});
</script>

<script type="text/javascript">
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  singleMode: true,
  itemSelector: '.item'
});
</script>

Hat jemand eine Idee für mich oder sieht einen Denkfehler? Herzlichsten Dank schonmal!

[Dirch]

Benutze doch das Masonry auch mit jQuery. Evtl. liegt es daran.

Ich hab da ne Erweiterung in der mache, aber nur ab 3.x und da geht jQuery Colorbox zusammen mit Masonry problemlos...

Viele Grüße...
...Dirk

[wulf]

hab es auch mal getestet, masonry und colorbox funktionieren einwandfrei. allerdings hab ich zum testen einzelbilder genommen und diese in ein div gepackt.

<script src="assets/jquery/colorbox/1.4.11/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%'
        });
      });
    });
  })(jQuery);
</script>

<script src="assets/masonry.pkgd.min.js"></script>
<script>
(function($) {
$(document).ready(function(){
var $container = $('#contain');
// initialize
  $container.masonry({
  columnWidth: 200,
  itemSelector: '.item'
});
});
 })(jQuery);
</script>

[jeanfredo]

Benutze doch das Masonry auch mit jQuery. Evtl. liegt es daran.

Wie genau meinst du das?

[jeanfredo]

hab es auch mal getestet, masonry und colorbox funktionieren einwandfrei. allerdings hab ich zum testen einzelbilder genommen und diese in ein div gepackt.

Hast du das noch irgendwo online?

PS: sorry, quellcode würde nicht angezeigt, wenn "logged off"

[Dirch]

Wie genau meinst du das?

nun du benutzt zum Starten von Masonry (plain) JavaScript. Du kannst Masonry aber auch mit jQuery ansprechen so wie Wulf in seinem Beispiel zeigt. Vielleicht geht das dann...

[wulf]

du musst natürlich auch darauf achten, dass du den richtigen selektor für masonry wählst, also

var $container = $('#container');

wäre bei der gallery :

$container = $('#ce_gallery');

[andreasisaak]

Ich rate von Masonry ab und empfehle den offiziellen Nachfolger: Isotope

[Dirch]

Ich rate von Masonry ab und empfehle den offiziellen Nachfolger: Isotope

Das stimmt so nicht! Wenn man es genau nehmen will ist sogar Masonry aktueller als Isotope.

Masonry/Isotope sind vom gleichen Autor. Isotope ist umfangreicher von den Einstellungen her, weil es mehr verschiedene Platzierungs-Arten und Sortierungen, Ausblendungen unterstützt. Dafür kostet es entsprechend Lizenzgebühren, wenn man es professionell einsetzen möchte. Masonry ist wenn man so will eine Untermenge von Isotope, das parallel dazu existiert und (weiter)entwickelt wird.

[derRenner]

Ich rate von Masonry ab und empfehle den offiziellen Nachfolger: Isotope

Hallo,

ich bin gerade etwas verwirrt ... das kann aber auch daran liegen, dass ich mit keinem der beiden Thematiken (Masonry/Isotope) bis dato konfrontiert war. Bisher dachte ich, dass Isotope quasi ein Webshop-System ist und Masonry etwas visuelles, also mit einer Darstellungsform zu tun hat. Also für mich jetzt mal absolut kein Zusammenhang

Mmmh *grübel* ... ist mal jemand so nett und erklärt mir einigen Sätzen was das eine und das andere nun tatsächlich ist, und wo die Gemeinsamkeiten/Einsatzzwecke liegen? Mag ja sein, dass es anderen detto so geht

DANKE schon mal für die Mühe!

[wulf]

http://isotope.metafizzy.co/ ist gemeint, nicht die shop-software isotope

[derRenner]

OK DANKE - jetzt seh ich klarer

[css-umsetzung]

hier ist das in Verbindung mit mootools und jquery, meiner Meinung nach, sehr schön umgesetzt.
nicht wundern, wenn die lightbox aufgeht, sind darin nur die Bilder des zugehörigen Bereiches zum Weiterschalten markiert.

einfach mal ein wenig drin rumklicken auch in der unteren Navigation.

http://bit.ly/17rOJZO

[jeanfredo]

hab es auch mal getestet, masonry und colorbox funktionieren einwandfrei. allerdings hab ich zum testen einzelbilder genommen und diese in ein div gepackt.

<script src="assets/jquery/colorbox/1.4.11/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%'
        });
      });
    });
  })(jQuery);
</script>

<script src="assets/masonry.pkgd.min.js"></script>
<script>
(function($) {
$(document).ready(function(){
var $container = $('#contain');
// initialize
  $container.masonry({
  columnWidth: 200,
  itemSelector: '.item'
});
});
 })(jQuery);
</script>

Genau das wars! Jetzt funktioniert es. Vielen Dank für die schnelle und gute Hilfe!

[jeanfredo]

Ich bin nun auf eine weiteres Problem gestoßen:

Wenn das Laden der Bilder zu lange dauert, setzt der Masonry Effekt nicht ein Seite (evtl. Timeout o.ä.?). Ein Suche nach Möglichkeiten die Bilder erst zu laden (mit so einem Ladekringel zum Beispiel) und dann erst masonry.js abzurufen, führte zu einigem Stirnrunzeln. Gibt es da einen eleganten Ansatz, der dafür sorgt, dass die Bilder erst geladen und dann direkt im "Masonry"-Mode angezeigt werden?

Beste Grüße

[Dirch]

Du kannst das Zusammen mit dem imagesLoaded von ihm bewerkstelligen. Das funktioniert top. Habe das so in https://contao.org/de/extension-list...k_masonry.html umgesetzt. Die Erweiterung hilft dir vielleicht beim verstehen. Ist zwar für C3, aber dieser Part ist davon unabhängig. Und ich war faul und hab jQuery benutzt (weil ich das besser kann), aber technisch gesehen ähnlich.

http://desandro.github.io/imagesloaded/

[jeanfredo]

Du kannst das Zusammen mit dem imagesLoaded von ihm bewerkstelligen. Das funktioniert top. Habe das so in https://contao.org/de/extension-list...k_masonry.html umgesetzt. Die Erweiterung hilft dir vielleicht beim verstehen. Ist zwar für C3, aber dieser Part ist davon unabhängig. Und ich war faul und hab jQuery benutzt (weil ich das besser kann), aber technisch gesehen ähnlich.

http://desandro.github.io/imagesloaded/

Wow. Wenn man weiß wo man suchen muss! jQuery benutze ich auch, daher war es nicht wild es umzusetzen. Vielen Dank!

Für Nachmacher:

[...]

<link rel="stylesheet" href="plugins/colorbox/styles/colorbox.css" media="all">
<script src="plugins/jquery/js/jquery-1.9.1.min.js"></script>
<script src="plugins/colorbox/javascript/jquery.colorbox-min.js"></script>
<script src="files/template/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="files/template/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>

[...]

<script type="text/javascript">
  $.noConflict();
</script>

[...]

<div id="gallery" class="ce_gallery">

<div class="item grid3">
  <figure class="image_container">
    <a href="files/fotos/gallery/1.jpg" class="gallery" data-lightbox="gal" rel="gal" ><img src="files/fotos/gallery/1.jpg" ></a>
  </figure>
</div>


<div class="item grid3">
  <figure class="image_container">
    <a href="files/fotos/gallery/2.jpg" class="gallery" data-lightbox="gal" rel="gal" ><img src="files/fotos/gallery/2.jpg" ></a>
  </figure>
</div>


<div class="item grid3">
  <figure class="image_container">
    <a href="files/fotos/gallery/3.jpg" class="gallery" data-lightbox="gal" rel="gal" ><img src="files/fotos/gallery/3.jpg" ></a>
  </figure>
</div>

[...]

<script>
  (function($) {
    $(document).ready(function() {
      $('a[data-lightbox]').map(function() {
        $(this).colorbox({
          // Put custom options here
          loop: false,
          rel: $(this).attr('data-lightbox'),
          maxWidth: '75%',
          maxHeight: '75%'
        });
      });
    });
  })(jQuery);
</script>

<script>
(function($) {
    var $masonry = $('#gallery');
    $(document).ready(function() {
                
        $masonry.addClass("loading");
        $("#gallery .item").addClass("loading").find("img").css({ opacity: 0, visibility: "hidden" });
        initMasonry();
        $masonry.imagesLoaded()
                           .progress(function(instance, image) {
                            $(image.img).css({ visibility: "visible" }).animate({ opacity: 1 }, 400).closest('.loading').removeClass('loading');
                            $masonry.masonry();
                            })
            
            
                        .always(function() {
                            $masonry.removeClass("loading");
                        });
    });
    function initMasonry() {
        $masonry.masonry({
              singleMode: true,
               itemSelector: '.item'

                });
    };
})(jQuery);
</script>

[...]