grayscale on click

[janosh]

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=jQuery]$(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)‘);
}
});
});[/code]

[SpiceLab]

@janosh

irgendwo muss in mein script, ein (this), vermute ich?!

$(this).css('-webkit-filter','grayscale(0)').css('-moz-filter','grayscale(0)').css('-o-filter','grayscale(0)').css('filter','grayscale(0)');

[janosh]

@Spicelab

$(this).css('-webkit-filter','grayscale(0)').css('-moz-filter','grayscale(0)').css('-o-filter','grayscale(0)').css('filter','grayscale(0)');

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?!

[scbawik]

@janosh

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?!

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.

$(this).siblings().removeClass('grayscale'); $(this).addClass('grayscale');

[janosh]

@scbawik

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.

$(this).siblings().removeClass('grayscale'); $(this).addClass('grayscale');

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?

[scbawik]

@janosh

klingt spannend…aber wie müsste dann die komplette funktion aussehen?

Dachte das wäre klar:

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

@janosh

aber wenn ich jetzt eine klasse „grayscale“ anlege, woher weiß js, dass es ab 640px, die logos nicht mehr durch klicken farbig machen soll?

In dem du einfach die entsprechende Klasse erst in der Media Query definierst:

@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.

[janosh]

@scbawik

Dachte das wäre klar:

$(".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:

@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.

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]

@janosh

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.

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); }

[scbawik]

@janosh

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);
}

So, dann überprüfe erst einmal via Developer Tools ( http://webmasters.stackexchange.com/questions/8525/how-to-open-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:

[CODE=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%);
}
}
[/CODE]

Und wenn das alles nicht klappt, poste einen Link zur Seite, sonst wird das nichts…

[janosh]

@scbawik

So, dann überprüfe erst einmal via Developer Tools ( http://webmasters.stackexchange.com/questions/8525/how-to-open-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:

[CODE=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%);
}
}
[/CODE]

Und wenn das alles nicht klappt, poste einen Link zur Seite, sonst wird das nichts…

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]

[SpiceLab]

@janosh

meine funktion sieht nun so aus:

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

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[SIZE=3] [SIZE=4]$(document).ready(function(){ … }[/SIZE][/SIZE] fehlt.

Besser die Scripts immer am Dokumentende unmittelbar vor aufrufen.

[janosh]

@Spicelab

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[SIZE=3] [SIZE=4]$(document).ready(function(){ … }[/SIZE][/SIZE] fehlt.

Besser die Scripts immer am Dokumentende unmittelbar vor aufrufen.

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?!

[scbawik]

@janosh

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?!

Ja immer nach unten, dann kann man sich .ready() sparen, aber daran liegt es jetzt nicht.
Ich bin von einer anderen HTML Struktur ausgegangen.

$(".drei-spaltig img")

statt

$(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]

@scbawik

Ich bin von einer anderen HTML Struktur ausgegangen.

$(".drei-spaltig img")

statt

$(this).siblings()

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:

.colorsize:hover {}

[janosh]

@Spicelab

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:

.colorsize:hover {}

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?