• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] grayscale on click

Status
Für weitere Antworten geschlossen.
janosh

janosh

Neues Mitglied
hallo...hätte da mal ein ganz einfaches anliegen. mein vorhaben ist, dass meine images, beim klicken, farbig dargestellt werden. in den desktopansicht geschieht es durch hovern.

nun folgendes problem: wenn ich auf eines meiner logos klicke, werden alle farbig. möchte aber, dass nur das angeklickte bunt wird. irgendwo muss in mein script, ein (this), vermute ich?!

Code: 
$(document).ready(function(){
  
$(".drei-spaltig img").click(function(){
  if($(window).outerWidth() < 639) {
  $(".drei-spaltig img").css('-webkit-filter','grayscale(0)').css('-moz-filter','grayscale(0)').css('-o-filter','grayscale(0)').css('filter','grayscale(0)');
  }
});
});
 
Zuletzt bearbeitet von einem Moderator:
Spicelab schrieb:
Code: 
$(this).css('-webkit-filter','grayscale(0)').css('-moz-filter','grayscale(0)').css('-o-filter','grayscale(0)').css('filter','grayscale(0)');
Zum Vergrößern anklicken....

oh...das war ja simple. vielen dank. nun hab ich aber noch die sorge, dass, ein logo, was durch klicken farbig wird, wieder grau werden soll, wenn ich ein anderes anklicke?!
 
janosh schrieb:
oh...das war ja simple. vielen dank. nun hab ich aber noch die sorge, dass, ein logo, was durch klicken farbig wird, wieder grau werden soll, wenn ich ein anderes anklicke?!
Zum Vergrößern anklicken....

Besser wäre es wenn du mit Klassen statt inline-styles arbeiten würdest.
Dann könntest du auch Media Queries verwenden statt Pixelangaben im JS zu handeln.

Code: 
$(this).siblings().removeClass('grayscale');
$(this).addClass('grayscale');
 
scbawik schrieb:
Besser wäre es wenn du mit Klassen statt inline-styles arbeiten würdest.
Dann könntest du auch Media Queries verwenden statt Pixelangaben im JS zu handeln.

Code: 
$(this).siblings().removeClass('grayscale');
$(this).addClass('grayscale');
Zum Vergrößern anklicken....

klingt spannend...aber wie müsste dann die komplette funktion aussehen? und ich arbeite ja mit media queries. aber wenn ich jetzt eine klasse "grayscale" anlege, woher weiß js, dass es ab 640px, die logos nicht mehr durch klicken farbig machen soll?
 
janosh schrieb:
klingt spannend...aber wie müsste dann die komplette funktion aussehen?
Zum Vergrößern anklicken....

Dachte das wäre klar:
Code: 
$(".drei-spaltig img").click(function(){
  $(this).siblings().removeClass('grayscale');
  $(this).addClass('grayscale');
});

janosh schrieb:
aber wenn ich jetzt eine klasse "grayscale" anlege, woher weiß js, dass es ab 640px, die logos nicht mehr durch klicken farbig machen soll?
Zum Vergrößern anklicken....

In dem du einfach die entsprechende Klasse erst in der Media Query definierst:
Code: 
@media all and (max-width: 640px) {
  .grayscale {
    filter:grayscale(100%);
  }
}

Die Klasse wird dann zwar immer hinzugefügt, hat jedoch erst bei <= 640 Pixel eine Auswirkung.

Edit: Habe gerade bemerkt dass du ja standardmäßig alles grau haben willst und erst beim Klick farbig. Hatte es jetzt umgekehrt beschrieben. Daher wäre der richtige Weg natürlich eine Klasse .colorize mit grayscale(0). Vom Prinzip bleibt es aber das gleiche.
 
scbawik schrieb:
Dachte das wäre klar:
Code: 
$(".drei-spaltig img").click(function(){
  $(this).siblings().removeClass('grayscale');
  $(this).addClass('grayscale');
});



In dem du einfach die entsprechende Klasse erst in der Media Query definierst:
Code: 
@media all and (max-width: 640px) {
  .grayscale {
    filter:grayscale(100%);
  }
}

Die Klasse wird dann zwar immer hinzugefügt, hat jedoch erst bei <= 640 Pixel eine Auswirkung.

Edit: Habe gerade bemerkt dass du ja standardmäßig alles grau haben willst und erst beim Klick farbig. Hatte es jetzt umgekehrt beschrieben. Daher wäre der richtige Weg natürlich eine Klasse .colorize mit grayscale(0). Vom Prinzip bleibt es aber das gleiche.
Zum Vergrößern anklicken....

pardon...bin anfänger. aber so hatte ich das script auch umgeschrieben. schien mir nur wieder zu einfach. ich probiers mal.

EDIT: ich kriegs nicht hin. bin jetzt auch etwas verwirrt und ich habe bisher immer mit min-width gearbeitet. dann muss ich ja noch einmal umdenken.
 
janosh schrieb:
pardon...bin anfänger. aber so hatte ich das script auch umgeschrieben. schien mir nur wieder zu einfach. ich probiers mal.

EDIT: ich kriegs nicht hin. bin jetzt auch etwas verwirrt und ich habe bisher immer mit min-width gearbeitet. dann muss ich ja noch einmal umdenken.
Zum Vergrößern anklicken....

meine funktion sieht nun so aus:

Code: 
$(".drei-spaltig img").click(function(){
  $(this).siblings().removeClass('colorize');
  $(this).addClass('colorize');
});

meinen imgages hab ich die klasse "colorize" gegeben und bevor der 1. media-querie mit min-width 640px kommt, hab ich geschrieben:

CSS: 
.colorize{
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  filter: grayscale(1);
}
 
Zuletzt bearbeitet von einem Moderator:
janosh schrieb:
meine funktion sieht nun so aus:

$(".drei-spaltig img").click(function(){
$(this).siblings().removeClass('colorize');
$(this).addClass('colorize');
});

meinen imgages hab ich die klasse "colorize" gegeben und bevor der 1. media-querie mit min-width 640px kommt, hab ich geschrieben:

.colorize{
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
filter: grayscale(1);
}
Zum Vergrößern anklicken....

So, dann überprüfe erst einmal via Developer Tools (http://webmasters.stackexchange.com...-the-javascript-console-in-different-browsers) ob die JS Funktion die Klassen richtig vergibt.

Wenn nicht, ersetze ".siblings()" mit ".closest('.drei-spaltig').find('img')".

Und zum CSS, das müsste in dem Fall so aussehen:

CSS: 
/* alle Bilder grau */
img {
  filter: grayscale(100%);
}

/* grau bei allen Elementen mit .colorize aufheben */
.colorize {
  filter: grayscale(0);
}

@media all and (min-width: 641px) {
  /* grau bei > 640 wieder anwenden */
  .colorize {
    filter:grayscale(100%);
  }
}

Und wenn das alles nicht klappt, poste einen Link zur Seite, sonst wird das nichts...
 
Zuletzt bearbeitet:
scbawik schrieb:
So, dann überprüfe erst einmal via Developer Tools (http://webmasters.stackexchange.com...-the-javascript-console-in-different-browsers) ob die JS Funktion die Klassen richtig vergibt.

Wenn nicht, ersetze ".siblings()" mit ".closest('.drei-spaltig').find('img')".

Und zum CSS, das müsste in dem Fall so aussehen:

CSS: 
/* alle Bilder grau */
img {
  filter: grayscale(100%);
}

/* grau bei allen Elementen mit .colorize aufheben */
.colorize {
  filter: grayscale(0);
}

@media all and (min-width: 641px) {
  /* grau bei > 640 wieder anwenden */
  .colorize {
    filter:grayscale(100%);
  }
}

Und wenn das alles nicht klappt, poste einen Link zur Seite, sonst wird das nichts...
Zum Vergrößern anklicken....

es tut sich nichts. hab auch sicher nicht alles korrekt vergeben. is mir zwar schon etwas peinlich, die website zu zeigen. es soll aber auch nichts davon so bleiben, wie man es jetzt sieht. fang ja grade erst mit der umsetzung an. an den header und der navi wollt ich mich dranmachen, wenn das mit den logos klappt. vielleicht hast du ja noch 'ne idee, wie ich die logos alle vertikal zentriert bekomme, ohne sie als background-image einfügen zu müssen?!

[Link auf Wunsch entfernt]
 
Zuletzt bearbeitet von einem Moderator:
janosh schrieb:
meine funktion sieht nun so aus:

Code: 
$(".drei-spaltig img").click(function(){
  $(this).siblings().removeClass('colorize');
  $(this).addClass('colorize');
});
Zum Vergrößern anklicken....
Ohne zu wissen, was genau nicht funktioniert, nur ins blaue geraten :rolleyes:

Wenn da mal nicht das jQuery-Script sich im Dokumentheader befindet, und nun entgegen dem eingangs gezeigten Script $(document).ready(function(){ ... } fehlt.

Besser die Scripts immer am Dokumentende unmittelbar vor </body> aufrufen.
 
Spicelab schrieb:
Ohne zu wissen, was genau nicht funktioniert, nur ins blaue geraten :rolleyes:

Wenn da mal nicht das jQuery-Script sich im Dokumentheader befindet, und nun entgegen dem eingangs gezeigten Script $(document).ready(function(){ ... } fehlt.

Besser die Scripts immer am Dokumentende unmittelbar vor </body> aufrufen.
Zum Vergrößern anklicken....

hab meine skripte immer im kopf eingebunden. funktioniert so auch ganz gut, obwohl ich es schon öfter gehört hab, dass es lieber nach unten soll?!
 
janosh schrieb:
hab meine skripte immer im kopf eingebunden. funktioniert so auch ganz gut, obwohl ich es schon öfter gehört hab, dass es lieber nach unten soll?!
Zum Vergrößern anklicken....

Ja immer nach unten, dann kann man sich .ready() sparen, aber daran liegt es jetzt nicht.
Ich bin von einer anderen HTML Struktur ausgegangen.
Code: 
$(".drei-spaltig img")
statt
Code: 
$(this).siblings()

dann passt es vom JS her. Der Rest ist CSS.

Problem ist dass ".drei-spaltig img" höhere Priorität hat als nur ".colorize" - in den Developer Tools ganz einfach nachzuvollziehen. Deshalb ".drei-spaltig .colorize".
 
Spicelab schrieb:
https://api.jquery.com/siblings/ sucht nämlich nach Geschwisterelementen, die es so in Deinem Markup überhaupt nicht gibt.

Übrigens hat sich im CSS ein Tippfehler dazugesellt:
CSS: 
.colorsize:hover {}
Zum Vergrößern anklicken....

ich wer bekloppt...es funktioniert. vielen dank. inwieweit darf ich deine hilfbereitschaft denn strapazieren? hätte gerne noch, dass jedes logo, in seinem kästchen, vertikal zentriert ist? gibs da ne einfache lösung für?
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben