Habe es nun weiter versucht, jedoch ohne Erfolg. Ich habe folgendes Setting:
Im zugewiesenen Layout zusätzliche head-Tags:
Code:
<script src="http://www.domain.com/files/js/masonry.pkgd.min.js"></script>
<script src="http://www.domain.com/files/js/imagesloaded.pkgd.min.js"></script>
Eigener JS-Code im zugewiesenen Layout:
Code:
<script>
(function($) {
var $masonry = $('.masonry_news');
$(document).ready(function() {
$masonry.addClass("loading");
$(".masonry_news .layout_latest").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: '.layout_latest',
columnWidth : 340,
gutter: 20
});
};
})(jQuery);
</script>
Template mod_newslist.html5:
Code:
<!-- indexer::stop -->
<div class="masonry_news">
<?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 -->
Template news_latest.html5:
Code:
<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">
<?php if ($this->addImage): ?>
<figure class="image_container<?= $this->floatClass ?>"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->link; ?>" title="<?= $this->alt ?>">
<?php endif; ?>
<?php $this->insert('picture_default', $this->picture); ?>
<?php if ($this->href): ?>
</a>
<?php endif; ?>
</figure>
<?php endif; ?>
<h3><?= $this->linkHeadline ?></h3>
<div class="teaser">
<a href="<?php echo $this->link; ?>" alt="Zum Beitrag springen">
<?
$text= $this->text;
if (strlen($text) >= 150){
echo strip_tags(substr($text, 0, strpos($text," ",150))).". . .";
} else {
echo $text;
}
?>
</a>
</div>
</div>
Er lädt die Bilder nun gar nicht mehr, die Klasse ".loading" bleibt zugewiesen.
Zudem ist der nette masonry-Effekt vollständig ausgeblieben, d.h., er steckt die News-Beiträge einfach untereinander.
Könnte mir jemand hierbei einen Ratschlag geben?
Beste Grüße
Alexander
Lesezeichen