Thumbnailanzeige ständig problematisch

  • JTL-Connect 2024: Ihr habt noch kein Ticket? Jetzt Early Bird Ticket zum Vorzugspreis sichern! HIER geht es zum Ticketverkauf

  • Wartungsarbeiten - Kundencenter: Vom 23.07.24 ab 21 Uhr bis 24.07.24 vormittags. Das Kundencenter wird in dieser Zeit nicht erreichbar sein.

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.919
1.695
Berlin
Bin ich der einzige, bei dem die Thumbnailbox ständig nur 30px hoch ist wenn man die Seite ohne einen Browsercache oder erstmalig aufruft?

Das Problem ist, dass die Berechnung der Höhe der Listenelemente nicht wirklich zuverlässig ist, bei mir kommt da immer null raus, wenn die adjust funktion startet um das zu rendern.
Ich spreche von der Zeile 281 in jtl.gallery.js

PHP:
   var img_h_outer =  $(this.element).find('.image-thumbs li').outerHeight(true)-  $(this.element).find('.image-thumbs li').outerHeight(false);

wenn ich nach dem die Seite komplett geladen ist und ich dann ein
PHP:
$.evo.article().gallery.adjust();
ausführe, berechnet er die Thumbnail box richtig.

Man kann das ganz gut nachvollziehen, wenn man zum neu laden der Seite strg-F5 drückt.

Ich denke mal die Bilder sind nicht schnell genug verfügbar, denn wenn ich dem li Element über css ein min-height:52px gebe, funktioniert es, das ist aber statisch, was nicht schön ist.

hier mal ein Bild wie das dauernd aussieht:

thumbnails-fehler.jpg

Richtige Darstellung nach einem Reload:
thumbails-richtig.jpg
 

Anhänge

  • thumbnails-fehler.jpg
    thumbnails-fehler.jpg
    35,7 KB · Aufrufe: 90
  • thumbails-richtig.jpg
    thumbails-richtig.jpg
    30,4 KB · Aufrufe: 63

Dustin

Sehr aktives Mitglied
14. Mai 2008
2.963
46
Enger
AW: Thumbnailanzeige ständig problematisch

Ich habe ein ähnliches Problem seit dem Update auf die 4.03 Version nur mit dem Unterschied das meine Bilder unterhalb sind nicht daneben.

@css wie hast du es denn jetzt letztendlich gelöst?

Gruß Dustin
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.919
1.695
Berlin
AW: Thumbnailanzeige ständig problematisch

ich hab das so gelöst, um nicht gleich wieder die nächsten Probleme zu bekommen:

PHP:
#product-offer .product-gallery .thumbs li, 
#product-offer .product-gallery .image-thumbs li {
  min-height: 52px;
}

die erste Zeile davon wirst du wohl nicht brauchen, die kommt bei mir jetzt zustande weil ich das über less mache und noch weitere Sachen drin habe wodurch das so aufgelöst wurde, kannst das aber auch genau so übernehmen, ist nur halt doppelt gemoppelt.
 

Dustin

Sehr aktives Mitglied
14. Mai 2008
2.963
46
Enger
AW: Thumbnailanzeige ständig problematisch

Hi,

das hilft bei mir leider nix.


hat leider das Attribut Overflow = hidden das durch die .js gesetzt wird. Ich finde leider nicht die Stelle von ich das ändern kann.

Auf sind die Navi Pfeile (Buttons) darüber und darunter.

Bildschirmfoto 2016-05-31 um 22.41.36.jpg

Gruß Dustin
 

Anhänge

  • Bildschirmfoto 2016-05-31 um 22.41.36.jpg
    Bildschirmfoto 2016-05-31 um 22.41.36.jpg
    11,1 KB · Aufrufe: 44

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.919
1.695
Berlin
AW: Thumbnailanzeige ständig problematisch

Mit *!important*kannst du solche Werte überschreiben aber wegen der navipfeile wäre es besser die webseite mit den generierten styles zu sehen.
 

Dustin

Sehr aktives Mitglied
14. Mai 2008
2.963
46
Enger
AW: Thumbnailanzeige ständig problematisch

Weißt du denn wie ich das von vertical auf horizontal umschreiben kann?

In dem 4.02 Template habe ich alles fertig gehabt! aber es wurde einiges in der 4.03 geändert!
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.919
1.695
Berlin
AW: Thumbnailanzeige ständig problematisch

Bei mir ist es horizontal wenn der platz nicht ausreicht, also ab sm.
Ja ich kann sowas aber nicht durch die Glaskugel.
 

Dustin

Sehr aktives Mitglied
14. Mai 2008
2.963
46
Enger
AW: Thumbnailanzeige ständig problematisch

Shit im moment ist das Template noch nicht Online.

Heißt von außen kein Zugriff. Welchen Code Schnipsel brauchst du?
 

Walther

Aktives Mitglied
15. Juli 2015
94
3
AW: Thumbnailanzeige ständig problematisch

Hallo liebe JTLler,
auch ich stoße mal wieder über die lustigen Template-Änderungen.
Es werden von JTL immer wieder inline style-Eigenschaften via JS gesetzt, anstelle eine Klasse zu verwenden.

Vorteile der Verwendung einer CSS-Klasse sind, dass eine Überschreibung mit höherer Verschachtelung einfach möglich ist.
Somit braucht man keine Verwendung von "!important" (Wer !important braucht hat schlechten Code vor sich)

