Bild-Überblendschieber (vorher/nachher) einbinden

Thema wurde von SOMAJA, 27. September 2022 erstellt.

  1. SOMAJA

    SOMAJA Erfahrener Benutzer

    Registriert seit:
    26. August 2022
    Beiträge:
    47
    Danke erhalten:
    14
    Danke vergeben:
    20
    #1 SOMAJA, 27. September 2022
    Zuletzt bearbeitet: 27. September 2022
    Hallo,
    auf unserer Produkseite würde ich gerne vorher/nacher Bilder einbinden, die mit einem Schieber überblendet werden. So wie hier: https://www.somaja.de/color7/

    Hat jemand einen Idee wie das machbar wäre? Bitte nur mit eigenem Code also ohne Drittanbieter.

    HG Markus
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    351
    Danke erhalten:
    147
    Danke vergeben:
    125
    #2 Anonymous, 27. September 2022
    Zuletzt bearbeitet: 27. September 2022
    Hallo @SOMAJA,

    das ist genau was Du brauchst:
    (Link nur für registrierte Nutzer sichtbar.)

    Ich unterstelle dir jetzt mal, dass Du weiß, wo die Codes eingesetzt werden? :)

    Edit:
    Am besten nicht 1 zu 1 übernehmen, sondern gucken, ob evtl. bereits vorhandene Klassen zu Problemen führen könnten und stattdessen eigene Klassen einsetzen. Und sowas wie body etc weglassen.
     
  3. SOMAJA

    SOMAJA Erfahrener Benutzer

    Registriert seit:
    26. August 2022
    Beiträge:
    47
    Danke erhalten:
    14
    Danke vergeben:
    20
    @O.C. Hallo, vielen Dank für den Tipp. Das Problem es läuft nicht. Auch nicht auf einer normalen HTML Seite. Ich habe die jquerry von den Settings eingebunden.

    HG Markus
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    351
    Danke erhalten:
    147
    Danke vergeben:
    125
    @SOMAJA also bei mir funktioniert es, siehe: (Link nur für registrierte Nutzer sichtbar.)

    Ich hab jetzt einige unnötige CSS Schnippsel entfernt und an alle IDs und Klassen einfach "vn" rangeknüppelt, damit es mit bereits vorhandenen Klassen etc. keine Konflikte gibt. Du könntest dich einfach an die folgende Anleitung halten und dann funktionierts ganz bestimmt.

    1. JScript folgendermaßen einfügen:
    Einstellungen > Meta-Angaben > Tracking-Codes > Tracking-Code (Body)

    Code:
    <script>
    $("#slidervn").on("input change", (e) => {
      const sliderPos = e.target.value;
      // Update the width of the foreground image
      $(".foreground-imgvn").css("width", `${sliderPos}%`);
      // Update the position of the slider button
      $(".slider-buttonvn").css("left", `calc(${sliderPos}% - 18px)`);
    });
    </script>
    2. CSS-Code folgendermaßen einfügen:
    Unter Inhalte: Theme bearbeiten > CSS bearbeiten > Code einfügen
    Code:
    @mixin center() {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .containervn {
      position: relative;
      width: 900px;
      height: 600px;
      border: 2px solid white;
      .imgvn {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: 900px 100%;
      }
      .background-imgvn {
        background-image: url("https://i.imgur.com/s08MkXC.jpg");
      }
      .foreground-imgvn {
        background-image: url("https://i.imgur.com/PfIWek4.jpg");
        width: 50%;
      }
    
      .slidervn {
        position: absolute;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 100%;
        background: rgba(#f2f2f2, 0.3);
        outline: none;
        margin: 0;
        transition: all 0.2s;
        @include center;
        &:hover {
          background: rgba(#f2f2f2, 0.1);
        }
        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 6px;
          height: 600px;
          background: white;
          cursor: pointer;
        }
        &::-moz-range-thumb {
          width: 6px;
          height: 600px;
          background: white;
          cursor: pointer;
        }
      }
    
      .slider-buttonvn {
        $size: 30px;
        pointer-events: none;
        position: absolute;
        width: $size;
        height: $size;
        border-radius: 50%;
        background-color: white;
        left: calc(50% - 18px);
        top: calc(50% - 18px);
        @include center;
    
        @mixin arrow-helper() {
          content: "";
          padding: 3px;
          display: inline-block;
          border: solid #5d5d5d;
          border-width: 0 2px 2px 0;
        }
        &:after {
          @include arrow-helper();
          transform: rotate(-45deg);
        }
        &:before {
          @include arrow-helper();
          transform: rotate(135deg);
        }
      }
    }
    3. HTML-Code in Produktbeschreibungen einfügen:
    Vorher auf HTML umstellen > Code einfügen
    Code:
    <div class='containervn'>
        <div class='imgvn background-imgvn'></div>
        <div class='imgvn foreground-imgvn'></div>
        <input type="range" min="1" max="100" value="50" class="slidervn" name='slidervn' id="slidervn">
        <div class='slider-buttonvn'></div>
    </div>
    Ach ja, im CSS bei .background-imgvn und .foreground-imgvn natürlich deine eigenen Bild-Links einfügen. Fertig.
     
  5. SOMAJA

    SOMAJA Erfahrener Benutzer

    Registriert seit:
    26. August 2022
    Beiträge:
    47
    Danke erhalten:
    14
    Danke vergeben:
    20
    @O.C. Vielen lieben Dank. Ja das funktioniert so. Damit habe ich auch meinen eigentlichen Code zum laufen gebracht. Super!

    @Devil Ja diese Slider sind ein Wordpress Plugin und die Seite ist mit Wordpress aufgebaut.Funktioneirt so leider nciht mit Gambio.

    HG Markus
     
  6. SOMAJA

    SOMAJA Erfahrener Benutzer

    Registriert seit:
    26. August 2022
    Beiträge:
    47
    Danke erhalten:
    14
    Danke vergeben:
    20
    #6 SOMAJA, 27. September 2022
    Zuletzt bearbeitet: 28. September 2022
    Hallo,
    gibt es eine Möglichkeit den Javascript anders einzubinden? Mit dem Einbinden bei Tracking-Code hat es funktioniert. Würde den Javascript aber gerne anderes einbinden, so wie es sich gehört ;-) Leider kenne ich mich noch nicht gut mit der Struktur von Gambio aus.

    HG Markus
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    351
    Danke erhalten:
    147
    Danke vergeben:
    125
    Also da hab ich bei mir alle Scripts drin, die mehrere Widgets auf verschiedenen Seiten zum Leben erwecken sollen. Man könnte das Script auch direkt auf der Seite einbinden, wo es gebraucht wird. Dann muss es aber auch auf jeder Seite wieder und wieder eingebunden werden, wo es gebraucht wird. Und außerdem hat es bei mir zumindest nicht funktioniert, das Script in der Produktbeschreibung zum Laufen zu bringen.
     
  8. FRAGO

    FRAGO Erfahrener Benutzer

    Registriert seit:
    5. Dezember 2019
    Beiträge:
    1.009
    Danke erhalten:
    319
    Danke vergeben:
    185
  9. SOMAJA

    SOMAJA Erfahrener Benutzer

    Registriert seit:
    26. August 2022
    Beiträge:
    47
    Danke erhalten:
    14
    Danke vergeben:
    20
    @O.C. Das Einbinden in der Seite selbst hat nicht funktioniert. Deine Lösung ist mit dem Trackingcode ist bis jetzt die einzige die funktioniert.

    @FRAGO Hallo FRAGO, das habe ich schon ausprobiert. Ja ich kann damit Code einbinden, Der Code der jetzt unter Trackingcode steht, funktioniert dort nicht. Dieser muss ja direkt in der Webseite aufgerufen werden.

    Wenn ich den in das HTML mit eintrage wird er auch nciht ausgeführt. Von daher ist das momentan die Lösung die funktioneirt, den Javacode unter Trackingcode einzutragen.

    Nach meinem Verständnis sollte es aber auch eine andere Möglichkeit geben, ausser Gambio lässt es aus sicherheitsgründen nicht zu.

    HG Markus