Support » Allgemeine Fragen » Bildwechsel mit Mausklick

  • Gelöst mmoeri26

    (@mmoeri26)


    Hallo Zusammen
    Eigentlich dachte ich mir ist ganz einfach – aber irgendwie is nicht 🙂

    Ich möchte meine Bilder auf der Webseite mit Mausklick einmal wechseln lassen.
    Konkret geht es darum:
    Die Bilder sind alle in Graustufen – bei Hover sollen sie farbig werden (hab ich super mit CSS hingekriegt) aber beim verlassen des Bildes sollen diese farbig bleiben oder eben mit Mausklick auf ein farbiges Bild wechseln. Dachte da gibt es sicher ein Plugin fĂŒr.
    Habe aber nichts gefunden – am ehesten diese Image Comparison Dinger – aber wenn sollten die ohne Schieberegler sein – dann wĂ€rs noch gut – habe aber auch nichts gefunden was passt
    Hat jemand von euch einen Tipp? FĂŒr die Seite nutze ich Elementor …

    Gruss Marcel

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Hallo,
    sollte aber auch ĂŒber CSS möglich sein. Ein Plugin kenne ich nicht.
    Bego hat eine umfassende Antwort gegeben – dagegen ist meine Antwort lausig đŸ˜Ș
    Viele GrĂŒĂŸe
    Hans-Gerd

    Vorab: Ich arbeite aus GrĂŒnden nicht mit Elementor, aber eigentlich ist das fĂŒr die Frage auch nachrangig. Ich habe mich hier um eine Lösung mit den CSS-Klassen bemĂŒht, die der Block-Editor verwendet.

    Um Farbbilder im Browser in Graustufen darzustellen, kannst du in CSS eine Filterregel anwenden, z.B.

    .blocks-gallery-item img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
    }

    Um die Bilder dann bei Mauszeigerkontakt wieder farbig darzustellen, hebst du den Filter wieder auf:

    .blocks-gallery-item img:hover {
        filter: none;
        -webkit-filter: grayscale(0);
    }

    Soweit warst du wohl auch schon. 🙂

    Wenn ich deine Frage richtig verstanden habe, möchtest du nun wissen, wie man es schafft, dass die Bilder beim Verlassen farbig dargestellt bleiben. Dazu kannst du z.B. mit jQuery eine Funktion hinzufĂŒgen, die dem Bild bei Mauszeiger-Kontakt eine neue CSS-Klasse zuweist. Damit jQuery ĂŒberhaupt funktioniert (du hast nicht angegeben, mit welchem Theme du arbeitest), musst du dazu jQuery erst einmal einbinden. Die Funktion kannst du entweder in der functions.php deines Child-Theme anhĂ€ngen oder mit dem Plugin Code Snippets hinzufĂŒgen:

    add_action('wp_enqueue_scripts', 'i_want_jquery' );
    function i_want_jquery() {
    	wp_enqueue_script('jquery');
    }

    Nun fĂŒgen wir außerdem die jQuery-Funktion hinzu, mit der die CSS-Klasse bei Mauszeigerkontakt hinzugefĂŒgt wird:

    add_action( 'wp_head', 'stay_hovered' );
    function stay_hovered() { ?>
      <script>
      jQuery(function($){
        $('.blocks-gallery-item img').on( 'mouseenter', function() { 
          $(this).addClass('active') });
      });
      </script>
    <?php }

    Nun wird jedem Bild der Galerie bei Mauszeigerkontakt die CSS-Klasse active zugewiesen, die hinzugefĂŒgt bleibt, bis du die Webseite neu lĂ€dst. Damit das auch eine Auswirkung hat, mĂŒssen wir die CSS-Regel ergĂ€nzen, die den Graustufenfilter wieder entfernt:

    .blocks-gallery-item img:hover,
    .blocks-gallery-item img.active {
        filter: none;
        -webkit-filter: grayscale(0);
    }

    FĂ€hrst du nun ĂŒber die schwarzweiß dargestellten Bilder der Galerie, werden sie nicht nur farbig dargestellt, sondern bleiben auch farbig.

    Das lĂ€sst sich sicher auch in ein Plugin umwandeln, wobei ich aber die Lösung mit Customizer und Code Snippets eigentlich fĂŒr ausreichend halte. Ein fertiges Plugin ist mir nicht bekannt. Ich kenne zwar nicht alle rund 58.000 Plugins, kann mit aber auch nicht vorstellen dass es zu diesem doch eher speziellen Wunsch bereits ein fertiges Plugin gibt.

    Noch eine kleine Erinnerung: Wir haben hier nicht den Anspruch, Grundlagen in CSS, HTML, PHP und/oder JavaScript zu vermitteln. Ich wollte aber nicht nur schreiben „das kannst du mit JavaScript oder jQuery lösen“, weil die Antwort dann doch etwas arg knapp ausgefallen wĂ€re.

    Thread-Ersteller mmoeri26

    (@mmoeri26)

    Krass – Danke Bego
    Klappt wunderbar!!

    Stimmt das mit „das kannst du mit JavaScript oder jQuery lösen“ wĂ€re etwas knapp ausgefallen – 🙂 Vielen Dank, ich bin happy!

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Das Thema „Bildwechsel mit Mausklick“ ist fĂŒr neue Antworten geschlossen.