MODUL: Thickbox animiert

[noRiddle (revilonetz)]

Thickbox animated advanced -Plugin
Features (bestimmbar im Aufruf $(document).ready();):

• es kann zwischen zwei Erscheinungseffekten gewählt werden
• es kann die Erscheinungsgeschwindigkeit eingestellt werden
• es kann zwischen drei Effekten für Bildwechsel gewählt werden
• es kann die Geschwindigkeit der Bildwechsel
  - unabhängig von der Erst-Erscheinungsgeschwindigkeit -
  eingestellt werden
• es kann der Text für Bild / Image sprachabhängig über Sprachkonstanten bestimmt werden
• es kann der Text für das 'von' bei 'Bild 1 von 3' sprachabhängig über Sprachkonstanten bestimmt werden
• es können die Symbole für 'next' und 'previous' bestimmt werden,
  entweder mit HTML-Entities (>, < oder →, ← oder », «)
  oder mit sprachabhängigem Text über Sprachkonstanten
• es kann das 'Close'-Symbol bestimmt werden,
  entweder hardcodiert ('X' oder 'x')
  oder mit sprachabhängigem Text über Sprachkonstanten
• es kann zwischen drei Effekten für das Verschwinden der Thickbox bei Klick auf 'Close' gewählt werden

Screenshots:

[ Für Gäste sind keine Dateianhänge sichtbar ]   [ Für Gäste sind keine Dateianhänge sichtbar ]   [ Für Gäste sind keine Dateianhänge sichtbar ]   [ Für Gäste sind keine Dateianhänge sichtbar ]

CSS styling Tipp:

Hier noch ein CSS-Tip für die die die (I love it, dreimal 'die' ) next und previous -Button in der Mitte des Bildes rechts und links dargestellt haben möchten und auch die Möglichkeit haben wollen nicht genau auf den Button klicken zu müssen für Bildwechsel sondern in die rechte oder linke Hälfte,
eben so wie es auch andere "Lightboxes" machen.

Beispiel-CSS

Code: CSS  [Auswählen]

#TB_prev {
display: table;
width: 30%; /*oder 40%, je nachdem wie breit der klickbare Bereich sein soll*/
height: 100%;
position: absolute;
top: 0;
left: 2%;
}
#TB_next {
display: table;
width: 30%;
height: 100%;
position: absolute;
top: 0;
right: 2%;
}
#TB_next a, #TB_prev a {
display: table-cell;
vertical-align: middle;
font: /*was Ihr wollt*/
height: 100%;
text-decoration: none;
}
 

Nachteil:
Alte IEs, wie könnte es anders sein, verstehen display:table-cell; nicht.
Soweit ich weiß hilft da aber ein conditional comment und die Implementation für lte IE7 mit folgendem CSS:

Code: CSS  [Auswählen]

#TB_next a, #TB_prev a {display:inline-block;}

Müßt Ihr mal selbst ausprobieren und/oder eruieren.

Das ganze kann man dann noch mit Erscheinen der Button erst bei hover auf #TB_window kombinieren.
[...]

Versionshinweise:

!! 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

[...]

Plugin HTML5-kompatibel:

[...]
Hintergrund:
In HTML5 sind für das rel-Attribut
- welches für die Gruppierung von Bildern benutzt wird -
nur bestimmte Values zugelassen.
rel="1", im Code: rel="{$PRODUCTS_ID}" ist nicht erlaubt.

Das rel-Attribut wurde deshalb durch ein data-Attribut ersetzt.

Dazu bitte Anleitung beachten.
Hier nur kurz:
------------------
Mit dem neuen Plugin in /templates/YOUR_TEMPLATE/module/product_info/product_info_*.html
im Bildlink anstatt

Code: PHP  [Auswählen]

class="thickbox" rel="{$PRODUCTS_ID}">

das benutzen:

Code: PHP  [Auswählen]

class="thickbox" data-igroup="{$PRODUCTS_ID}">

[...]

Viel Freude damit.

Gruß,
noRiddle

[EDIT Tomcraft 10.04.2013: Modul aktualisiert.]
[EDIT Tomcraft 05.05.2013: Screenshots angehängt.]
[EDIT Tomcraft 05.05.2013: Erweiterte Version angehängt.]
[EDIT Tomcraft 05.05.2013: CSS styling Tipp von noRiddle eingefügt.]
[EDIT Tomcraft 08.05.2013: Screenshots und neues Modul ergänzt.]
[EDIT h-h-h 13.05.2013: Modul aktualisiert]
[EDIT Tomcraft 15.05.2013: Modul aktualisiert]
[EDIT Tomcraft 15.05.2013: Modul aktualisiert]
[EDIT Tomcraft 18.05.2013: Modul aktualisiert]
[EDIT Tomcraft 31.05.2013: Modul aktualisiert]
[EDIT jannemann 11.07.2013: Modulversion 1.4 ergänzt.]
[EDIT Tomcraft 01.11.2014: Modulversion 1.4 aktualisiert (um englische Übersetzung ergänzt & neu gepackt).]

Linkback: https://www.modified-shop.org/forum/index.php?topic=25716.0

[PatKol]

Hi, habs gerade getestet. Passt und sieht gut aus. Über die Optimierung der Titel würd ich mich sehr freuen. Danke!

[JZ_Aqua]

Hallo
Sieht gut aus, vielen Dank dafür.

[noRiddle (revilonetz)]

Wer stellt den diesen Thread auf "gelöst" ?
Hier gibt's nichts zu "lösen",
ich habe der Community lediglich ein kleines Geschenk gemacht.

Habe das Thema mal wieder auf "ungelöst" gesetzt,
es soll ja Interesse wecken.
Hoffe das widerspricht nicht irgendwelchen Forenregeln.

Gruß,
noRiddle

[noRiddle (revilonetz)]

Hatte noch einen kleinen Fehler in der Datei, sorry.
Deshalb hier neu.

Gruß,
noRiddle

[EDIT Tomcraft 10.04.2013: Modul in Beitrag 1 aktualisiert.]

[getraenkehaus]

Kann man des irgendwo live sehen ?

gruß thorsten

[noRiddle (revilonetz)]

Momentan nur in meinem noch nicht freigeschalteten Demo-Shop, sorry.
(Per PM könnte ich dir zur Not die Zugangsdaten senden.)
Du brauchst aber nur deine /templates/YOUR_TEMPLATE/javascript/thickbox.js zu sichern und auszutauschen gegen meine gepostete Datei,
nachdem du sie in thickbox.js umbenannt hast.

Ist also kein großer Akt.
Gefällt dir der Effekt nicht, tauscht du sie wieder gegen die Original-Datei aus.

Gruß,
noRiddle

[piru]

Sieht toll aus, danke noRiddle 

Gruß piru

[noRiddle (revilonetz)]

@PatKol
Ich habe mir das mit dem Titel/der Caption mal angeschaut, ist ganz einfach, das ist eben der Vorteil der Thickbox.
Suche mal im Code das hier:

Code: Javascript  [Auswählen]

TB_HEIGHT = imageHeight + 80;

und mache aus der 80 eine 30.

Dann definierst du in der thickbox.css sowas in der Art:

Code: CSS  [Auswählen]

#TB_caption{height:30px; padding:0; position:absolute; bottom:105%; left:0; color:#fff;}

#TB_closeWindow und #TB_closeWindow a entsprechend nach Wunsch stylen.
Die #TB_secondLine kann man sich auch noch anpassen.

Möchte man die Caption unter dem Bild haben, entsprechend die Werte für die position mit top:105%; oder wie immer angeben.
Ist alles nur CSS (abgesehen von der kleinen Änderung im Javascript).
Das bekommst du doch hin.

Gruß,
noRiddle

[PatKol]

Ja cool, danke. Jetzt sehe ich auch die Möglichkeiten, die sich so ergeben. 

[noRiddle (revilonetz)]

Noch ein Tip:
Irgendwo in der thickbox.js gibt es einen Part wo keycodes festgelegt werden die Keyboard-Tasten bezeichnen mit denen man durch Bilder die zu einer Gruppe gehören blättern kann.
Diese keycodes sind unsinnigerweise auf 190 und 180 (= Punkt und Komma) gesetzt.
Ändert diese auf  39 und 37, man kann dann sinnigerweise mit den Pfeiltasten blättern.

Gruß,
noRiddle

[phpGuru]

@noRiddle

Danke für das anpassen.

2 Fragen habe ich:

Kannst du mir bitte sagen, wo man die Geschwindigkeit deiner Animation einstellen kann und
wo man den CSS close button gegen eine Grafik austauschen kann.

Ich habe hier von dir die min Version und da ist es sehr schwer was richtig auszulesen. Hast du vielleicht auch die nicht komprimierte Version zur Hand. Wenn man etwas ändern möchte geht das dort besser.

Danke
Gruß

P.S. 180 finde ich nicht sondern nur 188

[noRiddle (revilonetz)]

Habe da (noch) kein echtes Plugin draus gemacht sodaß man die Geschwindigkeit im document.ready bestimmen könnte.
Müsstest du im Code suchen

Code: Javascript  [Auswählen]

function tb_position(){$("#TB_window").css({marginLeft:0,width:0}).animate({marginLeft:'-'+parseInt((TB_WIDTH/2),10)+'px',width:TB_WIDTH+'px'},600);if(!(jQuery.browser.msie&&jQuery.browser.version<7)){$("#TB_window").css({marginTop:0,height:0}).animate({marginTop:'-'+parseInt((TB_HEIGHT/2),10)+'px',height:TB_HEIGHT+'px'},400)}}

Die 600 (horizontal) und die 400 (vertikal) auf gewünschte Werte ändern (sind Millisekunden).

Und ja, hatte mich verschrieben, die 188 muß ersetzt werden, nicht die 180, die gibt's da nicht .

Gruß,
noRiddle

[phpGuru]

Besten Dank

Hat dann noch folgendes geändert:

1. um den "/" weg zu bekommen und Bilder/Images:, "von" und "Bilder: "gefällt mir besser

Code: Javascript  [Auswählen]

TB_imageCount = "Bild/Image " + (TB_Counter + 1) +" / "+ (TB_TempArray.length);

in

Code: Javascript  [Auswählen]

TB_imageCount = 'Bilder: ' + (TB_Counter + 1) +' <font style="font-size:9px"><strong>von</strong></font> '+ (TB_TempArray.length);

den unteren Button gegen einen grafischen (find ich schöner)

Code: Javascript  [Auswählen]

$("#TB_window").append("<a href='' id='TB_ImageOff' title='schlie&szlig;en'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='schlie&szlig;en'><img src=\"images/thickbox_close_button.gif\"></a></div>");

und bei mehreren Bilder die Pfeile gegen "vorheriges" und "nächstes"

Code: Javascript  [Auswählen]

TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'><stong>n&auml;chstes</stong></a></span>";

Code: Javascript  [Auswählen]

TB_PrevHTML = "<span id='TB_prev'>&nbsp;&nbsp;<a href='#'><stong>vorheriges</strong></a></span>";

Jetzt finde ich nur nicht den zweiten "Close" Button. Davon gibt es nämlich 2 Stück. Dann wäre schon mal einiges getan.

Danke für die Werte der Animation. Habe diese jetzt mal auf 400 und 300 gesetzt. Geht dann etwas schneller. Vielleicht sollte man den Stretch Effekt nur 1  x beim eigentlichen "Öffnen" aufrufen. Wenn man mehrere Bilder hat, könnte das User eventuell etwas nerven?

Gruß

[noRiddle (revilonetz)]

Den Close-Button kann man perfekt mit CSS stylen, braucht keine Grafik zu sein.
Z.B. mit Hintergrundfarbe und border-radius:50% (bei gleicher height und width).
Das ist ja gerade der Vorteil der Thickbox, daß sie keine Grafiken zur Generierung benutzt und folglich über CSS voll stylebar ist.

Die beiden Close-Button unterscheiden sich in #TB_closeWindow und #TB_closeAjaxWindow, für iFrames und Bilder unterschiedlich.

Was die Animation beim Blättern betrifft:
Ich habe da inzwischen eine advanced Version erstellt die man in meinem Demo-Shop sehen kann.
Der ist allerdings noch mit htaccess geschützt da er noch nicht fertig ist.
Per PM (Häuschen klicken in meinem Profil links) kannst du die Zugangsdaten bekommen um es dir anzusehen.
Die Version wird es dann mit animiertem Blätter-Effekt geben mit entweder weichem Überblenden oder..., tja, oder was du da gerade sehen würdest .
Ich baue das noch als Plugin um damit man in einer document.ready Initialisierung noch Parameter wie Geschwindigkeit usw. bestimmen kann.
Das Ding gibt's aber dann nicht für lau, zu viel Arbeit...

Gruß,
noRiddle