Lightbox CSS

[Nine111]

Hallo zusammen,

ich will ein bisschen meine Lightbox individueller gestalten und will dazu die Bilder austauschen und muss dazu ja in der CSS rumschreiben. Mein Wissen was html angeht (Java usw.) ist jedoch soweit begrenzt, dass ich es gerade schaffe, Hovers zu basteln oder die Lightboxen einzubinden (ich weiß mager, aber es geht auch so )

Meine Bitt ist nun folgende:

Kann mir einer kurz erläutern, was die Container konkret machen? Dann weiß ich, was in jedem geändert werden kann, ohne dass ich mir die CSS zerschieße.

#lightbox
#lightbox img
#lightbox a img
#outerImageContainer
#imageContainer
#hoverNav
#imageContainer>#hoverNav
#hoverNav a
#prevLink, #nextLink
#prevLink:hover, #prevLink:visited:hover
#imageDataContainer
#imageData #imageDetails
#imageData #bottomNavClose
#overlay

Vielen Dank!

 

[MyBad]

AW: Lightbox CSS

Hallo!

Spiel doch einfach mal ein wenig in der CSS rum! Du kannst ja, solltest du etwas zerschossen haben, die Änderung wieder rückgängig machen.

Aber naja:
#lightbox
#lightbox img / Formatierungen der Bilder innerhalb der LB
#lightbox a img / Formatierungen verlinkter Bilder innerhalb der LB
#outerImageContainer / Der äußere Bereich
#imageContainer / Bereich direkt um das Bild
#hoverNav
#imageContainer>#hoverNav
#hoverNav a
#prevLink, #nextLink
#prevLink:hover, #prevLink:visited:hover
#imageDataContainer / Infotext, Titel
#imageData #imageDetails / Infotext
#imageData #bottomNavClose / "Schließen" Button
#overlay

Der Rest ist denke ich klar. Die Elemente sind alle schon sehr schön bezeichnet worden.

Gruß
Tim

 

[Dimitrj]

AW: Lightbox CSS

Ich mach es in solchen Fällen so, dass ich einfach mal die Seite im Browser öffne und dann mit dem Firebug (Firefox Extension zum untersuchen von Websites) darauf navigiere und schaue, welche divs wo sind und welche css Eigenschaften sie zugewiesen kriegen.
Geht so recht flott und übersichtlich.

Sonst: Bilder sind eigentlich am einfachsten zu ersetzen; wenn du im css was ändern musst suche einfach nach "background-image" und im HTML nach "<img ".

Sollte nicht so ne Sache sein...

Gruss,
Dimitrj

 

[dafoxx]

AW: Lightbox CSS

deine frage ist leider spezifisch, also kann hier jeder nur genauso raten wie du
hier n paar tipps wie dus rausfindest:
1.:
änder in den attributen einfach die hintergrundfarbe (background:#ff0000) auf irgend ne markante farbe wie rot oder so. dann siehst du was für was zuständig ist.
2.:
das sind alle id's (#). also sollten sie nur einmal vorkommen. das erleichtert das ganze um einiges.
3.: geh mit opera firefly (in opera: extras -> weiteres -> entwicklerwerkzeuge) auf die seite. dann clickst du dich durch die html tags, siehst gleichzeitig alle zugeordneten css-attribute und ausserdem wird der betreffende bereich mittels rahmen hervorgehoben. hat mir damals sehr geholfen.

ansonsten:
#id tag (zb: #lightbox img) -> attribute für <img> tags im lightbox-tag.
#id tag tag (zb: #lightbox a img) -> <a><img> tags im lightbox-tag.
#id, #id (zb: #prevLink, #nextLink) -> attribute für beide id's.

ansonsten erklären sich die meisten ids eh logisch:
nextlink: nächster link, also wahrscheinlich ein [next] button.
hovernav: hoverbare navigation.....
wie gsagt einfach rumprobieren, oder googeln, gibt bestimmt ne spezifische faq irgendwo dadraussen.

 

[leveler]

AW: Lightbox CSS

...dass ich einfach mal die Seite im Browser öffne und dann mit dem Firebug (Firefox Extension zum untersuchen von Websites) darauf navigiere und schaue, welche divs wo sind und welche css Eigenschaften sie zugewiesen kriegen...

ja, so mach ich das auch,wenn mich interessiert,wie was gemacht wurde.

 

[Niobe]

AW: Lightbox CSS

Hallo Nine111,
ich bastle auch seit einigen Tagen an einer LB und komme nicht so recht weiter. Mich würde interessieren wie das bei dir ausschaut - wo kann die LB bewundert werden?
Gruss

 

[cebito]

AW: Lightbox CSS

Hallo Nine111,
ich bastle auch seit einigen Tagen an einer LB und komme nicht so recht weiter. Mich würde interessieren wie das bei dir ausschaut - wo kann die LB bewundert werden?
Gruss

Wo hakts denn? Mit dem anschauen einer anderen Lightbox-Gallery wird dir sicher nicht geholfen sein.

 

[Desert_Eagle25]

AW: Lightbox CSS

was für dich das beste wäre, wenn du einfach überall in der CSS datei, wenn du eine Farbe findest, die veränderst, so kannste rumprobieren und weißt auch bald, was was ist.
für mehr sollteste CSS lernen.

LG

 

[Niobe]

AW: Lightbox CSS

Wo hakts denn? Mit dem anschauen einer anderen Lightbox-Gallery wird dir sicher nicht geholfen sein.

Danke für Deine Nachfrage! Aber ich muss erst in meinem Sumpf den ich hier z.Zt. habe suchen (steige um von MS auf iMac). Ich werde das Thema neu aufnehmen.
Gruss

 

[Dennis Kovarik]

AW: Lightbox CSS

Da eh das Meiste schon genannt wurde, möchte ich nur einen Tipp loswerden und nicht wiederholen, auch wenn er nicht zwingend was mit deinem Problem zu tun hat:

An deiner Stelle würde ich eher zu Slimbox, nicht Lightbox tendieren. Vom Prinzip sind beide gleich, aber mMn ist Slimbox besser (schneller, wie ich finde!).

Lightbox:
Slimbox:

Teste es mal selbst.

Grüße

 

[Niobe]

AW: Lightbox CSS

Da eh das Meiste schon genannt wurde...

An deiner Stelle würde ich eher zu Slimbox, nicht Lightbox tendieren. Vom Prinzip sind beide gleich, aber mMn ist Slimbox besser (schneller, wie ich finde!).

Lightbox:
Slimbox:

Grüße

Klasse, gefällt mir ausgezeichnet. Die Slimbox ist sehr viel schneller.
Da ich jedoch wenig Erfahrung in Richtung Coding habe, ist meine Frage bezügl. des Codes, was alles notwendig ist. Am meisten hilft mir eine Anleitung (so wie das bei der Lightbox beschrieben ist).
Gruss

 

[color-it]

AW: Lightbox CSS

Google mal nach jQuery slidebox u.ä. - das sind viel tollere Möglichkeiten gegeben als mit der doch mittlerweile in die Jahre gekommenen Lightbox.
Smashing Magazine hat da gute Ressourcen und Tutorials zu jQuery.

 

[Niobe]

AW: Lightbox CSS

Google mal nach jQuery slidebox u.ä. - das sind viel tollere Möglichkeiten gegeben als mit der doch mittlerweile in die Jahre gekommenen Lightbox.
Smashing Magazine hat da gute Ressourcen und Tutorials zu jQuery.

@color-it,
Danke! Klasse Tipp, bin total begeistert was alles machbar ist.
Gruss