XHTMLforum - Bilder-Gallery ohne JavaScript

XHTMLforum (http://xhtmlforum.de/index.php)

- Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)

- - Bilder-Gallery ohne JavaScript (http://xhtmlforum.de/showthread.php?t=32885)

Bilder-Gallery ohne JavaScript

Hallo,
angeregt durch diese Gallery :arrow: [url]http]][/color][/size]

Erstes Bild sollte immer zu sehen sein, die anderen mit Hover bzw. Klick

Mich würde mal interessieren auf welchen Browsern es geht !

IE6 und Firefox 0.91 auf XP Pro gehen 8)

IE 5.01 - geht nicht (nur das erste Bild - die anderen werden nicht in groß angezeigt)
IE 5.5 - geht ( kleiner Darstellungsfehler - Rand oben, stört aber nicht wirklich )
IE 6 - geht
Firefox 0.92 - geht
Opera 7.23 - bleibt beim anklicken nicht stehen, hovert aber problemlos

Alles unter Win 98

Hab mir die Galerie auch schon bewundernd angeguckt, weil ich sowas ähnliches ja auch auf meiner HP habe, aber mit Javascript halt. Mal schauen, ob ich´s noch mal umbastel (oder eben ganz anders, wenn ich mich wieder an die HP ranmache..... *g*). Dank Dir jedenfalls fürs umschreiben - ist gleich mal in die Trickkiste gewandert.

Danke Dir......erstmal :D

Zitat:

IE 5.5 - geht ( kleiner Darstellungsfehler - Rand oben, stört aber nicht wirklich )

Wo oben, könnte evtl. mit den WHITE-SPACES zu tun haben :!][/color][/size]

Bei der Gelegenheit auch gleich mal über 100, man weiß ja nie wieviele Ebenen in einem Projekt schon entstanden sind.

Hat jemand noch einen MAC, AOL, T-Online zur Verfügung :?:

:idea: Übrigens geht die Gallery auch mit TABS (Barrierefrei ?!)

Zitat:

Zitat von ulle

Danke Dir......erstmal :D

Zitat:

IE 5.5 - geht ( kleiner Darstellungsfehler - Rand oben, stört aber nicht wirklich )

Wo oben, könnte evtl. mit den WHITE-SPACES zu tun haben :!:

Direkt über dem großen Bild - da bleibt ein schmaler Rand vom ersten Bild übrig - ca. 1-2 pixel, mehr nicht. Sonst ist alles o.k. - kann man mit leben, denke ich. - > werden die 2 pixel für die border sein, von wegen boxmodel und so.....

Nur der IE 5 macht halt gar nix, auch nicht nach Korrektur des Codes (ist eh kein Unterschied :? ) - der wird doch hoffentlich nicht mehr viel benutzt, oder ?.......

Zitat:

Nur der IE 5 macht halt gar nix, auch nicht nach Korrektur des Codes (ist eh kein Unterschied ) - der wird doch hoffentlich nicht mehr viel benutzt, oder ?.......

Wird wohl immer weniger........

Trotzdem wäre es interessant zu sehen ob die orginale Gallerie, die vom LINK oben, mit dem IE5 funktioniert. Der Ursprungscode war nämlich mehr als seltsam, und ich hatte mich schon gefragt warum ER das wohl so geschrieben hatte.

Boxmodel-Fehler beim IE5.5 :shock: , ich dachte der hat nicht das Problem. Da es ja wohl ein Fehler im Startpunkt (Viewport ?!), 2px tiefer........hmmm

Man könnte den [Viewport], da wo [position: relative;] gesetzt wird, ja in der [#gallery_position] setzen, dieser Container ist sowieso Sinnfrei bzw. zum positionieren gedacht, und BOX-Model definitionen ausschliesslich in der [#gallery].

Leider kann ich weder den IE5 noch den IE5.5 testen :?

Der Opera kennt wohl weder die Pseudo-Class :focus noch :active :shock:

Außerdem war auch noch im orginalen Code eine Pseudo-Class :unknown statt :focus, wozu ist mir auch ein Rätzel :(

Zitat:

Zitat von ulle

Trotzdem wäre es interessant zu sehen ob die orginale Gallerie, die vom LINK oben, mit dem IE5 funktioniert. Der Ursprungscode war nämlich mehr als seltsam, und ich hatte mich schon gefragt warum ER das wohl so geschrieben hatte.

Das Original funktioniert mit dem IE 5 auch nicht, mit dem IE 5.5 ohne Probleme (ohne Rand - da das erste Bild nicht drunter liegt).

Zitat:

Boxmodel-Fehler beim IE5.5 :shock: , ich dachte der hat nicht das Problem.

Doch, doch, der auch! Der kann noch keinen Standard-Modus, hat aber doch einige Bugs weniger als der 5er.

Zitat:

Leider kann ich weder den IE5 noch den IE5.5 testen :?

Kannst Du Dir hier runterladen: http://blog.grochtdreis.de/more.php?id=154_0_1_0_M
einfach in irgendein Verzeichnis entpacken und starten.... - fertig! Und wenn Du sie besser unterscheiden willst, dann nimm Dir noch die Brand-Bitmaps von hier mit: http://blech.home.pages.at/iepara.html

Zitat:

Der Opera kennt wohl weder die Pseudo-Class :focus noch :active :shock:

vielleicht der ganz neue? oder zukünftige? ;)

Ohne Preload :arrow: weniger Traffic

Oben gezeigtes Beispiel ist ja schon ganz fein, aber nicht immer sinnvoll. Dadurch das die "Voll"-Bilder in img-Tags stehen werden auch alle beim Laden der Site "gezogen".

Als CSS (background-image) werden diese aber erst während der "Laufzeit", also wenn der Layer angezeigt wird, geladen.

Natürlich ist dann auch der HOVER-Effekt nicht erwünscht, deshalb ohne. Zusätzlich habe ich einen Layer mit der Anzeige (loading....) hinein gelegt. Geht natürlich nur beim ersten Laden, dann ist diese Datei im Browser-Cache und immer sofort sichtbar (logisch).

:arrow]][/color][/size]

Und nochmal die Frage nach den Browsern die es können....

Opera wird wohl nicht gehen :?

IE6 / Firefox 0.91 auf XP pro :arrow: funktionieren

und noch mal die Browserantwort:

IE5.5 - geht nicht - nur das erste Bild wird angezeigt, kein weiteres(den 5er hab ich gar nicht erst versucht)

Opera 7.23 - bei Klicken auf die Vorschaubilder kommen die Bilder, auch das Einblenden von loading klappt - aber eben nur auf Klick - und die Maustaste muss gedrückt bleiben, sonst ist das Bild sofort wieder weg.

IE 6, Firefox o.k., wie bei Dir auch.

Zitat:

IE5.5 - geht nicht

hmm... das könnte wiederum an der Reihenfolge der Pseudo-Classes liegen. Schliesslich hatte ich ja HOVER herausgenommen :!:

Code:

:link

:visited

:hover

:focus

:active

Deshalb müßte es dann so gehen :arrow:

Code:

:

:

#gallery a:hover, #gallery a:focus, #gallery a:activ  {

        border: 1px solid #666666;

}



#gallery a:hover strong, #gallery a:hover span {

        color: #000001; 

}



#gallery a:focus span, #gallery a:active span  {

:

:

@terrikay , Entschuldige mein "nerven" aber könntest Du für den IE5.5 noch mal Hand anlegen.

Und das mit dem Opera müßte aber dann mit TABS gehen - oder ?

Schade das sich keine MAC-User findet :?

Ulle, das ist absolut heiß, das Beispiel!

Vor allem die IEs sind wirklich lustig! :)

Folgendes Beispiel geht (ich schreibs noch mal ganz auf, weil es auf einen Schreibfehler ankommt - der ist wichtig!)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>xxxx</title>

<style type="text/css">   

/*<![CDATA[*/



html,body   {

   margin: 0;

   padding: 0;

   background-color: #FF9933;

   color: #000000;

   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

   font-size: 100.01%;

}



#gallery_position { /*im Textfluss*/

   margin: 3em;

}



#gallery {

   position: relative;

   width: 422px;

   height: 380px;

   border: 1px solid #000000;

   background-color: #EFEDEC;

   

}



#gallery img {

   width: 400px;

   height: 250px;

   margin: 9px;

   border: 1px solid #000000;

}



#gallery a, #gallery a:visited {

   display: block;

   float: left;

   width: 75px;

   height: 47px;

   margin: 3px;

   border: 1px solid #000000;

   text-decoration: none;   

}

#gallery a:hover, #gallery a:activ, #gallery a:focus  {         /*hier muß activ stehen - nicht active! */

   border: 1px solid #666666;

}





#gallery a span {

   display: none;

}



#gallery a strong { /* loading-Block */

   display: none;

}



#gallery a:hover strong, #gallery a:hover span {

   display: none;

} 



#gallery a span em {

   display: block;

   

   width: 400px;

   height: 250px;

   margin: 0;

   border: 1px solid #000000;

}





#gallery a:active span, #gallery a:focus span { 

   position: absolute;

   display: block;

   z-index: 100;

   left: 9px;

   top: 64px;

   width: 402px;

   font-size: 0.8em;

   color: #000000;

}





#gallery a:active strong, #gallery a:focus strong   { /* loading-Block */

   position: absolute;

   display: block;

   z-index: 100;

   left: 4px;

   top: 60px;

   width: 375px;

   height: 275px;

   padding: 20px;

   background-color: #EFEDEC;

   color: #1199FF;

   font-size: 0.8em;   

}





/*]]>*/

</style>





</head><body>







<div id="gallery_position">



<div id="gallery">

<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb2.jpg)" href="#">

   Loading......

   <span>

      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic2.jpg)">[/i]

      Photographs courtesy of morgueFile.com

   </span>

</a>

<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb3.jpg)" href="#">

   Loading......

   <span>

      <em style="background-image: url(http://www.wetteronline.de/daten/sat/2004/07/27/pneI0930.jpg?1090920600)">[/i]

      Photographs courtesy of morgueFile.com

   </span>

</a>

<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb4.jpg)" href="#">

   Loading......

   <span>

      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic4.jpg)">[/i]

      Photographs courtesy of morgueFile.com

   </span>

</a>

<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb5.jpg)" href="#">

   Loading......

   <span>

      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic5.jpg)">[/i]

      Photographs courtesy of morgueFile.com

   </span>

</a>

<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb6.jpg)" href="#">

   Loading......

   <span>

      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic6.jpg)">[/i]

      Photographs courtesy of morgueFile.com

   </span>

</a>

[img]http://www.stunicholls.myby.co.uk/menu/pic2.jpg[/img]

</div>

</div>

</body></html>

Dann passiert folgendes:
Firefox - o.k. - einfach klicken, Bild lädt dann und wird angezeigt
IE6 - so auch o.k. - wenn man #gallery a:active ganz streicht, geht nix mehr, schreibt man es richtig hin, gehts - schreibt man a:activ hin, gehts auch.
IE5.5 - mit #gallery a:active geht nix - nimmt man es weg, dann gehts, schreibt man es mit Schreibfehler hin, gehts auch.
Aber: man muss klicken und dann mit der Maus vom Thumbnail zwingend runter - dann kommt das Bild - bleibt man über dem Thumbnail, passiert nix.......... :?

Opera: bei allen Varianten wie oben beschrieben! - Klicken und Maustaste über Thumbnail gedrückt halten.

Schon echt witzig, diese Galerie! Sollten wir in eine Kuriositätensammlung aufnehmen!