• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bildergalerie mit CSS anstatt JS

I

iceman-pw

Neues Mitglied
Moin zusammen,

ich soll für einen Kunden eine Galerie ohne JS, wie z.B. in Lightbox verwendet, erstellen.

Zu den Eckdaten: Die Galerie hat insgesamt ca. 700 Fotos in 640 x 480 (Querformat) bzw. 322 x 480 (Hochformat), die in verschiedene Punkte gegliedert sind. Jeder Menüpunkt hat zwischen 60 und 300 Fotos.

Die Bildernavigation soll links als Thumbnail sein und das vergrößerte Bild daneben "als Content" auftauchen.

Habt ihr 'ne Idee, wie man das nur mit CSS realisieren kann?

Gruß iceman-pw
 
Im Prinzip ist Vergrößerte element, muss einfach das Kinder element sein, das normal mit display: none; ist, bei elternelement:visited kinderelement { muss dann display: block;}
ganz mit css wird schwer sein, da wenn man auf das nächste bild klickt, das vorherige element ja wieder verschwinden muss / in den hintergrund, aber mit ein wenig geschick und mit z-index ist es vielleicht möglich

genaueres kannst du hier lesen:Pseudo-Klassen: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

MfG
 
Hi,

d.h. wenn das ohne scripten laufen soll, brauchst du für jedes große Bild eine eigene HTML-Seite.

Das ist viel Arbeit, die dadurch abgemildert wird, das du im Prinzip immer nur die Bildadresse, bei Wechsel von Hoch,- zu Querformat die Bildmaße und falls das gerade aktive Thumb hervorgehoben werden soll, dort eine Klasse eingefügt werden muss.

Technisch ist das nur mit XHTML/CSS überhaupt kein Problem.
Eine Fleißarbeit zwar, aber eine relativ leichte. :wink:

Diese Lösung hat auch den Vorteil, das man beliebig zwischen den Thumbs hin,- und herspringen kann, bei Lightbox kann man immer nur blättern und muss es erst wieder zumachen, wenn man nicht das nächste oder vorherige Bild vergrößert betrachten will.

Z-index braucht man da sicher nicht.
Wozu man da display:none oder die Pseudoklasse :visited brauchen sollte erschließt sich mir da leider nicht.
 
Im Kleinformat, wobei man die Thumbs noch als bg-image den Bildnummern zuweisen müsste.
Für 700 Fotos jedoch eher eine Arbeit für einen Strafgefgangenen.
Möglicherweise lässt sich das auch noch per PHP vereinfachen, kenn ich mich aber nicht mit aus.
 
Hi,

prm schrieb:
Im Kleinformat, wobei man die Thumbs noch als bg-image den Bildnummern zuweisen müsste.
Für 700 Fotos jedoch eher eine Arbeit für einen Strafgefgangenen.
Möglicherweise lässt sich das auch noch per PHP vereinfachen, kenn ich mich aber nicht mit aus.
Zum Vergrößern anklicken....

wenn ich das richtig sehe gibts bei der Methode keine Thumbs, oder hab ich nicht richtig geguckt? :-)

Viele Nutzer schätzen es aber anhand der Thumbs das große Bild auszuwählen, welches sie sehen wollen. ;-)
 
koslowski schrieb:
Hi,



wenn ich das richtig sehe gibts bei der Methode keine Thumbs, oder hab ich nicht richtig geguckt? :-)

Viele Nutzer schätzen es aber anhand der Thumbs das große Bild auszuwählen, welches sie sehen wollen. ;-)
Zum Vergrößern anklicken....


wenn ich mir den Quelltext anschaue, kann ich erkennen das die Zahlen auch nur "hardgecodet" sind. Also könnte man rein theoretisch statt den Zahlen auch thumbs nutzen.

Man könnte sogar statt dem "titel"-bg nur eine Farbe nehmen oder so... ;)

Code: 
<ul class="gallery">
<li><a href="#">[B]01[/B]<img class="quer" src="http://www.html.de/img/0071/handball01.jpg" alt="handball01"></a></li>
<li><a href="#">[B]02[/B]<img class="quer" src="http://www.html.de/img/0071/handball02.jpg" alt="handball02"></a></li>
<li><a href="#">[B]03[/B]<img class="quer" src="http://www.html.de/img/0071/handball03.jpg" alt="handball03"></a></li>
<li><a href="#">[B]04[/B]<img class="quer" src="http://www.html.de/img/0071/handball04.jpg" alt="handball04"></a></li>
<li><a href="#">[B]05[/B]<img class="hoch" src="http://www.html.de/img/0071/handball05.jpg" alt="handball05"></a></li>
<li><a href="#">[B]06[/B]<img class="quer" src="http://www.html.de/img/0071/handball06.jpg" alt="handball06"></a></li>

<li><a href="#">[B]07[/B]<img class="hoch" src="http://www.html.de/img/0071/handball07.jpg" alt="handball07"></a></li>
<li><a href="#">[B]08[/B]<img class="quer" src="http://www.html.de/img/0071/handball08.jpg" alt="handball08"></a></li>
<li><a href="#">[B]09[/B]<img class="hoch" src="http://www.html.de/img/0071/handball09.jpg" alt="handball09"></a></li>
<li><a href="#">[B]10[/B]<img class="quer" src="http://www.html.de/img/0071/handball10.jpg" alt="handball10"></a></li>
</ul>


@prm
Klasse Galerie....werde mri die heute abend mal zu Gemüte tun... und ein bisschen umbauen...hehe... :-)
 
Ich sagte ja, dass man die thumbs den "Nummernlinks" noch als background-image zuweisen müsste.
Ich selbst würde mir jedoch diese Arbeit nicht machen.
Es soll nur verdeutlichen, dass es rein theoretisch ginge, vom immensen Aufwand mal eben abgesehen.
 
Naja mit den Hinweis, dass man sowas via php generieren könnte. Allerdings hätte man dann den nachteil, wenn man diese Art von Galerie bei einem shop oder ähnliches verwendet, dass man nach Anzahl der Artikel auch klassen für das eine Background-Image hätte. Da wäre es doch einfacher, mit keinem start-background zu arbeiten.

Ich setzte das morgen mal um...und gebe dazu noch feedback.
 
Vielen Dank erstmal, dass ihr euch so viele Gedanken dazu gemacht habt.

Ich habe die Bilder schonmal in Gruppen/verschiedene HTML-Seiten gegliedert, so dass es jetzt 7 Seiten mit je 60-300 Thumbs (40 x 40px) sind, die auf die großen Bilder referenzieren.

Ich dachte auch, als ich das hörte, dass das viel Aufwand wird, aber vielleicht hat ja von euch noch jemand eine andere Lösung außer CSS und JS.

Vielen Dank schonmal.

Gruß iceman-pw
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben