MODUL: Thickbox animiert

[WayneTsun]

@noRiddle
Nochmals vielen Dank für das update und die guten Informationen!
@alle
Modul jetzt auch live in unserem Shop zu sehen. (häuschen). Anregungen/Empfehlungen gern gesehen, natürlich.

Beste Grüße,
Wayne

[noRiddle (revilonetz)]

Du hast einen Fehler im CSS.
Bei der Implementation die next/prev -Steuerung rechts und links in der Mitte des Containers darzustellen gibt es Probleme mit IE9 (wie könnte es anders sein ).
So wie du's gelöst hast
also mittels display:table;
fehlt bei #TB_next a, #TB_prev a ein display:table-cell; (nicht display:block;. wie du's hast).
Bei dir stellt der IE9 momentan den rechten Pfeil (next) weit rechts neben dem Container dar.
Desweiteren muß du auch ein vertical-align:middle; setzen und bei den span dann kein position:absolute;.
Bitte mal meinen Vorschlag versuchen (wie auch in Post 1 gepostet) und ich schau's mir im IE9 an, kann's gerade selbst nicht testen.
Außerdem solltest du auf das a ein cursor:pointer; setzen damit der Besucher weiß er kann da klicken und muß nicht genau den Pfeil anvisieren.

Ich habe es so gelöst (ohne display:table;):

Code: CSS  [Auswählen]

#TB_next {display:none;position:absolute;top:0%;right:0;width:40%;height:100%;}
#TB_prev {display:none;position:absolute;top:0%;left:0;width:40%;height:100%;}
#TB_next a, #TB_prev a{
text-decoration:none;
height:100%;
width:100%;
display:block;
}
#TB_next a span, #TB_prev a span { position:absolute;
top:50%;
display:block;
background:WHAT_EVER;
height:WHAT_EVER;
width:WHAT_EVER;
line-height:WHAT_EVER;
border-radius:50%;
color:#fff;
text-align:center;
border:WHAT_EVER;
box-shadow:WHAT_EVER;
}
#TB_next a span {right:10px;}
#TB_prev a span {left:10px;}

Dann wiederum kann man im IE9 seltsamerweise nicht auf den ganzen Bereich #TB_next/#TB_prev klicken sondern muß genau auf den Pfeil klicken
und das obwohl sich sowohl #TB-next als auch das #TB_next a über die volle Höhe und eben die 40% Breite erstreckt.
Hab's bislang noch nicht perfekt lösen können.

Sehe gerade, daß auch mit der display:table; und display:table-cell; -Variante IE9 nicht den ganzen bereich anklickbar macht.
Sehr dubios...

Sollte ich eine Lösung finden poste ich sie hier.

Gruß,
noRiddle

[noRiddle (revilonetz)]

Okay, hier die Lösung.
Der fu... IE braucht ein Hintergrundbild für #TB_next und #TB_prev, background:transparent; reicht leider nicht.
Hier also nochmals das gesamte CSS um die next/prev -Pfeile rechts und links in der vertikalen Mitte des Containers darzustellen, so, daß man den ganzen Bereich anklicken kann ohne genau den Pfeil anvisieren zu müssen.
Da per default ein transparentes *.gif im Template-Ordner /img liegt, benutzen wir das einfach .
Habe hier mal noch das Erscheinen der next/prev -Pfeile erst bei hover implementiert.

Code: CSS  [Auswählen]

#TB_next, #TB_prev {display:none;position:absolute;top:0%;width:40%;height:100%;background:transparent url(../img/pixel_trans.gif) repeat;} /* choose width as to your needs | background-image for IE */
#TB_next {right:0;}
#TB_prev {left:0;}
#TB_next a, #TB_prev a{text-decoration:none;height:100%;width:100%;display:block;cursor:pointer;}
#TB_next a span, #TB_prev a span {
position:absolute;
top:50%;
display:block; /* not absolutely necessary since position:absolute renders element as block already */
background:WHAT_EVER;
height:WHAT_EVER;
width:WHAT_EVER;
border-radius:WHAT_EVER;
line-height:WHAT_EVER;
color:WHAT_EVER;
text-align:center;
border:WHAT_EVER;
box-shadow:WHAT_EVER;
}
#TB_next a span {right:10px;} /* choose value as to your needs */
#TB_prev a span {left:10px;} /* choose value as to your needs */
#TB_ImageOff:hover ~ #TB_next, #TB_ImageOff:hover ~ #TB_prev, #TB_next:hover, #TB_prev:hover {display:block;}

Wer will kann noch das nervige "Close" welches im IE kaum zu unterdrücken ist rauswerfen indem er im Javascript-Plugin-Code folgendes sucht:

Code: Javascript  [Auswählen]

id='TB_ImageOff' title='Close'

und ersetzt mit

Code: Javascript  [Auswählen]

id='TB_ImageOff' title=''

also das Wort "Close" rauslöschen.

Evtl. werfe ich beim nächsten Update, falls es noch eines geben wird , den #TB_ImageOff -Container völlig hinaus.
Der ist ohnehin eigtl. unnötig da man ja die Thickbox per 'X' (oder was immer Ihr da stehen habt) und per Klick auf das Overlay schließen kann.

Na denne, stylt mal schön, damit es nicht bei jedem gleich aussieht.

Gruß,
noRiddle

*NACHTRAG*
Ach, und Verbesserungsvorschläge und Wünsche sind gerne gesehen...

[WayneTsun]

Das kommt davon, wenn man eben nur(!) FF,Iron,Chrome und Safari ausprobiert... Den IE hatte ich einfach nicht anmachen wollen... Windows virtuell auf einem Mac. Das tut dem doch auch weh. 

Also vielen Dank dafür! Funktioniert natürlich einwandfrei, Deine Lösung! 
Und danke auch für die Fehlerkorrektur. 

Beste Grüße,
Wayne

[thomas57]

Hallo noRiddle,
da ich gerade an einem originalen Template xtc5 spiele, habe ich mir die vor längerer Zeit heruntergeladene Thickbox gerade einmal installiert.
Sieht gut aus und kommt wesentlich besser herüber. Super Arbeit, weiter so. 
Werde diese dann in das Template einbauen.
Gruß aus dem Norden von
Thomas 

[noRiddle (revilonetz)]

Danke für das Feedback.
Mich würden allerdings die Style-Ideen verschiedener User interessieren, denn die völlige Style-barkeit der Thickbox ist ja gerade ein Haupt-Feature mithilfe dessen man das Erscheinungsbild an das Design des jeweiligen Shops anpassen kann,
will sagen Copy & Paste kann jeder und das ist langweilig und es sieht überall gleich aus.
Ein Link zu der Umsetzung wäre also von Interesse.

Gruß,
noRiddle

[noRiddle (revilonetz)]

!! Bitte beachten !!
Durch einen Hinweis von web28 (Danke) habe ich festgestellt, daß die Thickbox allgemein und ebenso mein hier vorgestelltes "thickbox-animated-plugin-1.X-ad" nur kompatibel ist mit jQuery-Version bis 1.8.3,
Version 1.9 und höher wirft einen Fehler aus.
Begründung:
Die Thickbox benutzt die Funktion jquery.browser() um IE < 7 zu unterstützen.
Diese Funktion gilt seit längerem als "deprecated" und wurde mit jQuery Version 1.9 entfernt.
Die Macher von jQuery empfehlen modernizr oder ähnliche Plugins anstelle dessen.
Ein Plugin nur für die genannte Funktion zu benutzen halte ich jedoch für "bloated".
Ich selbst unterstütze Browser-Müll wie IE6 oder gar IE5.5 ohnehin nicht mehr.
Wer dies dennoch benötigt, melde sich bitte bei mir.
Für alle anderen hier eine Version die IE < 7 nicht unterstützt. Damit kann dann auch jQuery Version 1.9 benutzt werden.

Es spricht allerdings allgemein nichts dagegen die jQuery Version 1.8.2 dauerhaft zu nutzen, man muß nicht jedes Update mitmachen,
warum auch, wenn alles gut ist und funktioniert.
Wer aufgrund annderer Features und/oder Plugins jedoch jQuery Version 1.9 oder gar 1.10 benötigt,
benutzt das Plugin "thickbox-animated-nonIE6-plugin" oder kann bei mir eine Version in Auftrag geben die die "Browser-Detection" auf andere Weise bewerkstelligt.

