Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Vor einigen Tagen brauchte ich eine simple Bildergalerie in der man mit der Maus über Miniaturansichten fährt und das entsprechende Bild in groß angezeigt bekommt. Auf der Suche nach einer entsprechenden Lösung fand ich jedoch leider nichts was mir wirklich zusagte. Zum einen wollte ich komplett auf JavaScript verzichten, zum anderen das Markup möglichst übersichtlich halten.
Im folgenden erläutere ich Euch die nun entwickelte Lösung.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Demo anschauen

Zum Hintergrund

Die Lösung ist außerordentlich simpel. Innerhalb eines < a >-Tags positionieren wir die Grafik des Thumbnails sowie ein leeres < span >-Element. Das < span > ist ausgeblendet und enthält über CSS die Großansicht als Hintergrundbild sowie feste Dimensionen. Beim Überfahren der Kleinansicht wird das < span >-Element mittels display:block eingeblendet.
Im HTML-Code tauchen nur die Miniaturen auf, da die Großansichten ja als Hintergrund via CSS definiert wurden.

XHTML


<div class="image-container">
 <div id="first-image">&nbsp;</div>
  <a id="image1" href="#"><img src="css-gallery-01_thumb.jpg" alt=" "/><span>&nbsp;</span></a>
  <a id="image2" href="#"><img src="css-gallery-02_thumb.jpg" alt=" "/><span>&nbsp;</span></a>
  <a id="image3" href="#"><img src="css-gallery-03_thumb.jpg" alt=" "/><span>&nbsp;</span></a>
  <a id="image4" href="#"><img src="css-gallery-04_thumb.jpg" alt=""/><span>&nbsp;</span></a>
  <a id="image5" href="#"><img src="css-gallery-05_thumb.jpg" alt=" " class="last"/><span>&nbsp;</span></a>
</div>

Der div-Container „first-image“ enthält über CSS das Bild, welches immer angezeigt werden soll. In diesem Fall das erste.

CSS

Der CSS-Code sollte selbsterklärend sein.


.image-container { /* main container. incl all elements */
 padding:0;
 width:600px;
 float:left;
 margin:0 0 10px 0;
 position:relative;
 border:1px solid #191b1f;
 background:#101114;
 padding:10px;
}

#first-image { /* first image - always in bg */
 position:absolute;
 top:10px;
 left:10px;
 height:580px;
 width:600px;
 background:url(css-gallery-01_large.jpg) 0 0 no-repeat;
}

.image-container a img { /* thumbs 1-4 */
 width:112px;
 height:108px;
 padding:0 10px 0 0;
 margin:590px 0 0 0;
 border:0;
 float:left;
}

.image-container a img.last { /* thumb 5. I don't use last-child to support ie-users. */
 width:112px;
 height:108px;
 padding:0; /* no right padding for the last thumb */
 margin:590px 0 0 0;
 float:left;
}

.image-container a span { /* hide spans */
 display: none;
}

.image-container a:hover span { /* display span if hovered */
 display: block;
 position: absolute;
 width: 600px;
 height:580px;
 padding:0;
 margin:0;
 top:10px;
 left:10px;
}

/* large images */
a#image1:hover span {background:url(css-gallery-01_large.jpg);}
a#image2:hover span {background:url(css-gallery-02_large.jpg);}
a#image3:hover span {background:url(css-gallery-03_large.jpg);}
a#image4:hover span {background:url(css-gallery-04_large.jpg);}
a#image5:hover span {background:url(css-gallery-05_large.jpg);}

Feedback und Bugfixing

Ich habe diese Galerie unter Firefox 2, Firefox 3, Safari 3.1 und Internet Explorer 7 getestet. Im IE 6 läuft ohne JS bisher noch nichts. Vllt. hat ja jemand eine Lösung. Sollten Euch Fehler auffallen so bitte ich dies hier zu diskutieren.

Update

Vera hat mir den gesuchten Code zur optimalen Darstellung im IE6 noch einmal per E-Mail geschickt, da es Darstellungsfehler in den Kommentaren gab. Getestet habe ich davon allerdings noch nichts. Also bitte wie gehabt: Feedback!
Nochmals vielen herzlichen Dank Vera!


