MODUL: Thickbox animiert

[WayneTsun]

War aus meiner Sicht überfällig für all das was Du hier so machst!

Beste Grüße,
Wayne

PS: Lass ihn Dir schmecken!   

[noRiddle (revilonetz)]

Haha, endlich passt das Icon mal 

Danke dir nochmals.

Gruß,
Oli (aka noRiddle)

[Tomcraft]

Ich habe Beitrag 1 soeben mal aktualisiert.

Danke für die tolle Erweiterung!

Grüße

Torsten

[Ceciro]

Hallo Oli (aka noRiddle),

auch von mir ein ganz GROSSES Dankeschön. 

Du bist mit deinem Expertenwissen eine "tragende Säule" und "Teil des Fundamentes" dieses Forums. Mir ist da spontan etwas eingefallen und das schicke ich morgen raus.

Gruß
Cicero

[noRiddle (revilonetz)]

Hey Cicero (was für ein bedeutender Name ), liebe Leute, jetzt übertreibt mal nicht
Weihnachten ist noch lange hin .
Hier sind einige die viel leisten, vor allem das Team (was das Coden anbelangt allen voran web28 aber auch h-h-h und andere).
Klar ist hier das Feedback vom Team nicht immer optimal aber was ist in dieser Welt schon optimal und wer bestimmt was optimal ist.

Danke an alle die Support und solche Arbeit wie hier zu schätzen wissen.
Und danke, Tomcraft, für das hervorragende Auffrischen des ersten Posts und das prompte Updaten des Downloads dort.

Gruß,
noRiddle

[noRiddle (revilonetz)]

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.

Gruß,
noRiddle

[web0null]

Hi noRiddle,

Auch von mir ein großes fettes dafür.
Muss es mir mal dekomprimieren und studieren, hab da so ne Idee.

Gruß web0null

[noRiddle (revilonetz)]

Das schicke ich dir mal...

Gruß,
noRiddle

[web0null]

Super Danke dir!

Gruß web0null

[Tomcraft]

[...]
Und danke, Tomcraft, für das hervorragende Auffrischen des ersten Posts und das prompte Updaten des Downloads dort.
[...]

Das ist doch das wenigste, nachdem du einer derjenigen bist, die den "Moderator informieren" Link auch sinnvoll einsetzen.

Grüße

Torsten

[noRiddle (revilonetz)]

Will euch nur mal zeigen was allein mit CSS möglich ist (habe ich mal gerade nur mithilfe von Firebug simuliert).
Design: Fancybox

Um flexibler im Stylen mit CSS zu sein, wurden die next/previous -Pfeile sowie die Bildnummerierung noch in span-tags gefasst, deshalb hier eine neue *.js.

Ich werde nach und nach noch diverse Animationsmöglichkeiten implementieren und die dann hier vorstellen.
Natürlich soll der mom. kompakte Code nicht aufgeblasen werden, sodaß ich das in Grenzen halten möchte.
Kommt aber noch was .

Gruß,
noRiddle

[EDIT Tomcraft 08.05.2013: Screenshot und Modul in Beitrag 1 eingefügt.]

[PatKol]

Das sieht ja heiß aus! Kannst du mir bitte die CSS dazu geben? Sind das die Standard-Icons?

[noRiddle (revilonetz)]

Na ein bisschen müßt Ihr aber auch tun .
Ich habe weiter oben (Tomcraft hat das in den ersten Post eingebaut) ein Besipiel gegeben für das Erscheinen der next/prev -Pfeile rechts und links mittig auf dem Bild.
Da diese Pfeile (oder was immer du für 'skim_next' und 'skim_prev' festlegst in den Optionen)
nun noch in span-tags eingefasst sind, kannst du den span-tags background-color, border, border-radius (50% wenn es rund sein soll) und box-shadow geben. Außerdem ein float:left; oder float:right; je nachdem ob linker oder rechter Pfeil.
Mit line-height und text-align:center; zentrierst du den Pfeil in dem span-Container.
Wenn du #TB_prev und #TB_next außerdem noch mit display:none; versiehst und bei hover auf #TB_window ein display:block;, erscheinen die next/prev -Pfeile eben nur wenn die Maus auf dem Bild-Container ist.

Ich sage es nocheinmal. Alles an Design ist bei meiner Thickbox möglich mit CSS und alle Elemente (caption, next, prev, second_line, close) sind mit position:absolute; und entsprechenden Werten für top, bottom, left, right beliebig positionierbar.

Firebug hilft sicherlich sehr das hinzubekommen.

Was display:table-cell; usw. betrifft, aber auch alles andere, unbedingt in anderen Browsern, insbesondere IE/, IE8, IE9 testen.
Man kann natürlich auf letztgenanntes verzichten und nur die Pfeile selbst anklickbar machen, ohne daß die ganze rechte oder linke Fläche anklickbar ist. Dann gibt es überhaupt keine Browser-Probleme.

Gruß,
noRiddle

[noRiddle (revilonetz)]

Hier noch 'ne Variante damit du siehst daß wirklich alles geht
Alles schnell mit Firebug gemacht...

Gruß,
noRiddle

[EDIT Tomcraft 08.05.2013: Screenshot in Beitrag 1 eingefügt.]

[Tomcraft]

Danke dir!

Die Module in Beitrag 1 werden aber langsam etwas unübersichtlich. Mir ist gar nicht klar wer was davon braucht?

Grüße

Torsten