Chriss: 3 Bilder durch anklicken abwechselnd vergrößern/verkleinern

Hi,

ich habe 3 Bilder in einem Grid-Layout. Als Ausgangszustand beim aufrufen der Seite, sollen 2 Bilder klein sein (span3) und eines groß (span6). Jetzt möchte ich gern den Effekt haben, dass ein Bild was klein ist, durch anklicken groß wird und die jeweils anderen 2 Bilder klein bleiben/werden usw. Kennt Ihr da vielleicht ein (jQuery)-Script, das ich dafür nehmen könnte, bzw. einen Ansatz für eine Umsetzung.

Danke und Gruß
Chriss

  1. Om nah hoo pez nyeetz, Chriss!

    Meine Lösungsskizze hat den Nachteil, dass alle Bilder in groß geladen werden und den Vorteil, dass beim Ändern keine Unterbrechungen zu sehen sind.

    HTML

    <figure class="gallery">  
      <img scr="..." alt="aussagekräftiger Alernativtext" class="zoom">  
      <img scr="..." alt="aussagekräftiger Alernativtext">  
      <img scr="..." alt="aussagekräftiger Alernativtext">  
    </figure>
    

    JavaScript (JQuery)

    $('.gallery > img').click(function(){  
      $('.gallery > .zoom').removeClass('zoom');  
      $(this).addClass('zoom');  
    });
    

    CSS

    .gallery > img {  
      width: 30%;  
      transition: width 0.2s ease-in-out;  
    }  
    .gallery > img.zoom {  
      width: 100%;  
      transition: width 0.2s ease-in-out;  
    }
    

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Lid und Lido.

    1. Om nah hoo pez nyeetz, Chriss!

      Das wünsch ich dir auch Matthias!

      Vielen Dank für deinen Code. Das war genau das, wonach ich gesucht hatte. Ich hatte zwar noch etwas Arbeit, die Bilder auf mein Responsive-Layout anzupassen, aber jetzt klappt alles!

      Schöne Grüße
      Chriss

    2. Om nah hoo pez nyeetz, Chriss und Matthias!

      .gallery > img {  
      
      >   width: 30%;  
      >   transition: width 0.2s ease-in-out;  
      > }  
      > .gallery > img.zoom {  
      >   width: 100%;  
      >   transition: width 0.2s ease-in-out;  
      > }
      
      

      Oder man verwendet 'transform: scale()'.

      Demo: http://www.html-seminar.de/beispiel-css3-transform-scale-hover.htm

      Gruß Gunther

      PS: @Matthias Kann man eigentlich die Zitatzeichen bei Antworten in Code-Blöcken nicht automatisch eliminieren!?

      1. Om nah hoo pez nyeetz, Gunther!

        Kann man eigentlich die Zitatzeichen bei Antworten in Code-Blöcken nicht automatisch eliminieren!?

        Im Nachhinein nur schwer, weil es ja verschiedene sein können (»» ,», >>, >, |) und auch im zitierten Text vorkommen können. Die Klasse q innerhalb von code gar nicht erst zu setzen, wäre u.U. cleverer. Ich weiß allerdings nicht, welche Nebenwirkungen das hat und wie groß der Programmieraufwand wäre, den Christian leisten müsste.

        Schick mir doch bitte den regulären Ausdruck, um die möglichen Zitatzeichen nach einem <br>(?) zu entfernen. Beachte, dass sie auch mehrfach auftreten können.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Hund und Hundertwasser.

        1. Om nah hoo pez nyeetz, Matthias!

          Kann man eigentlich die Zitatzeichen bei Antworten in Code-Blöcken nicht automatisch eliminieren!?

          Im Nachhinein nur schwer, weil es ja verschiedene sein können (»» ,», >>, >, |) und auch im zitierten Text vorkommen können. Die Klasse q innerhalb von code gar nicht erst zu setzen, wäre u.U. cleverer. Ich weiß allerdings nicht, welche Nebenwirkungen das hat und wie groß der Programmieraufwand wäre, den Christian leisten müsste.

          Das Einfügen der jeweiligen Zitatzeichen bei der Antwort zu verhindern, scheint mir aber die einzige "sinnvolle" Variante zu sein.

          Ich habe zwar keine Ahnung, wie der Code aufgebaut ist, aber so spontan würde ich einfach mal sagen, dass eine Funktion dafür sorgen muss, dass zwischen [code ...] und [/code] (jeweils inklusive) einfach keine Zitatzeichen eingefügt werden. Das sollte dann eigentlich auch keinerlei Nebenwirkungen haben können.

          Schick mir doch bitte den regulären Ausdruck, um die möglichen Zitatzeichen nach einem <br>(?) zu entfernen. Beachte, dass sie auch mehrfach auftreten können.

          Bist du sicher, dass das reicht?
          Würde da nicht u.a. die erste Zeile Fehlen, weil der kein <br> vorausgeht?

          Gruß Gunther

          1. Om nah hoo pez nyeetz, Gunther!

            Schick mir doch bitte den regulären Ausdruck, um die möglichen Zitatzeichen nach einem <br>(?) zu entfernen. Beachte, dass sie auch mehrfach auftreten können.

            Bist du sicher, dass das reicht?

            Hast du denn mein Fragezeichen nicht gesehen? ;-)

            Würde da nicht u.a. die erste Zeile Fehlen, weil der kein <br> vorausgeht?

            Bei der ersten Zeile steht das Zitatzeichen vor [code].

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Laus und Lauschaer Glas.

          2. Om nah hoo pez nyeetz, Gunther!

            Schick mir doch bitte den regulären Ausdruck, um die möglichen Zitatzeichen nach einem <br>(?) zu entfernen. Beachte, dass sie auch mehrfach auftreten können.

            Folgendes habe ich jetzt in meinem User-JS:

            $(document).ready(function(){  
              $('code').each(function(){  
                var inhalt = $(this).html();  
                inhalt = inhalt.replace(/^(»» |» |>> |> |\| )+/,'');  
                          [code lang=javascript]// Zitatzeichen unmittelbar nach <code> für code ohne lang
            

            inhalt = inhalt.replace(/">(»» |» |>> |> || )+/,'">');
                          // Zitatzeichen unmittelbar nach <span ...>
                inhalt = inhalt.replace(/<br>(»» |» |>> |> || )+/g,'<br>');
                $(this).html(inhalt);
              });
            });[/code]
            Es funktioniert, ob unter allen Umständen, weiß ich nicht.
            Das ist natürlich für mich allein überdimensioniert, weil ich nur "»» " als Zitatzeichen habe, aber ich werde mal mit allen testen.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Sau und Sauerkraut.

            1. Om nah hoo pez nyeetz, Matthias Apsel!

              $(document).ready(function(){

              $('code').each(function(){
                  var inhalt = $(this).html();
                  inhalt = inhalt.replace(/^(»» |» |>> |> || )+/,'');
                            [code lang=javascript]// Zitatzeichen unmittelbar nach <code> für code ohne lang

              
              >     inhalt = inhalt.replace(/">(»» |» |>> |> |\| )+/,'">');  
              >               `// Zitatzeichen unmittelbar nach <span ...>`{:.language-javascript}  
              >     inhalt = inhalt.replace(/<br>(»» |» |>> |> |\| )+/g,'<br>');  
              >     $(this).html(inhalt);  
              >   });  
              > });[/code]  
                
              zudem  
              ~~~javascript
              $('code .q').parents('code').addClass('q');  
              
              

              und dann der Selektor $('code.q').each(function(){ statt $('code').each(function(){

              und noch eine andere Farbe für die veränderten Code-Blöcke

              code.q.block {  
                  background: none repeat scroll 0 0 #8A9DA8;  
              }  
              
              

              Matthias

              --
              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Torte und Tortellini.

              1. Om nah hoo pez nyeetz, Matthias Apsel!

                $(document).ready(function(){

                $('code').each(function(){
                    var inhalt = $(this).html();
                    inhalt = inhalt.replace(/^(»» |» |>> |> || )+/,'');
                              [code lang=javascript]// Zitatzeichen unmittelbar nach <code> für code ohne lang

                
                > >     inhalt = inhalt.replace(/">(»» |» |>> |> |\| )+/,'">');  
                > >               `// Zitatzeichen unmittelbar nach <span ...>`{:.language-javascript}  
                > >     inhalt = inhalt.replace(/<br>(»» |» |>> |> |\| )+/g,'<br>');  
                > >     $(this).html(inhalt);  
                > >   });  
                > > });[/code]  
                  
                Es steht natürlich &gt; im Quelltext.  
                  
                

                $(document).ready(function(){
                  $('code .q').parents('code').addClass('q');
                  $('code.q, .q code').each(function(){
                    var inhalt = $(this).html();
                    // inhalt = inhalt.replace(/^(»» |» |&gt;&gt; |&gt; || )+/,'');
                             [code lang=javascript]// Zitatzeichen unmittelbar nach <code>

                    inhalt = inhalt.replace(/">(»» |» |&gt;&gt; |&gt; |\| )+/,'">');  
                             `// Zitatzeichen unmittelbar nach <span ...>`{:.language-javascript}  
                    inhalt = inhalt.replace(/<br>(»» |» |&gt;&gt; |&gt; |\| )+/g,'<br>');  
                    $(this).html(inhalt);  
                  });  
                })[/code]  
                  
                
                > und noch eine andere Farbe für die veränderten Code-Blöcke  
                > ~~~css
                
                code.q.block {  
                
                >     background: none repeat scroll 0 0 #8A9DA8;  
                > }  
                > 
                
                

                Das können auch noch andere sein.

                code.q.block, .q code.block {  
                    background: none repeat scroll 0 0 #f1f3f4;  
                }  
                
                

                Matthias

                --
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Gummi und Gummibärchen.

        2. @@Matthias Apsel:

          nuqneH

          Im Nachhinein nur schwer, weil es ja verschiedene sein können (»» ,», >>, >, |)

          Ein IMHO unsinniges Feature dieses Forums. Bringt keinen Mehrwert, aber Probleme. Sollte entsorgt werden.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Om nah hoo pez nyeetz, Gunther!

        Oder man verwendet 'transform: scale()'.

        Demo: http://www.html-seminar.de/beispiel-css3-transform-scale-hover.htm

        • eine Seite, die konsequent(!) von CSS-Befehlen spicht o.O
        • transform statt width (@Chriss: …  wohlgemerkt, nicht etwa transform statt transition) halte ich bei Bildern nicht für notwendig.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Qual und Qualle.

      3. Om nah hoo pez nyeetz, Gunther!

        PS: @Matthias Kann man eigentlich die Zitatzeichen bei Antworten in Code-Blöcken nicht automatisch eliminieren!?

        Ich habe noch ein paar Veränderungen vorgenommen:

        screenshot

        JavaScript

        $(document).ready(function(){  
          $('code .q').parents('code').addClass('q');  
          $('code.q, .q code').each(function(){  
            var inhalt = $(this).html();  
            // inhalt = inhalt.replace(/^(»» |» |&gt;&gt; |&gt; |\| )+/,'');  
                        [code lang=javascript]// Zitatzeichen unmittelbar nach <code>
        

        inhalt = inhalt.replace(/">(»» |» |&gt;&gt; |&gt; || )+/,'">');
                        // Zitatzeichen unmittelbar nach <span ...>
            inhalt = inhalt.replace(/<br>(»» |» |&gt;&gt; |&gt; || )+/g,'<br>');
                        // Zitatzeichen unmittelbar nach <br>
            $(this).html(inhalt);
          });
          $('.q').each(function(){
            if ($(this).find('.block')) {
              var inhalt = $(this).html();
              inhalt = inhalt.replace(/(»» |» |&gt;&gt; |&gt; || )+<code/g,'<code');
                        // Zitatzeichen unmittelbar vor <code> mit Klasse block
              $(this).html(inhalt);
            }
          });
        });[/code]
        CSS

        code.q.block, .q code.block {  
          background-image: url(quote.png), linear-gradient(to bottom, #f1f3f4, #f1f3f4);  
          background-repeat: no-repeat, no-repeat;  
          background-position: 2px .3em, 0 0;  
          background-size: auto, 22px 100%;  
          padding-left: calc(.5em + 22px);  
          border-color: #f1f3f4;  
        }  
        
        

        quote.png
        quote.png

        Stellt sich die Frage, ob man dies
         - nur für den, der möchte (via Tipps und Tricks für die individuelle Ansicht)
         - für alle angemeldeten
         - für alle
        anbietet.

        Folgende Probleme sehe ich dabei:
         - Der unbedarfte Nutzer wird versuchen, die Zitatzeichen aus dem Textfeld zu entfernen.
         - Bei Verwendung von ">" ist nicht getestet, ob vielleicht zu viele ">" entfernt werden.
         - Es werden möglicherweise auch Zitatzeichen vor einzeiligen code-Elementen entfernt, nämlich dann, wenn in einem Zitat-span, beide code-Varianten vorkommen.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Reck und Recke.

        1. Om nah hoo pez nyeetz, Matthias Apsel!

          Folgende Probleme sehe ich dabei:

          Manchmal bleiben auch Zitatzeichen übrig:
          Beispiel:

          Da ich Tippfehler vermeiden wollte, habe ich nun eine "Autocomplete" Funktion mit eingebaut. Das funktioniert auch super, allerdings werden mir diese ausgewählten Eingaben dann nicht mehr mit an den URL gehängt. Ich weiß das mein Code "+ textbox.value" das Problem ist, weil der URL mit meinem restlichen "linkhref" ergänzt wird. Was muss ich denn ändern, damit meine "Auswahl" auch übernommen wird? Ich komme hier einfach nicht weiter.

          <script>

          $(function() {
              var availableTags = [
                "Neu",
                "New",
                "Hallo",
                "Test"
              ];
              function split( val ) {
                return val.split( /;\s*/ );
              }
              function extractLast( term ) {
                return split( term ).pop();
              }

          $( "#tags" )
                // don't navigate away from the field on tab when selecting an item
                .bind( "keydown", function( event ) {
                  if ( event.keyCode === $.ui.keyCode.TAB &&
                      $( this ).data( "ui-autocomplete" ).menu.active ) {
                    event.preventDefault();
                  }
                })
                .autocomplete({
                  minLength: 0,
                  source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                      availableTags, extractLast( request.term ) ) );
                  },
                  focus: function() {
                    // prevent value inserted on focus
                    return false;
                  },
                  select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( "; " );
                    return false;
                  }
                });
            });
            </script>
          </head>
          <body>

          <label for="tags">Titel: </label>
          <input type="text" id="tags" onchange="adjustLink();" />
          <a href="#" id="filterLink">Filtern</a>
          <script type="text/javascript">
          function adjustLink() {
            var link = document.getElementById("filterLink");
            var textbox = document.getElementById("tags");
            link.href = "AllItems.aspx?FilterName=Title&FilterMultiValue=" + textbox.value;
          }
          </script>

          </body>
          </html>

            
          Matthias
          
          -- 
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [rho und Rhodos](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=R#rho).  
          ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
          
          
          1. Om nah hoo pez nyeetz, Matthias!

            Folgende Probleme sehe ich dabei:

            Habe ich das insoweit richtig verstanden, als dass wenn ich jetzt das JS einbinde, dieses bei jedem Seitenaufruf nach entsprechenden Code-Blöcken auf der Seite sucht, und dann ggf. die Zitatzeichen daraus entfernt?

            Ich glaube ja nach wie vor, dass es "besser" wäre CK zu fragen, ob er nicht einfach das Einfügen von Zitatzeichen in Code-Blöcken "unterbinden" kann?

            Gruß Gunther

            1. Om nah hoo pez nyeetz, Gunther!

              Habe ich das insoweit richtig verstanden, als dass wenn ich jetzt das JS einbinde, dieses bei jedem Seitenaufruf nach entsprechenden Code-Blöcken auf der Seite sucht, und dann ggf. die Zitatzeichen daraus entfernt?

              Ja.

              Ich glaube ja nach wie vor, dass es "besser" wäre CK zu fragen, ob er nicht einfach das Einfügen von Zitatzeichen in Code-Blöcken "unterbinden" kann?

              Das stimmt. Ich habe Christian gefragt. Er meinte, der Aufwand wäre nicht unerheblich. In V4 werden keine Zitatzeichen mehr in die Beiträge eingefügt.

              Matthias

              --
              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Dress und Dressing.

              1. Om nah hoo pez nyeetz, Matthias!

                Das stimmt. Ich habe Christian gefragt. Er meinte, der Aufwand wäre nicht unerheblich. In V4 werden keine Zitatzeichen mehr in die Beiträge eingefügt.

                Dann lass' uns doch auf V4 warten! ;-)

                Gruß Gunther

                1. Om nah hoo pez nyeetz, Gunther!

                  Dann lass' uns doch auf V4 warten! ;-)

                  Du kannst dich ja schon durch Tests an der Entwicklung beteiligen. http://forumtest.selfhtml.org/

                  Matthias

                  --
                  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Oper und Operation.

                  1. Om nah hoo pez nyeetz, Matthias!

                    Dann lass' uns doch auf V4 warten! ;-)

                    Du kannst dich ja schon durch Tests an der Entwicklung beteiligen. http://forumtest.selfhtml.org/

                    Hab' ich doch schon ..., hab' nur im Moment relativ wenig Zeit.
                    Wenn, dann sollte man ja nach Möglichkeit auch etwas Sinnvolles beitragen können, und das erfordert i.d.R. ja dann doch eine etwas intensivere Beschäftigung mit der Materie, und somit halt auch mehr Zeit ...!

                    Ich hab's aber im Hinterkopf! ;-)

                    Gruß Gunther

                2. Om nah hoo pez nyeetz, Gunther!

                  Dann lass' uns doch auf V4 warten! ;-)

                  Du darfst aber trotzdem mein JS und CSS verwenden ;-) Über Rückmeldungen wäre ich dankbar.

                  Matthias

                  --
                  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Mars und Marschflugkörper.

                  1. Om nah hoo pez nyeetz, Matthias!

                    Du darfst aber trotzdem mein JS und CSS verwenden ;-) Über Rückmeldungen wäre ich dankbar.

                    OK, ich teste das gerne. Dann gib' mir doch bitte mal einen Tipp, wie ich das am einfachsten bewerkstelligen kann, da ich schon die 'http://forum.de.selfhtml.org/js/forum.js' in meinen Einstellungen einbinde - danke!

                    Gruß Gunther

                    1. Om nah hoo pez nyeetz, Gunther!

                      OK, ich teste das gerne. Dann gib' mir doch bitte mal einen Tipp, wie ich das am einfachsten bewerkstelligen kann, da ich schon die 'http://forum.de.selfhtml.org/js/forum.js' in meinen Einstellungen einbinde - danke!

                      Du kannst http://selfhtml.apsel-mv.de/test/selfhtml-gunther.js einbinden. Hab ich einfach hintereinander kopiert. Ist im Moment nur auf "»» " als Zitatzeichen eingestellt.

                      Matthias

                      --
                      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen äh und ähnlich.

                      1. Om nah hoo pez nyeetz, Matthias!

                        Du kannst http://selfhtml.apsel-mv.de/test/selfhtml-gunther.js einbinden. Hab ich einfach hintereinander kopiert. Ist im Moment nur auf "»» " als Zitatzeichen eingestellt.

                        Das ist ja Service - danke! :-)

                        Jetzt habe ich überhaupt erst geschnallt, was dein Skript bewirkt. ;-)
                        Ich war die ganze Zeit davon ausgegangen, dass die Zitatzeichen bereits in der Textarea beim Antworten entfernt werden.

                        Tatsächlich "verschwinden" sie aber bloß in der Anzeige/ Ansicht eines Beitrags, d.h. sie sind nach wie vor vorhanden.

                        Blöde Frage: Greift das Benutzer-Skript nicht bei Antworten?

                        Gruß Gunther

                        1. Om nah hoo pez nyeetz, Gunther!

                          Jetzt habe ich überhaupt erst geschnallt, was dein Skript bewirkt. ;-)
                          Ich war die ganze Zeit davon ausgegangen, dass die Zitatzeichen bereits in der Textarea beim Antworten entfernt werden.

                          Nein, dort sind sie mMn unabkömmlich.

                          Tatsächlich "verschwinden" sie aber bloß in der Anzeige/ Ansicht eines Beitrags, d.h. sie sind nach wie vor vorhanden.

                          Blöde Frage: Greift das Benutzer-Skript nicht bei Antworten?

                          Nein, in der Vorschau sollst du das Posting sehen, wie es von einem "normalen" Nutzer gesehen wird.

                          Matthias

                          --
                          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Stew und Stewardess.

                          1. Om nah hoo pez nyeetz, Matthias!

                            Ich war die ganze Zeit davon ausgegangen, dass die Zitatzeichen bereits in der Textarea beim Antworten entfernt werden.

                            Nein, dort sind sie mMn unabkömmlich.

                            Tatsächlich "verschwinden" sie aber bloß in der Anzeige/ Ansicht eines Beitrags, d.h. sie sind nach wie vor vorhanden.

                            Blöde Frage: Greift das Benutzer-Skript nicht bei Antworten?

                            Nein, in der Vorschau sollst du das Posting sehen, wie es von einem "normalen" Nutzer gesehen wird.

                            Dann lohnt doch der ganze Aufwand gar nicht. ;-)
                            Wenn sich die Zitat-Zeichen nicht "generell" komplett entfernen lassen, ist alles andere ja nur reine "Kosmetik".

                            Gruß Gunther

                            1. Om nah hoo pez nyeetz, Gunther!

                              Dann lohnt doch der ganze Aufwand gar nicht. ;-)

                              Naja doch, wir könnten dies ja auch für jeden Nutzer einstellen, dann wäre es selbstverständlich auch in der Vorschau zu sehen.

                              Wenn sich die Zitat-Zeichen nicht "generell" komplett entfernen lassen, ist alles andere ja nur reine "Kosmetik".

                              Kosmetik ist es sowieso. Ja.

                              Matthias

                              --
                              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Ohm und Ohmdenosaurus.

                              1. Om nah hoo pez nyeetz, Matthias!

                                Dann lohnt doch der ganze Aufwand gar nicht. ;-)

                                Naja doch, wir könnten dies ja auch für jeden Nutzer einstellen, dann wäre es selbstverständlich auch in der Vorschau zu sehen.

                                Ich hatte aber auch zumindest den subjektiven Eindruck, dass das Skript eine "merkliche" Zeit braucht. Das wäre für einige Nutzer ggf. nicht so vorteilhaft ...!

                                Gruß Gunther

                                1. Om nah hoo pez nyeetz, Gunther!

                                  Ich hatte aber auch zumindest den subjektiven Eindruck, dass das Skript eine "merkliche" Zeit braucht. Das wäre für einige Nutzer ggf. nicht so vorteilhaft ...!

                                  Die reine Ausführungszeit des Skriptes beträgt für diesen Thread rund 20ms. Zusätzliche Ladezeit dürfte sich auch in Grenzen halten, weil das Skript in ein bestehendes integriert wird.

                                  Matthias

                                  --
                                  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Messer und Messergebnis.

        2. Om nah hoo pez nyeetz, Matthias !

          Ich muss das nur mal live am lebenden Objekt testen ...

          JavaScript

          $(document).ready(function(){

          $('code .q').parents('code').addClass('q');
            $('code.q, .q code').each(function(){
              var inhalt = $(this).html();
              // inhalt = inhalt.replace(/^(»» |» |&gt;&gt; |&gt; || )+/,'');
                          [code lang=javascript]// Zitatzeichen unmittelbar nach <code>

          
          >     inhalt = inhalt.replace(/">(»» |» |&gt;&gt; |&gt; |\| )+/,'">');  
          >                 `// Zitatzeichen unmittelbar nach <span ...>`{:.language-javascript}  
          >     inhalt = inhalt.replace(/<br>(»» |» |&gt;&gt; |&gt; |\| )+/g,'<br>');  
          >                 `// Zitatzeichen unmittelbar nach <br>`{:.language-javascript}  
          >     $(this).html(inhalt);  
          >   });  
          >   $('.q').each(function(){  
          >     if ($(this).find('.block')) {  
          >       var inhalt = $(this).html();  
          >       inhalt = inhalt.replace(/(»» |» |&gt;&gt; |&gt; |\| )+<code/g,'<code');  
          >                 `// Zitatzeichen unmittelbar vor <code> mit Klasse block`{:.language-javascript}  
          >       $(this).html(inhalt);  
          >     }  
          >   });  
          > });[/code]  
          > CSS  
          > ~~~
          
          code.q.block, .q code.block {  
          
          >   background-image: url(quote.png), linear-gradient(to bottom, #f1f3f4, #f1f3f4);  
          >   background-repeat: no-repeat, no-repeat;  
          >   background-position: 2px .3em, 0 0;  
          >   background-size: auto, 22px 100%;  
          >   padding-left: calc(.5em + 22px);  
          >   border-color: #f1f3f4;  
          > }  
          > 
          
          

          Stellt sich die Frage, ob man dies

          Folgende Probleme sehe ich dabei:

          • Der unbedarfte Nutzer wird versuchen, die Zitatzeichen aus dem Textfeld zu entfernen.
          • Bei Verwendung von ">" ist nicht getestet, ob vielleicht zu viele ">" entfernt werden.
          • Es werden möglicherweise auch Zitatzeichen vor einzeiligen code-Elementen entfernt, nämlich dann, wenn in einem Zitat-span, beide code-Varianten vorkommen.

          Gruß Gunther