Auch Höhen von Bildern werden sehr oft mit JS errechnet und dann mit style-Eigenschaft "height:112px" gesetzt. Dies ist eigentlich kaum nötig, wenn man CSS beherrscht.
Somit werden u.a. beim betreten der Seiten die Bilder ohne Höhe geladen. Da das Bild nicht geladen ist, wird es nach dem Laden größer und die Seite verschiebt alles.
Hervoragendes Beispiel ist der Nivo-Slider. Dieser zeigt Höhe 0 beim betreten der Seite und erst wenn die Bilder geladen sind wird der Slider sichtbar und klappt sich nach unten auf. Somit liest der Benutzer die Content-Seite und auf einmal sieht er einen Slider (da nun die Bilder geladen sind).

Vielleicht wird ja in Zukunft das Style-setzten ein wenig vermieden.


Mögliche Lösung für die Problematik (horizontale Thumbs):
.product-gallery .thumbs-box {
overflow: visible !important;
height: auto !important;
width: 100% !important;
}

.product-gallery .thumbs-box .image-thumbs {
width:auto !important;
}
 

Anhänge

  • horizontale-thumbs.png
    horizontale-thumbs.png
    34,7 KB · Aufrufe: 35

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.919
1.695
Berlin
AW: Thumbnailanzeige ständig problematisch

Wenn man sich den slider anschaut, wird man sehen, dass er komplett durch javascript zusammengebaut wird.und das dann auch über js eingepasst wird.

Wenn ich mit jQuery eine show() slideXX() mache schreibt jQuery auch inline styles, dass ist nunmal so, finde ich jetzt nicht so schlimm, um das zu manipulieren hab ich ja die important Möglichkeit, in einem Framework muss man immer kompromisse eingehen.
 

rshost.eu

Offizieller Servicepartner
SPBanner
12. Januar 2015
27
16
AW: Thumbnailanzeige ständig problematisch

Bin ich der einzige, bei dem die Thumbnailbox ständig nur 30px hoch ist wenn man die Seite ohne einen Browsercache oder erstmalig aufruft?

Das Problem ist, dass die Berechnung der Höhe der Listenelemente nicht wirklich zuverlässig ist, bei mir kommt da immer null raus, wenn die adjust funktion startet um das zu rendern.
Ich spreche von der Zeile 281 in jtl.gallery.js

PHP:
   var img_h_outer =  $(this.element).find('.image-thumbs li').outerHeight(true)-  $(this.element).find('.image-thumbs li').outerHeight(false);

wenn ich nach dem die Seite komplett geladen ist und ich dann ein
PHP:
$.evo.article().gallery.adjust();
ausführe, berechnet er die Thumbnail box richtig.

Man kann das ganz gut nachvollziehen, wenn man zum neu laden der Seite strg-F5 drückt.

Ich denke mal die Bilder sind nicht schnell genug verfügbar, denn wenn ich dem li Element über css ein min-height:52px gebe, funktioniert es, das ist aber statisch, was nicht schön ist.

hier mal ein Bild wie das dauernd aussieht:

Den Anhang 19153 betrachten

Richtige Darstellung nach einem Reload:
Den Anhang 19154 betrachten


Das Ganze ist bei JTL bekannt und es handelt sich um einen Bug in der Version 4.03.1.

Uns wurde ein Fix übersandt, der das Ganze behebt.

Wir fragen mal eben nach, ob wir diesen an dieser Stelle veröffentlich dürfen und melden uns, sobald eine Antwort eingeht.
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.919
1.695
Berlin
AW: Thumbnailanzeige ständig problematisch

Das Problem gibt es seit mindestens 4.02 und weiter oben habe ich ja schon beschrieben wie es provisorisch lösbar ist, bis da was echtes kommt.
Aber in dem Script das ich angesprochen habe gibt es noch mehr was schlecht gelöst ist.

z.B.

  1. Wenn ich die Vergrößerte Ansicht schließe, wird der kompl. Inhalt über Ajax neu geladen, ich frage mich warum.
  2. Es gibt nur img Elemente obwohl das Third Party Modul selbst auch html container bedienen könnte.
  3. Es gibt keine callbacks, ich muss einen ziemlich umständlichen JS Weg gehen um in der Gallerie auch Videos einzubinden die sich klickbar in den thumbnails einfügen und dann im img container anstelle eines Bildes angezeigt werden.
  4. das Template Übergabe für das Third Party Modul ist in der jtl.gallerie.js verankert so das man sich da nichts update sicher ändern kann.
 

rshost.eu

Offizieller Servicepartner
SPBanner
12. Januar 2015
27
16
AW: Thumbnailanzeige ständig problematisch

Im folgenden die Antwort von JTL betreffend der fehlerhaften Höhengenerierung / Vorschaubildergenerierung innerhalb der Artikeldetails:


Den Fix können Sie wie folgt durchführen:

templates/Evo/js/jtl.gallery.js
Zeile: 119

Code:
thumb = $('<li />').addClass('item').append(
$('<img />').attr('src', item.xs.src).attr('alt', alt)
);

ersetzen durch

Code:
                thumb = $('<li />').addClass('item').append(
                    $('<img />')
                        .attr('src', item.xs.src)
                        .attr('alt', alt)
                        .attr('width', item.xs.size.width)
                        .attr('height', item.xs.size.height)
                );

Die aktuelle Datei haben wir ebenfalls angehängt. Wie immer gilt, vorher Sicherungen anlegen.

Den Anhang jtl.gallery.js.zip betrachten
 

Anhänge

  • jtl.gallery.js.zip
    3,4 KB · Aufrufe: 25
  • Gefällt mir
Reaktionen: nmueller und bzng