<div id="bigpic"><img src="gfx/gallery/1_1_gr.jpg" /></div>
 <div id="thumbs">
  <ul id="gallery">
   <li id="bild-1-1"><a href="#"><span><img src="gfx/gallery/1_1_gr.jpg" /></span></a></li>
   <li id="bild-1-2"><a href="#"><span><img src="gfx/gallery/1_2_gr.jpg" /></span></a></li>
   <li id="bild-1-3"><a href="#"><span><img src="gfx/gallery/1_3_gr.jpg" /></span></a></li>
   <li id="bild-1-4"><a href="#"><span><img src="gfx/gallery/1_4_gr.jpg" /></span></a></li>
   <li id="bild-1-5"><a href="#"><span><img src="gfx/gallery/1_5_gr.jpg" /></span></a></li>
   <li id="bild-1-6"><a href="#"><span><img src="gfx/gallery/1_6_gr.jpg" /></span></a></li>
  </ul>
 </div>

<pre lang="css" line="1">
focus {
 outline:none;
}

#bigpic {
 height:300px;
 width:300px;
 margin:0;
 padding:0;
}

#thumbs {
 height:49px;
 width:300px;
 margin:0;
 padding:0;
}

ul#gallery {
 height:49px;
 list-style:none;
 margin:0;
 padding:0;
 position:relative;
 width:300px;
}

#gallery li span {
 display:none;
}

#gallery li {
 float:left;
 margin:0;
 width:50px;
}

#gallery li a {
 display:block;
 height:50px;
 border-right:#fff 1px solid;
 border-top:#fff 1px solid;
}

li#bild-1-1 a {background:url(../gfx/gallery/1_1_kl.jpg);}
li#bild-1-2 a {background:url(../gfx/gallery/1_2_kl.jpg);}
li#bild-1-3 a {background:url(../gfx/gallery/1_3_kl.jpg);}
li#bild-1-4 a {background:url(../gfx/gallery/1_4_kl.jpg);}
li#bild-1-5 a {background:url(../gfx/gallery/1_5_kl.jpg);}
li#bild-1-6 a {background:url(../gfx/gallery/1_6_kl.jpg);}

#gallery li a:focus span, #gallery li a:hover span {
 display:block;
 height:51px;
 position:absolute;
 right:0;
 top:-300px;
 width:300px;
}

#gallery a img {
 border:0;
}

