[JQUERY] Bilder kleben zusammen

[78tzu]

Hallo Ihr Lieben,

auf meiner Website kleben die Bilder bei einem Grid zusammen.
Wenn ich allerdings im Browser auf 110% zoome und anschließend wieder zurück auf 100% taucht das Problem nicht auf.
Auch tritt das Problem nicht nach einem reload der Seite auf.

Ich vermute das es an einem JavaScript liegt.

Habt Ihr eine Idee wie ich das Problem beseitigen kann?


vielen Dank im Voraus.

 

[paul schmitz]

Kannst du beschreiben wo genau auf der Seite das Problem stattfindet (Bild) und welcher Browser dieses Problem hervorruft?

 

[kkapsner]

Ich habe den Verdacht (genau hab' ich mir den Code nicht angesehen), dass das Skript einfach zu früh ausgeführt wird. Wahrscheinlich wird mit document.ready() gearbeitet. Dabei sind die Bilder aber noch nicht geladen geladen. Deswegen muss auf window.onload gewartet werden.

Aber ich denke nicht, dass sich heir jemand deinen Code so im Detail ansieht, dass er/sie dir genau sagen kann, was du wo ändern musst.

 

[78tzu]

Hallo,

erst einmal vielen Dank für die schnelle Reaktion.

@paul schmitz:
das Problem tritt bei den bei den drei größten Browsern auf Firefox, Chrome, Internet Explorer (jeder Browser ist auf dem neusten Stand).
Auf der Website an sich gibt es auf der Startseite und auf der Unterseite "Work" Darstellungsprobleme, anbei ein Screenshot.


Nach Recherchen bin ich auf ein weit verbreitetes jQuery "Masonry" Problem gestoßen:
Get started with jQuery Masonry | CSS3 | Creative Bloq

Meine JS Kenntnisse reichen leider nicht so weit, um die formulierten Tipps umzusetzen:
-"Masonry" erst nach dem alle Bilder geladen starten
-imagesLoaded Plugin aktivieren

hier der Inhalt meiner masonry.js:

    (function ($) {
        var $container = $('.masonry_wrapper'),
            colWidth = function () {
                var w = $container.width(), 
                    columnNum = 1,
                    columnWidth = 0;
                if (w > 1200) {
                    columnNum  = 5;
                } else if (w > 900) {
                    columnNum  = 4;
                } else if (w > 600) {
                    columnNum  = 3;
                } else if (w > 300) {
                    columnNum  = 2;
                }
                columnWidth = Math.floor(w/columnNum);
                $container.find('.item').each(function() {
                    var $item = $(this),
                        multiplier_w = $item.attr('class').match(/item-w(\d)/),
                        multiplier_h = $item.attr('class').match(/item-h(\d)/),
                        width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
                        height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
                    $item.css({
                        width: width,
                        height: height
                    });
                });
                return columnWidth;
            }
                        
            function refreshWaypoints() {
                setTimeout(function() {
                }, 1000);   
            }
                        
            $('nav.portfolio-filter ul a').on('click', function() {
                var selector = $(this).attr('data-filter');
                $container.isotope({ filter: selector }, refreshWaypoints());
                $('nav.portfolio-filter ul a').removeClass('active');
                $(this).addClass('active');
                return false;
            });
                
            function setPortfolio() { 
                setColumns();
                $container.isotope('reLayout');
            }
    
            isotope = function () {
                $container.isotope({
                    resizable: true,
                    itemSelector: '.item',
                    masonry: {
                        columnWidth: colWidth(),
                        gutterWidth: 0
                    }
                });
            };
        isotope();
        $(window).smartresize(isotope);
		
    }(jQuery));

Was mich ferner irritiert, ist die Tatsache, dass Wordpress von Hause aus jQuery mit "jQuery.noConflict();" ausführt, das Problem also meines Erachtens gar nicht auftreten dürfte.
https://api.jquery.com/jquery.noconflict/

Vielen Dank im Voraus für Eure Hilfe.

 

[kkapsner]

Rufe mal isotope() nicht direkt auf, sondern pack es in ein window.onload:

$(window).load(isotope).smartresize(isotope);

 

[78tzu]

Die Änderungen haben leider nichts gebracht.
Das Problem tritt nach wie vor auf.

 

[kkapsner]

Füge mal folgenden Code hinzu:

jQuery(window).load(function(){
	jQuery(".wpb_image_grid_ul").isotope("layout");
});