Bilder in Listen bzw. Gitter anzeigen

[Thomas]

Moin,

an einer Stelle komme ich nicht weiter. Auf vielen Seiten sehe ich dass ich zwischen eine Listen- bzw. Gitteransicht wechseln kann. Dieses passiert scheinbar ohne dass die Seite neu geladen wird (außer es geht so schnell, dass ich es schlicht übersehe) Der Aufbau sieht bei mir gerade so aus:

  
<h1>Demo Bilder</h1>  
  
    <section>  
  
      <figure>  
        <img src="http://dummyimage.com/330x400" />  
        <figcaption>Ich bin eine Beschreibung f&uuml;r das Bild</figcaption>  
      </figure>  
  
      <figure>  
        <img src="http://dummyimage.com/330x400" />  
        <figcaption>Ich bin eine Beschreibung f&uuml;r das Bild</figcaption>  
      </figure>  
  
      <figure>  
        <img src="http://dummyimage.com/330x400" />  
        <figcaption>Ich bin eine Beschreibung f&uuml;r das Bild</figcaption>  
      </figure>  
  
    </section>  
  
    <section class="ansicht">  
        <p><a href="#">Listenansicht</a></p>  
        <p><a href="#">Gitteransicht</a></p>  
   </section>  

  
h1 {  
    margin-left: 1.23em;  
}  
  
figure {  
    float: left;  
    margin-right: 0.313em;  
}  
  
figure:nth-child(3) {  
    margin-right: 0em;  
}  
  
figcaption {  
    display: none;  
}  
  
.ansicht a {  
    margin-left: 2.5em;  
    color: #808080;  
    text-decoration: none;  
}  

Rufe ich nun die Seite auf, werden meine drei Bilder brav in einer Reihe (sollte der Platz vorhanden sein) angezeigt. Soweit ok! Jetzt möchte ich unten gerne auf einen Link klicken und die Bilder sollen nicht nebeneinander sondern untereinander angezeigt werden.

Als kleine Erweiterung wäre jetzt außerdem noch schön wenn eine Passende Beschreibung zu sehen wäre. Dachte an das neue HTML5 Element figcaption dieses müsste jetzt eingeblendet werden oder?

Vielleicht kann mir von euch hier irgendjemand weiter helfen? Würde dieses gerne umgesetzt bekommen in der Hoffnung dass es nicht so schwer ist.