{"id":3541,"date":"2007-03-06T17:31:59","date_gmt":"2007-03-06T15:31:59","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/2007\/03\/06\/css-basierte-mini-fotogalerie\/"},"modified":"2017-12-03T11:06:43","modified_gmt":"2017-12-03T09:06:43","slug":"css-basierte-mini-fotogalerie","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2007\/03\/css-basierte-mini-fotogalerie\/","title":{"rendered":"CSS basierte Mini Fotogalerie"},"content":{"rendered":"<p>Diese kleine Fotogalerie war eigentlich mehr ein Zufallsereignis. Als Vorlage diente <a href=\"http:\/\/www.css-technik.de\/css-examples\/20_9\/menu1.html\">[diese Beschreibung von Cornelia Lange]<\/a> \u00fcber ein CSS Linkpopup, mit welchem man zus\u00e4tzliche Informationen zu einem Link anzeigen lassen kann.<\/p>\n<p>Was mit Texten geht, sollte auch mit Bildern gehen : Voil\u00c3\u00a0.<\/p>\n<p><a class=\"bild\" href=\"http:\/\/www.frische-zitronen.de\/wp-content\/themes\/jukemedia_002\/css_gallery_001\" title=\"cssgallery.jpg\"><img decoding=\"async\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2007\/03\/cssgallery.thumbnail.jpg\" alt=\"cssgallery.jpg\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.frische-zitronen.de\/wp-content\/themes\/jukemedia_002\/css_gallery_001\" title=\"css Minigalerie\">[Hier geht es zur Beispielseite]<\/a><\/p>\n<p>Wer mag kann sich den Code dort runterziehen.<\/p>\n<p>Diese Galerie ist es, die ich auch in meiner <a href=\"http:\/\/www.frische-zitronen.de\/2007\/03\/06\/webseite-fur-ferienwohnungen\/\">[neuen Webseitenvorlage]<\/a> eingebaut habe.<\/p>\n<p>Etwas l\u00e4stig ist ein Bug im IE. Der will und muss neben a:hover noch andere Pseudoklassen haben und mit der Hintergrundfarbe gibt es bei bestimmten Einstellungen auch Pobleme. Wieder mal so ein Punkt, wo man doch etwas \u00e4rgerlich wird. Es dauert halt wegen der Eigensinnigkeit des IE alles immer ein bisschen l\u00e4nger. Aber nun gut &#8211; der Bug l\u00e4sst sich umgehen.<\/p>\n<p>Um beim erstmaligen Laden einer Seite gleich ein vergr\u00f6\u00dfertes Bild betrachten zu k\u00f6nnen, w\u00e4re es m\u00f6glich f\u00fcr das erste Bild im showcase eine gesonderte Klasse mit display:block anstatt display:none zu definieren. Man mag dar\u00fcber streiten, ob Netscape noch ber\u00fccksichtigt werden muss oder nicht &#8211;  jedenfalls macht dieser Browser dann nicht mehr mit. Deshalb habe ich mich f\u00fcr eine zweite Variante entschieden und ein wenig gemogelt. Das erste Bild ist ein Hintergrundbild \u00fcber welches sich alle anderen Bilder dr\u00fcber legen.<\/p>\n<p>Beim Experimentieren mit dieser kleinen Galerie zeigt sich, wie wendig sie ist und wie viele M\u00f6glichkeiten der Gestaltung darin stecken k\u00f6nnen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Diese kleine Fotogalerie war eigentlich mehr ein Zufallsereignis. Als Vorlage diente [diese Beschreibung von Cornelia Lange] \u00fcber ein CSS Linkpopup, mit welchem man zus\u00e4tzliche Informationen zu einem Link anzeigen lassen kann.<br \/>\nWas mit Texten geht, sollte auch mit Bildern gehen : Voil\u00c3\u00a0.<\/p>\n<p>[Hier geht es zur Beispielseite]<br \/>\nWer mag kann sich den Code dort runterziehen.<br \/>\nDiese Galerie ist es,  &#8230; <a title=\"CSS basierte Mini Fotogalerie\" class=\"read-more\" href=\"https:\/\/www.jukemedia.de\/blog\/2007\/03\/css-basierte-mini-fotogalerie\/\" aria-label=\"Mehr Informationen \u00fcber CSS basierte Mini Fotogalerie\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,143,177,187],"yst_prominent_words":[],"class_list":["post-3541","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-webdesign-2","tag-css-xhtml","tag-tipps-und-tricks","tag-fotogalerie"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3541"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3541\/revisions"}],"predecessor-version":[{"id":4056,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3541\/revisions\/4056"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3541"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}