Vorab, das Plugin funktioniert soweit. Habe es auch erst mal komplett in den Header geschoben. Nur je nachdem welches javascript ich verwende ist die Darstellung meiner Posts (beim laden) unterschiedlich.
Ich füge zum Verständnis einmal den Quelltext und Bilder hinzu.
Version A
...
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/masonry/masonry-docs.min.js"></script>
[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#3366CC]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
jQuery[COLOR=#009900]([/COLOR]document[COLOR=#009900])[/COLOR].[COLOR=#660066]ready[/COLOR][COLOR=#009900]([/COLOR][COLOR=#000066][B]function[/B][/COLOR][COLOR=#009900]([/COLOR]$[COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR]
$[COLOR=#009900]([/COLOR][COLOR=#3366CC]'.content'[/COLOR][COLOR=#009900])[/COLOR].[COLOR=#660066]masonry[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900]{[/COLOR] singleMode[COLOR=#339933]:[/COLOR] [COLOR=#003366][B]true[/B][/COLOR] [COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]...Dieser Quelltext verursacht folgende Darstellung:
[Blockierte Grafik: http://www.cqrt.de/upload/img/html_02.jpg]
Sobald ich die Größe des Browserfensters veränder passt sich aber alles an:
[Blockierte Grafik: http://www.cqrt.de/upload/img/html_01.jpg]
Version B
...
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/masonry/masonry-docs.min.js"></script>
[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#3366CC]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
(function($){
$(window).load(function() {
// Masonry Trigger
var $container = $('.content');
$container.masonry({
// options
itemSelector: '.content_box'
});
});
})(jQuery);...Verursacht folgende Darstellung beim laden:
[Blockierte Grafik: http://www.cqrt.de/upload/img/html_03.jpg]
ändert sich aber innerhalb von 1-2 sek in die richtige:
[Blockierte Grafik: http://www.cqrt.de/upload/img/html_01.jpg]
Bei Version A konnte ich die fehlerhafte Positionierung der Boxen beheben, indem ich in meiner css Datei flogendes auskommentiere:
.content_box img[height],
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
height: auto;
}Doch dann werden die Grafiken verzerrt dargestellt, da sich die Höhe nicht mehr automatisch zur Breite proportional verändert.
[Blockierte Grafik: http://www.cqrt.de/upload/img/html_04.jpg]
Zusammengefasst:
Version A: Boxen sind sofort in einer Reihe, sind aber in der Höhe falsch positioniert. Sobald die Größe des Browserfensters verändert wird, passt sich alles an.
Version B: Boxen sind zunächst untereinander verschieben sich aber nach 1-2 Sek automatisch.
Version A mit auskommentierten CSS Teil: Boxen Sind in einer Reihe und an richtiger Stelle. Nur sind die Grafiken dann verzerrt.
Suche eine Lösung, wo die Boxen einfach sofort richtig angezeigt werden. Wie eigentlich bei Version B nur ohne Verzögerung. :/ Jemand eine Idee?