jQuery Masonry für Newsmodul implementieren
Hallo zusammen,
ich wusste jetzt nicht genau in welchem Thema ich meine Frage hier im Forum platzieren kann.
Ich will das masonry script für eine zweispaltige Anzeige der News verwenden und das habe ich auch geschafft, allerdings dirket im news template und zwar wie folgt:
PHP-Code:
<!-- indexer::stop -->
<div id="container_2" class="js-masonry"
data-masonry-options='{ "columnWidth": 340, "gutter": 20, "itemSelector": ".layout_full" }'>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<?php foreach ($this->articles as $article) echo $article; ?>
<?php echo $this->pagination; ?>
</div>
<!-- indexer::continue -->
zusätzlich habe ich selbstverständlich
Code:
<script src="http://www.meineDomain.de/files/script/masonry.pkgd.min.js"></script>
im Seitenlayout eingebunden.
Im CSS ist auch alles ausgezeichnet.
Das Problem ist, dass es bei mir zu dem gängigen Problem kam, dass nämlich das masonry script schon ausgeführt wird bevor alle Bilder geladen wurden und es deshalb zu Überlappungen kam.
Aus diesem Grund würde ich gerne das masonry script innerhalb eines $(window).load(function() einbinden, damit das script erst ausgeführt wird wenn alle Bilder geladen wurden:
PHP-Code:
<script type="text/javascript">
$(window).load(function
{
$('.mod_newslist').masonry({
itemSelector : '.layout_full',
columnWidth : 340,
gutter: 20,
isAnimated: true,
animationOptions: {
duration: 700,
easing: 'linear',
queue: false
}
});
});
</script>
Lieder tut sich hier nichts.
Binde ich das script falsch ein? Ich binde es am Ende der Seite über eigenen Javascript Code ein…
Habe ewig probiert und gesucht, bekomme es jedoch einfach nicht zum luafen und wäre für jede Hilfe dankbar!
besten Dank
.christoph