Thumbnailanzeige ständig problematisch

[css-umsetzung]

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

   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

$.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:



Richtige Darstellung nach einem Reload:

 

[Dustin]

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]

AW: Thumbnailanzeige ständig problematisch

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

#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]

AW: Thumbnailanzeige ständig problematisch

Hi,

das hilft bei mir leider nix.

div.thumbs-box

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.



Gruß Dustin

 

[css-umsetzung]

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]

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]

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]

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?

 

[css-umsetzung]

AW: Thumbnailanzeige ständig problematisch

Ich regel sowas über die firebug console, daher brauch ich das online

 

[Walther]

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;
}

 

[css-umsetzung]

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]

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

   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

$.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]

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]

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

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

ersetzen durch

                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
​