Unterstützung beim Einbinden eines Colorpickers im Frontend

Hi Zusammen,

ich brauche Mal wieder eure Hilfe. Ich bastel gerade eine Art Moodboard für unsere Webseite. Wenn ich in der Ausstellung (Wir bauen Badezimmer) mit den Kunden als alles bemustere, ziehen wir immer erst viele Fliesen aus dem Regal, Wandfarben und Möbelfronten. Das wäre einfacher hab ich mir gedacht, wenn wir da am PC erst ein Moodboard zusammen stellen. Das habe ich mal gemacht mti 4 Slideshows (Nutzen Yootheme Pro), das klappt super. Nur bei der Wandfarbe gibt es ja eine Millionen Farben. Da kann ich nicht für alle ein Blid erstellen und hinterlegen. Daher hatte ich gedacht, ich baue in eines der Quadrate einen Colorpicker ein. Ich hab da auch schon 1-2 gute gefunden, die passen könnten. Z.B. den hier (Github) und hier die Demoseite.

Und jetzt kommt wieder mein Problem. Ich kann weder Javascript noch PHP. Ich habe mir das Paket heruntergeladen und die Readme gelesen. Leider verstehe ich das nicht wirklich und weiß auch nicht wie ich das einbinde? Im YT Pro kann man ja auch HTML platzieren, allerdings muss ja erst einmal das JS im Layout selbst eingebunden werden denke ich?

Hat da evtl. einer die Muse mir hier etwas Hilfe zu gewähren? Oder hat jemand evtl. einen ganz anderen Ansatz der evtl. sogar einfacher und benutzerfreundlicher ist?

Im Voraus besten Dank!
Stephan

Ps: Die Seite ist noch nicht online einsehbar, sonst hätte ich natürlich ein Link gepostet und ja, Joomla ist auf dem aktuellsten Stand.

Wollte meinen ersten Beitrag anpassen, aber den kann ich nicht mehr ändern? Daher die Info hier:

Ich habe einen einfacheren Picker zum einbinden gefunden Hier der Link.

Ich habe das ganze auch zum Teil eingebunden bekommen. Zu sehen hier.

In der CSS habe ich anstatt body die Klasse .wandfarbe hinterlegt und den Bereich in der die 4 Kacheln sind eben diese Klasse zugewiesen. Der Hintergrund nimmt auch die Standardfarbe "silver" an, allerdings nicht die Änderungen des Pickers. Auch der HEX-Code wird nicht aktualisiert? Ich denke, dass ist nur noch eine Kleinigkeit. Hat hier jemand eine Idee?

Hi Astrid,

danke für deinen Tipp. Das habe ich eben auch gesehen. Allerdings habe ich keine Kenntnisse in JS/PHP wie anfangs schon erwähnt. Ich habe mal auf den Fehler geklickt, aber da wird leider auch nicht mehr angezeigt. Habe nach dem theInput is null auch gegooglet aber weiß nicht wie ich da ansetzten soll. Bin über jeden Tipp Dankbar. Hatte auch schon JCH-Optimize deaktiviert, da ich dachte da kommt das Problem ggf. her.

Danke Astrid. Habe ich eben versucht. Ist auch nachvollziehbar, aber lag leider nicht daran. Trotz dem Leerzeichen und sodass die ID frei steht funktioniert es nach wie vor noch nicht.

Hi,

es liegt nicht am JCH. Hatte ich auch schon probiert. Ich habe den jetzt übergangsweise mal deaktiviert. Evtl. siehst jetzt mehr? Aber ich denke nicht. Ich habe den Fehler auch schon gesehen und drauf geklickt in der Hoffnung nen Hinweis zu finden. Aber wie du sagst, wird nichts angezeigt. Wie gesagt jetzt ist der JCH aus.

Damit gehts. Danke!

Kann das irgendwie etwas anderes beeinträchtigen, wonach ich schauen muss? Ansonsten wie gesagt tiptop damit.

Danke

Sorry für die späte Rückmeldung. Danke! Es hat geklappt und ich baue es noch etwas aus. Den ersten Kunden hat es super gefallen.

Hallo zusammen,

ich hab das Thema gerade nochmal aufgemacht. Ich möchte das Moodboard erweitern und spiele gerade rum, also nicht wundern, dass das noch etwas chaotisch aussieht. Ich brauche eure JS Kenntnisse. Ich hätte gerne bei diesem Colorpicker eine andere Standard-Farbe definiert. Im Moment ist die schwarz, also #000000.

Ich packe euch hier den Code nochmal rein, damit ihr nicht suchen müsst.

<form>
    <label for="kb_selected_color">Wandfarbe auswählen: </label> <span id="hex">(#000000)</span>
    <input type="color" id="kb_selected_color">
  </form>

// Farbe aus ColorPicker auslesen
window.addEventListener("load", function(event) { 
    
    var theInput = document.getElementById("kb_selected_color");

var theColor = theInput.value;
theInput.addEventListener("input", function() {

// Farcode (Hex) schreiben
document.getElementById("hex").innerHTML = theInput.value;

// Farbvariable schreiben
document.documentElement.style.setProperty('--kb-color',theInput.value);

}, false);
    
    
});
// Colorpicker ENDE

.wandfarbe {
  background: var(--kb-color);
}

Besten Dank im Voraus

Hi,

ich wollte nochmal höflich nachfragen, ob jemand eine Idee hat? Das Script wird ja von extern geladen, wenn ich das als Laie richtig verstehe und somit habe ich auch keinen Code auf der Seite, wo ich das anpassen könnte?

Wir gesagt, kenne mich damit nicht aus und komme nicht weiter. Wenn jemand eine Idee hat, wäre ich sehr dankbar.