Thomas: Bilder in Listen bzw. Gitter anzeigen

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.

  1. Om nah hoo pez nyeetz, Thomas!

    • Es besteht kein Grund, die &Uumlaute zu verst&uuml;mmeln.
    • Dieser wiki-Beitrag könnte hilfreich sein
    • Du könntest beispielsweise zwischen display: block und display: inline-block wechseln

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Lachs und Lachsack.

    1. Moin Matthias,

      • Es besteht kein Grund, die &Uumlaute zu verst&uuml;mmeln.

      warum nicht? In allen Youtube Videos die ich bis jetzt gesehen habe wird dieses so umgesetzt. Außerdem macht es mein HTML Editor (Scriptly) automatisch.

      Dein Link schau ich mir gleich an. Sollte ich dazu noch Fragen habe, melde ich mich wieder.

      1. Om nah hoo pez nyeetz, Thomas!

        • Es besteht kein Grund, die &Uumlaute zu verst&uuml;mmeln.
          warum nicht?

        Vor Jahrmillionen, als es nur den ASCII-Zeichensatz gab, war das nötig. Heute verwendet man UTF-8, da kann man alle Zeichen so eingeben, wie man sie sieht. Einschließlich ▲, ≈ oder ähliches.

        Dein HTML-Editor sollte ersetzt werden. Er ist bereits 4 Jahre alt.

        <!doctype html>  
        <html>  
          <head>  
            <meta charset="UTF-8">  
            <title>aussagekräftiger Titel deiner Seite</title>  
          </head>
        

        sollten die ersten Zeilen deines Codes lauten.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Scheuer und Scheuerleiste.

        1. Moin Matthias,

          Dein HTML-Editor sollte ersetzt werden. Er ist bereits 4 Jahre alt.

          würde ich machen allerdings ist dieser kostenlos und hat eine schöne Autovervollständigung da ich einfach nicht alle HTML und CSS Eigenschaften und Elemente kenne.

        2. @@Matthias Apsel:

          nuqneH

          Vor Jahrmillionen, als es nur den ASCII-Zeichensatz gab, war das nötig.

          Im ASCII-Zeichensatz gibt es keine Umlaute.

          Heute verwendet man UTF-8,

          Ui, vermengen wir da gerade die Begriffe Zeichensatz und Zeichencodierung?

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. Moin Matthias,

      • Dieser wiki-Beitrag könnte hilfreich sein
      • Du könntest beispielsweise zwischen display: block und display: inline-block wechseln

      ist aber nicht wirklich das was ich benötige. Kann es sein dass du meine Frage nicht richtig verstanden hast?

      1. Om nah hoo pez nyeetz, Thomas!

        ist aber nicht wirklich das was ich benötige. Kann es sein dass du meine Frage nicht richtig verstanden hast?

        beschäftigt sich mit deiner Frage nach figcaption

        • Du könntest beispielsweise zwischen display: block und display: inline-block wechseln

        erlaubt das Ändern der Darstellung von nebeneinander zu untereinander

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Gast und Gastritis.

        1. Moin Matthias,

          erlaubt das Ändern der Darstellung von nebeneinander zu untereinander

          wie ich etwas nebeneinander / untereinander bekomme ist mir klar. Mir geht es eher darum wie teile ich dieses dem Browser mit, was er machen soll? Der User klickt auf einen Link (wie müsste dieser aussehen) und wie geht es dann weiter?

    3. Hallo Matthias,

      • Es besteht kein Grund, die &Uumlaute zu verst&uuml;mmeln.

      also besser "Ümlaute". ;-)
      Ansonsten: Ja, völlig richtig.

      Ciao,
       Martin

      --
      Der Klügere gibt solange nach, bis er der Dumme ist.
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  2. Moin,

    ich bin ein Schritt weiter.

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

    Das heißt ich würde dann mit einem Klick auf den Link

      
     <section class="ansicht">  
            <p><a href="#">Listenansicht</a></p>  
            <p><a href="#">Gitteransicht</a></p>  
       </section>  
    
    

    jeweils mit jQuery mein CSS abändern! Bin ich hier auf dem richtigen Weg?

  3. 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>  
    
    
    1. Om nah hoo pez nyeetz, Thomas!

      Du solltest es vermeiden, CSS-Eigenschaften direkt mit JavaScript zu setzen. Es reicht, wenn du eine eine Klasse setzt und dann mit CSS entsprechend arbeitest. http://jsfiddle.net/Matthias_Apsel/qtr0fbna/

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Scheuer und Scheuerleiste.

      1. Moin Matthias,

        Du solltest es vermeiden, CSS-Eigenschaften direkt mit JavaScript zu setzen. Es reicht, wenn du eine eine Klasse setzt und dann mit CSS entsprechend arbeitest. http://jsfiddle.net/Matthias_Apsel/qtr0fbna/

        vielen Dank für dein Beispiel. Sieht viel besser vom Code aus als meines. Allerdings habe ich noch eine Frage dazu.

        In deinem Beispiel wird der <section> eine class="" hinzugefügt, das sieht dann so aus <section class="zeilenansicht"> wenn ich nun wieder auf Gitteransicht klicke, sieht es plötzlich so aus <section class="">. Darf ich denn einfach eine leere class schreiben?

        1. Om nah hoo pez nyeetz, Thomas!

          In deinem Beispiel wird der <section> eine class="" hinzugefügt, das sieht dann so aus <section class="zeilenansicht"> wenn ich nun wieder auf Gitteransicht klicke, sieht es plötzlich so aus <section class="">. Darf ich denn einfach eine leere class schreiben?

          Ja.

          Allerdings schreibst du keine leere Klasse, sondern das class-Attribut hat keinen Wert. Du kannst auch immer den Validator fragen, er beantwortet solche Fragen.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen HAL und Halsbandarassari.

          1. Moin Matthias,

            Ja.

            Allerdings schreibst du keine leere Klasse, sondern das class-Attribut hat keinen Wert. Du kannst auch immer den Validator fragen, er beantwortet solche Fragen.

            Danke für deine Hilfe.

          2. Moin Matthias,

            hätte noch eine Frage zu deinen <buttons>. Ich kann ein Button ja auf disabled setzten

              
            <p>  
                <button id="gitter" disabled>Gitteransicht</button>  
                <button id="zeilen">Zeilenansicht</button>  
            </p>  
            
            

            Wenn ein User auf Zeilenansicht klickt, sollte oben das disabled weg und dafür beim aktuellen geklickten Button hin. Wie müsste ich dieses in dein JS Code mit einbauen? Ein addClass ist es ja nicht oder?

              
            <h1>Demo Bilder</h1>  
              
            <p>  
                <button id="gitter" disabled>Gitteransicht</button>  
                <button id="zeilen">Zeilenansicht</button>  
            </p>  
              
                <section>  
                    <figure>  
                        <img src="http://dummyimage.com/330x400" />  
                        <figcaption>Ich bin eine Beschreibung für das erste Bild</figcaption>  
                    </figure>  
              
                    <figure>  
                        <img src="http://dummyimage.com/330x400" />  
                        <figcaption>Ich bin eine Beschreibung für das zweite Bild</figcaption>  
                    </figure>  
              
                    <figure>  
                        <img src="http://dummyimage.com/330x400" />  
                        <figcaption>Ich bin eine Beschreibung für das dritte Bild</figcaption>  
                    </figure>  
              
            </section>  
            
            
              
                <script>  
                   $(document).ready(function(){  
              
                      $('#zeilen').click(function(){  
                          $('section').addClass('zeilenansicht');  
                        });  
              
                      $('#gitter').click(function(){  
                        $('section').removeClass('zeilenansicht');  
                        });  
              
                  });  
                </script>  
            
            
              
            h1 {  
                margin-left: 1.23em;  
            }  
              
            p {  
                margin-left: 2.4em;  
            }  
              
            figure {  
                display: inline-block;  
            }  
              
            figcaption {  
                display: none;  
            }  
              
            .zeilenansicht figure {  
                display: block;  
                padding-top: 20px;  
            }  
              
              
            .zeilenansicht figcaption {  
                display: block;  
            }  
            
            

            Dann hätte ich noch eine letzte Frage, ist es möglich diesen Status der vom User gewählt wurde in einer Session oder Cookie zu speichern? Wenn ja ist es sehr aufwendig?

            Ich weiß dass ich eine Session so starten kann

            session_start();  
            $_SESSION['status'] = "";  
            
            

            Aber wie wird der status gefüllt? Habe ich mit JS auch hier eine Möglichkeit?

            1. Moin,

              mein Problem <button> habe ich hinbekommen

                
              <script>  
                     $(document).ready(function(){  
                
                        $('#zeilen').click(function(){  
                            $('section').addClass('zeilenansicht');  
                            $('#zeilen').attr('disabled', 'disabled');  
                            $('#gitter').removeAttr('disabled', 'disabled');  
                          });  
                
                        $('#gitter').click(function(){  
                          $('section').removeClass('zeilenansicht');  
                          $('#zeilen').removeAttr('disabled', 'disabled');  
                          $('#gitter').attr('disabled', 'disabled');  
                          });  
                
                    });  
                  </script>  
              
              

              Jetzt geht es nur noch um folgendes:

              Ist es möglich diesen Status der vom User gewählt wurde in einer Session oder Cookie zu speichern? Wenn ja ist es sehr aufwendig?

              Ich weiß dass ich eine Session so starten kann

              session_start();  
              $_SESSION['status'] = "";
              

              Aber wie wird der status gefüllt? Habe ich mit JS auch hier eine Möglichkeit?

              1. Hallo

                Jetzt geht es nur noch um folgendes:

                Ist es möglich diesen Status der vom User gewählt wurde in einer Session oder Cookie zu speichern? Wenn ja ist es sehr aufwendig?

                Ich weiß dass ich eine Session so starten kann

                session_start();

                $_SESSION['status'] = "";

                  
                Das ist PHP. Das wird auf dem Server ausgeführt und die Ausführung ist beendet, bevor der Browser die resultierenden Daten bekommt. Das ist also nicht das Richtige für dich, da du das Cookie anhand einer Aktion im Browser setzen willst (dann, wenn ein PHP-Skript längst abgearbeitet ist).  
                  
                
                > Aber wie wird der status gefüllt? Habe ich mit JS auch hier eine Möglichkeit?  
                  
                Ja. [Google nach Cookie mit JS](https://www.google.com/search?q=Cookie+mit+JS). Welches der Suchergebnisse die beste Implementierung bietet, kann ich dir nicht sagen, da ich selbst keine per JS gesetzte Cookies nutze. Frag' bei Unklarheiten hier einfach noch einmal nach.  
                  
                Tschö, Auge  
                
                -- 
                Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
                Terry Pratchett, "Wachen! Wachen!"  
                  
                ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}  
                  
                [Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)
                
          3. @@Matthias Apsel:

            nuqneH

            Allerdings schreibst du keine leere Klasse, sondern das class-Attribut hat keinen Wert.

            Doch, es hat einen Wert: "".

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  4. Moin,

    wollte mein Script noch etwas erweitern und zwar um einen "sanften" Übergang. Ein Beispiel habe ich hier http://photecs.de/kategorie/studio/halterungen-und-klemmen/ die Frage ist nur, wie bekomme ich dieses hin? Gehe mal davon aus, dass ich mit CSS hier nicht allein weiter komme oder?

    Vielleicht hat jemand von euch sogar eine fertige Lösung die ich verwenden kann. Meine Datei sieht derzeit so aus:

      
        <script src="jQuery.1.10.2.js"></script>  
      
        <script>  
           $(document).ready(function(){  
      
              $('#zeilen').click(function(){  
                  $('section').addClass('zeilenansicht');  
                  $('#zeilen').attr('disabled', 'disabled');  
                  $('#gitter').removeAttr('disabled', 'disabled');  
                });  
      
              $('#gitter').click(function(){  
                  $('section').removeClass('zeilenansicht');  
                  $('#zeilen').removeAttr('disabled', 'disabled');  
                  $('#gitter').attr('disabled', 'disabled');  
               });  
      
          });  
        </script>  
    
    
      
            h1 {  
            margin-left: 1.23em;  
            }  
      
            p {  
                margin-left: 2.4em;  
            }  
      
            figure {  
                display: inline-block;  
            }  
      
            figcaption {  
                display: none;  
            }  
      
            .zeilenansicht figure {  
                display: block;  
                padding-top: 20px;  
            }  
      
      
            .zeilenansicht figcaption {  
                display: block;  
            }  
    
    
      
    <!DOCTYPE html>  
    <html>  
      
    <head>  
        <title>Test - Seite</title>  
        <meta charset="UTF-8">  
    </head>  
      
    <body>  
      
    <h1>Demo Bilder</h1>  
      
    <p>  
        <button id="gitter" disabled >Gitteransicht</button>  
        <button id="zeilen">Zeilenansicht</button>  
    </p>  
      
        <section>  
            <figure>  
                <img src="http://dummyimage.com/330x400" />  
                <figcaption>Ich bin eine Beschreibung für das erste Bild</figcaption>  
            </figure>  
      
            <figure>  
                <img src="http://dummyimage.com/330x400" />  
                <figcaption>Ich bin eine Beschreibung für das zweite Bild</figcaption>  
            </figure>  
      
            <figure>  
                <img src="http://dummyimage.com/330x400" />  
                <figcaption>Ich bin eine Beschreibung für das dritte Bild</figcaption>  
            </figure>  
      
    </section>  
      
    </body>  
    </html>  
    
    

    Hier kann es Live getestet werden: http://jsfiddle.net/se44g7p1/

    1. Moin,

      Tach auch

      wollte mein Script noch etwas erweitern und zwar um einen "sanften" Übergang. Ein Beispiel habe ich hier http://photecs.de/kategorie/studio/halterungen-und-klemmen/ die Frage ist nur, wie bekomme ich dieses hin? Gehe mal davon aus, dass ich mit CSS hier nicht allein weiter komme oder?

      Aber doch doch. Transition ist das Zauberwort und es wird auch in allen aktuellen Browsern unterstützt.

      Tschö, Auge

      --
      Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
      Terry Pratchett, "Wachen! Wachen!"
      ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
      Veranstaltungsdatenbank Vdb 0.3
      1. Om nah hoo pez nyeetz, Auge!

        Aber doch doch. Transition ist das Zauberwort und es wird auch in allen aktuellen Browsern unterstützt.

        Jedenfalls nicht mit der Lösung display block / inline-block

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Wachs und Wachstube.

        1. Hallo

          Aber doch doch. Transition ist das Zauberwort und es wird auch in allen aktuellen Browsern unterstützt.

          Jedenfalls nicht mit der Lösung display block / inline-block

          Thomas' verlinktes Beispiel läuft ja mit JS und blendet erst die eine Ansicht aus und dann die andere ein. Das sollte sich – egal, ob sinnvoll oder nicht – mit CSS nachahmen lassen. Erst die Farben zu #fff hin ausblenden, dann die Ansicht umschalten und die Farben wieder einblenden.

          Tschö, Auge

          --
          Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
          Terry Pratchett, "Wachen! Wachen!"
          ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
          Veranstaltungsdatenbank Vdb 0.3