Erledigt

[Thomas]

Moin,

ok ging wohl doch einfacher als gedacht. Ob es richtig ist bzw. ob man es besser machen kann, weiß ich nicht, bin aber für alle weiteren Optionen / Verbesserung offen.

Mein fertiger Code sieht so aus

  
<h1>Demo Bilder</h1>  
  
    <section>  
  
      <figure>  
        <img src="http://dummyimage.com/330x400" />  
        <figcaption>Ich bin eine Beschreibung für das Bild</figcaption>  
      </figure>  
  
      <figure>  
        <img src="http://dummyimage.com/330x400" />  
        <figcaption>Ich bin eine Beschreibung für das Bild</figcaption>  
      </figure>  
  
      <figure>  
        <img src="http://dummyimage.com/330x400" />  
        <figcaption>Ich bin eine Beschreibung für das Bild</figcaption>  
      </figure>  
  
    </section>  
  
    <section class="ansicht">  
        <p class="liste">Listenansicht</p>  
        <p class="gitter">Gitteransicht</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 {  
    margin-left: 2.5em;  
    color: #808080;  
    text-decoration: none;  
}  
  
.gitter {  
    display: none;  
}  

  
<script>  
       $(document).ready(function(){  
  
          $(".liste").click(function() {  
	        $("figcaption").css("display", "inline");  
	        $(".liste").css("display", "none");  
	        $(".gitter").css("display", "inline");  
          });  
  
          $(".gitter").click(function() {  
	        $("figcaption").css("display", "none");  
	        $(".liste").css("display", "inline");  
	        $(".gitter").css("display", "none");  
          });  
  
      });  
    </script>