Außerdem gibt es noch im Anhang die Version  "thickbox-animated-plugin-1.3-ad".
In dieser Version wurde der Container TB_ImageOff entfernt.
Dieser Container bewirkte, daß man die Box auch mit Klick auf das Bild schließen konnte.
Der Container ist jedoch überflüssig, da das Schließen der Box sowohl durch Klick auf "Close" als auch auf das "Overlay" möglich ist.
So lassen sich die "next"/"previous" -Button besser innerhalb des Bildes positionieren, ohne daß der User ständig aufpassen muß wo genau sich seine Maus gerade befindet.

Im Anhang also:

• thickbox-animated-nonIE6-plugin-1.2-ad
  ohne Unterstützung für IE < 7 und kompatibel mit jQuery >= 1.9
• thickbox-animated-plugin-1.3-ad
  ohne Container "TB_ImageOff" für Schließen der Box durch Klick auf das Bild

Gruß,
noRiddle

[EDIT Tomcraft 31.05.2013: Module in Beitrag 1 ergänzt.]

[noRiddle (revilonetz)]

Danke dir Tomcraft.

Gruß,
noRiddle

[Sick]

Hallo noRiddle,

vielen Dank für deine schöne Erweiterung. Besonders die freie Gestaltung über CSS ist klasse.

 

[noRiddle (revilonetz)]

Hab' mal beim Essen ein wenig gespielt,
deshalb hier noch ein Demo-Screenshot im Glas-Design.
Wie immer alles nur CSS...

Gruß,
noRiddle

[web0null]

Ja sieht fein aus 

... bin leider noch nicht dazugekommen, wegen meiner Idee, die ich hatte(habe), wollte kleine Vorschaubildchen, unterhalb dazu machen, und oder kleine Points aus css, so wie beim Artikel-Slider.

Gruß web0null

[noRiddle (revilonetz)]

Ich habe schon länger vor
- du weißt ja, immer ist was anderes -
eine weitere Implementation in "Bild Optionen" einzubauen um Bilder durch den Imageprozessor in noch kleinerer Version als die Thumbnails zu generieren.
Damit könnte man sie (bei Verwendung des Tab-Templates in der Produkt-Info) aus dem Tab herausholen und in klein unter dem product_info-Bild darstellen (Thumbnails aus product_listing wären zu groß),
evtl. gar mit Slide-Funktion für die die viele Bilder haben.
Oder was meinst du genau ?
Ansonsten kann man ja ohnehin blättern wenn ein Bild offen ist.

Gruß,
noRiddle

[scooterama]

Juhuu, habe endlich alle fancybox 1.5 Anpassungen wieder auf Thickbox Version rückgängig gemacht und dabei auch gleich deine animierte Version gewählt. Läuft bis jetzt auch mit jquery_ui 1.8.9. welche ich zwecks autocmplete suche benötige.

Jetzt mal schauen ob ich das noch so mit Buttons hinbekomme wie in deinem Printscreen von dem Bikeshop.

Vielen Dank noRiddle

[scooterama]

Eine kleine Frage habe ich zu der Anzeige der Anzahl Bilder. Existiert nur 1 Bild dann steht auch 1 Bild von 1
sobald aber mehrere Bilder vorhanden sind, zeigt es immer 1 Bild zuviel an, resp. dann ist die Ausgabe Bild2 von 5, anstatt Bild 1 von 4

Es könnte sein dass Problematik damit zusammenhängt dass wir mit shopsync den kompletten Shop aus der ERP exportieren und so bereits das 1. Bild eine _1 bekommt.

Kann man die Textausgabe im jquery anpassen?

[noRiddle (revilonetz)]

Den Javascript-Code anzupassen wäre ein ziemliches Gefummel und ist auch der verkehrte Weg.
Das Zählen der vorhandenen Bilder in einer "image group" ist auch unabhängig von der Bezeichnung der Bilder, ob also das erste Bild X_0.jpg oder X_1.jpg heißt ist egal.
Es werden einfach die Bilder mit dem gleichen rel[]-Attribut gezählt und in ein Array gespeichert.
Der Fehler muß woanders liegen.
Link ?

Gruß,
noRiddle