#gallery li a span {visibility:hidden}
#gallery li a.current span,
#gallery li a:hover span {visibility:visible}
#gallery li a:hover{visibility:visible;}

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 34 Kommentare

  1. Doro
    schrieb am 27.07.2013 um 10:06 Uhr:

    super, besten Dank, auch 2013 immer noch nützich

    Antworten
  2. Pawel
    schrieb am 29.05.2012 um 15:29 Uhr:

    Hallo Jonas, großes Respekt für diese Seite.
    Aaaaber. Diese Lösungsmöglichkeit ist mir schon länger bekannt und ich finde sie nicht so schön, da man für eine einfache Galerie einen verhältnismäßig großen Aufwand betreiben muss.

    Ich bin gerade dabei eine einfachere und sauberere Lösung ohne span-tag zu erarbeiten. Sollte mir das gelingen melde ich mich hier wieder.

    Viele Grüße und weiter so!

    Antworten
  3. Vera
    schrieb am 31.12.2008 um 13:18 Uhr:

    @Jan: jepp, für jedes Bild muß ein entsprechend kleines Thumbnail zuvor erstellt werden.

    Antworten
  4. Jan
    schrieb am 31.12.2008 um 01:36 Uhr:

    achso, die thumbnails werden bei mir jetzt nur als ausschnitt in der entsprechenden größe angezeigt, d.h. das bild wird nicht auf zB 50x50px verkleinert, sondern es wird ein 50x50px ausschnitt aus der oberen linken ecke gezeigt…kann man wohl auch nich ändern, da man einem hintergrundbild ja keine größe zuordnen kann. also muss man für die thumbnails passende bilder erstellen, richtig?

    Antworten
  5. Jan
    schrieb am 31.12.2008 um 01:01 Uhr:

    wow, danke an alle fürs netzwerken und wissen-teilen :) klappt jetzt auch im IE!

    Antworten
  6. Jonas
    schrieb am 30.12.2008 um 14:17 Uhr:

    @ all: Ich hab den Code von Vera als Update unter meinen Artikel gepostet. Danke Vera!

    Antworten
  7. Vera
    schrieb am 30.12.2008 um 13:19 Uhr:

    Huhu nochmal,

    EDIT: Ich habe den gesamten HTML & CSS Teil ans Ende meines Beitrags verschoben. Gruß Jonas

    „bicpic“ ist das groß angezeigte Bild
    „thumbs“ sind die Miniaturbilder
    „gallery“ ist die Auflistung der Miniaturbilder

    Hoffe, es hilft Euch.
    Grüße aus Erftstadt bei Köln

    Vera

    Antworten
  8. Jonas
    schrieb am 29.12.2008 um 19:25 Uhr:

    @ Jan: Hab ich gemacht. Daumen drücken ;)

    Antworten
  9. Jan
    schrieb am 29.12.2008 um 18:23 Uhr:

    vielleicht könntest du ihr kurz ne mail schicken dass hier leute ihren rat brauchen? :)

    Antworten
  10. Jonas
    schrieb am 21.12.2008 um 23:55 Uhr:

    @ CT: Ich hab den Tipp von Vera ehrlich gesagt noch nicht ausprobiert. Leider fehlt mir im Moment dazu auch die Zeit. Sorry.

    Antworten
  11. CT
    schrieb am 21.12.2008 um 23:33 Uhr:

    Das Skript ist super, allerdings bekomme ich den Tipp von Vera
    Zitat:
    #gallery li a span {visibility:hidden}
    #gallery li a.current span,
    #gallery li a:hover span {visibility:visible}
    #gallery li a:hover{visibility:visible;}

    auch nicht gebacken. Wäre nett, wenn jemand mal so lieb wäre, und das genauer erklären würde, da in den Original-Skript gar keine „#gallery li“s vorkommen ???

    Vielen Dank im Voraus

    Antworten
  12. Jan
    schrieb am 17.12.2008 um 00:59 Uhr:

    Hm, krieg das mit dem IE6 nicht hin, auch der Code von Vera hilft da nich, oder wo genau kommt der hin? Kann leider nicht auf IE6 verzichten :/

    Antworten
  13. Bettina Henkel
    schrieb am 09.12.2008 um 08:38 Uhr:

    Ich sitze hier gerade in meiner Weiterbildung in Webdesign und bin von deiner genialen Seite einfach nur begeistert. Wollte ich nur mal gesagt haben. So als Anfängerin.

    Antworten
  14. Jonas
    schrieb am 25.11.2008 um 16:49 Uhr:

    @ Vera: Super sache! Dankeschön!

    Antworten
  15. Lea
    schrieb am 25.11.2008 um 00:13 Uhr:

    danke jonas, ich habs grad mal ausprobiert. finds super ;)

    Antworten
  16. Vera
    schrieb am 14.11.2008 um 18:06 Uhr:

    Bzgl. IE6: Habe meine li’s noch mit folgendem erweitert:
    #gallery li a span {visibility:hidden}
    #gallery li a.current span,
    #gallery li a:hover span {visibility:visible}
    #gallery li a:hover{visibility:visible;}
    Der IE schluckts problemlos :)
    grüsse
    vera

    Antworten
  17. christiane
    schrieb am 03.10.2008 um 16:49 Uhr:

    hallo – erst einmal super vielen dank für die gründliche darstellung. das ding läuft, trotz meiner doch recht wenigen erfahrungen. ich stehe jetzt davor, meine bildergalerie in eine weitere seite einzubinden – welche möglichkeiten habe ich mit java – php ist mir absolut fremd… würde mich über tips freuen, christiane

    Antworten
  18. Jan van Leeuwen
    schrieb am 02.10.2008 um 23:27 Uhr:

    Ein hervorragendes Design und danke für dieser Kode!

    Es inspiriert wenn mann solche Designs sieht.

    Antworten
  19. Chris
    schrieb am 22.07.2008 um 08:27 Uhr:

    GOIIIIIIL :)

    und weisste was? scheiss auf IE6!
    Wann starten wir endlich ne Kampagne um den auszurotten?

    Antworten
  20. Jonas
    schrieb am 18.07.2008 um 17:53 Uhr:

    @ Gärtner: Selbstverständlich. Es können beliebig viele Bilder hinzugefügt werden. Es ist auch nicht festgelegt wo sich die Thumbnails befinden. Also können diese auch links vom Hauptbild oder darüber positioniert werden.

    Antworten
  21. Gärtner
    schrieb am 18.07.2008 um 15:03 Uhr:

    Kann man das auch erweitern wenn man mehre bilder hat?

    Antworten
  22. Jonas
    schrieb am 17.07.2008 um 22:08 Uhr:

    @ Jens: Jau! Das sieht ja richtig gut aus.. ich werde mir das morgen mal in aller Ruhe zu Gemüte führen. Hatte ich bisher noch gar nichts von gehört.

    Antworten
  23. Jens
    schrieb am 17.07.2008 um 16:38 Uhr:

    Hallo Jonas,
    also als „Kulturbanause“ kann man Dich nicht bezeichnen. Mit diesem Theme wirst Du neue Maßstäbe setzen! :-)
    Aber zum allseits „beliebten“ IE6. Google mal nach „IE7.js“, und binde dieses Script von Dean Edwards mittels „Conditional Comments“ ein. Das Teil ist einfach genial! Wenn nun ein IE5/6-User auch noch JavaScript abgeschalten hat, na dann kann man ihm nicht helfen.
    Viel Glück,
    Jens

    Antworten
  24. Jonas
    schrieb am 16.07.2008 um 07:44 Uhr:

    @ Tobias: Super! Freut mich sehr, dass Ihr Verwendung dafür finden konntet.

    Antworten
  25. Tobias
    schrieb am 16.07.2008 um 00:49 Uhr:

    Vielen Dank.
    Habe das glatt doch mal für unsere Vereinshomepage benutzt. Musste natürlich noch ein paar Dinge anpassen aber das ging dann auch leicht von der Hand.

    Hier die Seite
    http://www.badminton-vilsen.de/galerie.php

    Antworten
  26. Doro
    schrieb am 15.07.2008 um 13:21 Uhr:

    Genial!
    Danke!

    Antworten
  27. Andris
    schrieb am 14.07.2008 um 10:08 Uhr:

    Hab hier auch mal so was gebastelt:

    http://www.cube31.ch/erdgeschoss.php

    Antworten
  28. Ben
    schrieb am 09.07.2008 um 23:52 Uhr:

    Wirklich? Ich bild mir ein, erst vor kurzem noch mittels Auto-Update genervt worden zu sein, der neue IE würde sich ja so unheimlich gerne auf meinem System installieren – ist mein Zeitgefühl tatsächlich dermaßen im Eimer und das war anno dazumal der Wechsel zu IE6?
    (Ich werd langsam alt XD)
    Hab jedenfalls jetzt eine unsaubere, nicht standard konforme, nur im IE funktionierende und fürchterlich zusammengeschachtelte Lösung.
    http://ie6sucks.nathrai.de/ie6_css_gallery.html
    Ist natürlich nicht alltagstauglich – aber hier gings ohnehin nur noch darum, mein angeknakstes Ego wieder zu kitten… ;)

    Antworten
  29. Jonas
    schrieb am 09.07.2008 um 00:03 Uhr:

    @Ben: Wenn ich nicht völlig hinterm Mond lebe, dann ist der IE7 noch nicht mit einem ServicePack ausgeliefert worden. Ich meinte das passiert mit dem kommenden SP3. Daher muss er momentan noch manuell installiert werden (zumindest über ein manuellen Windows-Update).
    Und wer Windows nicht als Original besitzt klickt sicher nicht aufs Update :) das dürften einige sein …

    Antworten
  30. Adult Ühler
    schrieb am 08.07.2008 um 22:46 Uhr:

    Hi. I don’t speak your language, but I just had to drop in a note to say that this is the best designed site I have ever seen.

    Antworten
  31. Ben
    schrieb am 08.07.2008 um 19:01 Uhr:

    @Jonas: Nachdem ich inzwischen beruflich garnichts mehr mit CSS zutun hab, sollte ich das vermutlich auch langsam – aber leider sitzt derzeit mein Das-muß-doch-zu-schaffen-sein! Ego am längeren Hebel. :P
    Wobei es mich schon ziemlich wundert, daß noch gar so viele Leute überhaupt mit dem IE6 arbeiten – die „Auf neue Version upgraden?“ Meldung hätte doch selbst für den größten DAU unmißverständlich sein sollen…

    Antworten
  32. Cörv
    schrieb am 08.07.2008 um 15:49 Uhr:

    Super Sache. =)

    Antworten
  33. Jonas
    schrieb am 08.07.2008 um 07:26 Uhr:

    @Ben: bei meiner privaten Seite lasse ich IE6 User mittlerweile außen vor. Für gewöhnlich baue ich dann eine weniger schöne aber nicht hässliche oder unfunktionale IE6-Lösung ein.
    Wer nicht up-to-date ist bekommt eben auch nicht das beste! So ist das immer, nicht nur im Netz.

    Antworten
  34. Ben
    schrieb am 08.07.2008 um 06:38 Uhr:

    Hmph – hab jetzt 6 verschiedene Variationen ausgetestet, die allesamt in anderen Browsern funktionieren – die aber im IE6 jeweils an einem anderen der §$“/Q§$%“&“ bugs scheitern.
    Ich versuch’s nach der Arbeit weiter, jetzt muß ich aber los – komm jetzt schon 20min zu spät…
    (Merken: Keine Blogs am Morgen lesen XD)

    Antworten

Schreibe einen Kommentar zu Anonymous Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: