Neu Imagebox JS-Berechnung - braucht man das?

[Groundhog]

Hallo zusammen,

Ich bin ja JS-technisch nicht so fit...leider...darum folgende Frage...vielleicht hilft mir jemand auf die Sprünge:

Was genau wird hier berechnet und wozu brauch ich das? Meine Produktbilder sind Rechteckig und in der Artikelübersicht immer gleich groß. Bei responsivem Verhalten soll das Produktbild über "img-responsive" gesteuert werden. Die Arikelboxen sind auch immer gleich groß, da alles was da reinkommt fixe Höhen hat.

Kann mir bitte jemand dazuschreiben was ich problemlos entfernen oder ändern kann um diese Berechnung abzustellen oder ist die irgendwie für andere Dinge wichtig?

imagebox: function(wrapper) {
            var $wrapper = (typeof wrapper === 'undefined' || wrapper.length === 0) ? $('#result-wrapper') : $(wrapper),
                square   = $('.image-box', $wrapper).first().height() + 'px',
                padding  = $(window).height() / 2;

            $('.image-box', $wrapper).each(function(i, item) {
                var box = $(this),
                    img = box.find('img'),
                    src = img.data('src');

                img.css('max-height', square);
                box.css('max-height', square)
                    .addClass('loading');

                if (src && src.length > 0) {
                    //if (src === 'gfx/keinBild.gif') {
                    //    box.removeClass('loading')
                    //        .addClass('none');
                    //    box.parent().find('.overlay-img').remove();
                    //} else {
                        $(img).lazy(padding, function() {
                            $(this).load(function() {
                                img.css('max-height', square);
                                box.css('none', square) // Änderung von line-height auf none
                                    .css('max-height', square)
                                    .removeClass('loading')
                                    .addClass('loaded');
                            }).error(function() {
                                box.removeClass('loading')
                                    .addClass('error');
                            });
                        });
                    //}
                }
            });

 

[ag-websolutions.de]

Warum willst du denn daran überhaupt was ändern?

 

[Groundhog]

Hello Hello, @ag-websolutions.de

Soweit ich das korrekt lese berechnet das Schnippsel die Bildhöhe in der Artikelliste. Dabei wird immer ein Quadrat berechnet und das produziert ein max-height und ein line-height vom gleichen wert. Dabei wird mein Artikelbild horizontal im image-wrapper zentriert, was dann oben und unten einen unschönen Rand ergibt, da meine Bilder rechteckig im Breitformat sind.

Ich kann das zwar über css beheben, aber das ist in der Anzeige nicht schon, da zuerst berechnet wird und erst dann die css Regel greift und dadurch die Bilder nach oben hüpfen was sehr unruhig aussieht.

Darum die Frage as das Schnippsel sonst noch so macht....

Ich habe auch in der product-list die row-eq-height entfernt denn auch das berechnet mir unschönen Weißraum. Da eben die Boxen immer gleich große sind weil alle Elemente darin fixe Höhen haben, dachte ich ich streiche unnötige Berechnungen...oder sehe ich das falsch?

 

[css-umsetzung]

Diese Berechnungen, auch die die du gekillt hast sind dafür da, das die boxen im Listing gleich hoch sind.

 

[Groundhog]

Diese Berechnungen, auch die die du gekillt hast sind dafür da, das die boxen im Listing gleich hoch sind.

Dankeschön!!

Kann ich die ganze Berechnung gefahrlos entfernen oder soll ich einfach die Werte auf 'none' ändern...bzw kommt die Entfernung der Ladezeit zu Gute`?

 

[ple]

Kurze Frage, weiß zufällig jemand, wo die Höhe im Nova berechnet wird? Ich finde die Artikelübersicht als Liste zu weit auseinandergezogen, Die Bilder könnten auch kleiner sein. Denke die Boxen der liste orientieren sich an die Bildgröße?
Wäre Dankbar für einen kleinen Tipp, wo ich suchen könnte.

Gruß und besten Dank.

 

[css-umsetzung]

Nein das ist ein ganz normales Bootstrap grid,
wenn du da etwas verändern möchtest musst du mit css an, bzw. die Anzahl der spalten je Zeile erhöhen.

 

[ple]

uhi, das ging ja schnell
Danke schon mal für die Info. Sowas hab ich mir schon gedacht in der Art.
Aber was machen die Spalten mit der Höhe der Zeile?
die class col product-wrapper col-sm- col-md-12 col-xl- col-12 wollte ich irgendwie dünner haben,, hatte die hoffnung, dass sich das Bild und die inneren Boxen ein wenig von unten nach oben aufschieben.

 

[css-umsetzung]

Die Abstände der einzelnen Zeilen ist extra so gemacht, wegen dem Hover, das würde sonst komisch aussehen.

Das wird ja hierüber geregelt

#product-list .product-wrapper:not(:last-child) {
  margin-bottom: 4rem;
}

 

[ple]

Ja die 4rem müssen bleiben wegen den Hovern,da hatte ich auch mal mit gespielt, sieht aber kacke aus, wenn die weniger sind.
Mich würde eher interessieren, dass ich das rot markierte wegbekomme und das bild ne tacken kleiner, ich bräuchte mehr Artikel auf dem Bildschirm.
Beim Bild könnte ich auch noch ein Col wegnehmen, dann wirds das bild zwar kleiner, aber die Höhe der Zeile bleibt immer noch so.
Aktuell kann ich immer nur 2 Stück sehen, wenn ich scrolle.
In der jtl.evo.js hatte ich noch das hier gefunden.

  imagebox: function(wrapper) {
            var $wrapper = (typeof wrapper === 'undefined' || wrapper.length === 0) ? $('#result-wrapper') : $(wrapper),
                square   = $('.image-box', $wrapper).first().height() + 'px',

bin mir aber nicht sicher, ob das die Höhe nachher bestimmt mit der image-box.



Vielen Lieben Dank für deine Hilfe hier im Forum.

Gruß

 

[css-umsetzung]

Ich hab mir das auf dieser Seite, mit dieser Münze mal angeschaut.

theoretisch kannst du ja die spalte für XL von 4 auf 2 verkleinern und dann der Box sagen, das die höhe sich automatisch berechnen soll.

#product-list .product-wrapper {
height: auto !important;
}

Ich hab die Box in meinem Beispiel mit einem Rahmen versehen, damit du den Unterschied der Höhe besser siehst:

 

[ple]

Haben die Cols denn was mit der Höhe zu tun? Dachte eigentlich mit meine gefährlichen Halbwissen, dass bei 4 halt 4 von 12 Spalten genommen werden, bei halt 2. aber die Höhe?

Ich komme erst Sonntag wieder am Rechner, ich muss damit mal rumspielen
Besten Dank schon mal!!!!

 

[ple]

Ah top, besten Dank. Lag echt nur an dem Col, was dem Bild zur Verfügung gestellt wurde. für xl ein wenig kleiner gemacht und schon passt es.
Vielen Lieben Dank dafür.

Gruß