jQuery: szara strona

Autor: Arkadiusz Tobiasz 11 kwietnia 2010

W związku z sobotnimi wydarzenia i tygodniową żałobą narodową dużo serwisów internetowych „przyjęło” na ten czas żałobne kolory, czyli odcienie szarości. Dzisiejszy wpis, choć nie przewidywałem, że kiedykolwiek powstanie jest poświęcony właśnie „wprowadzeniu” takiej żałoby na naszej stronie. Wykorzystamy do tego plugin jQuery, który nazywa się „Grayscale”.

Zanim jednak o samym pluginie, to kilka słów tytułem wstępu. Jednym z rozwiązań na wprowadzenie na swojej stronie ocieni szarości jako oznaka żałoby wydaje się dostosowanie odpowiednio swojego stylu CSS oraz wszystkich obrazków wykorzystywanych na stronie. Rozwiązanie to jednak jest bardzo pracochłonne. Można również zastosować w arkuszu stylu CSS odpowiedni filtr, poprzez dodanie kodu:

1
2
3
* {
filter: gray;
}

Jednak rozwiązanie takie ma jedną podstawową wadę. Filtry są obsługiwane tylko przez przeglądarkę Internet Explorer, a co za tym idzie nasza strona będzie normalnie wyglądać pod innymi przeglądarkami. Jeśli nasza strona w 99% jest oglądana z wykorzystaniem IE, to można zastosować takie rozwiązanie, w przeciwnym razie należy zastanowić się nad innym rozwiązaniem.

Ja wykorzystam w tym celu plugin jQuery o nazwie „Grayscale”, który możecie pobrać stąd. Pamiętaj, że aby z niego skorzystać musisz mieć pobraną bibliotekę jQuery! Pliki te umieszczamy w głównym katalogu naszej strony.

Rozpoczynamy od umieszczenia w sekcji <head>…</head> odwołań do ściągniętych plików:

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"  type="text/javascript"></script> <script src="grayscale.js" type="text/javascript"></script>

To już prawie wszystko. Za zamianę kolorów i obrazków na naszej stronie na ich szare odpowiedniki odpowiada funkcja grayscale() w załączonym pliku grayscale.js. Pozostaje jedynie kwestia włączenia i wyłączenia funkcji. Wszystko również odbywa się w sekcji <head>…</head>. Jeśli chcemy włączyć efekt szarości na całej stronie wstawiamy kod:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(document).ready(function() {
    $(".lightbox").lightbox({
                fitToScreen: true
            });
    grayscale( $('body') );

});
</script>

W przypadku chęci poszarzenia wszystkich divów w szóstą linijkę podmieniamy na:

1
grayscale( $('div') );

Możemy również przywrócić naszą stronę do poprzednich kolorów za pomocą poniższego kodu:

1
2
3
4
5
6
7
8
<script type="text/javascript">
$(document).ready(function() {
    $(".lightbox").lightbox({
                fitToScreen: true
            });
grayscale.reset( $('div') );
});
</script>

Przykład wykorzystania tej funkcji możecie znaleźć tutaj.

komentarze 2

  1. Kamil napisał(a):

    Szkoda że nie działa pod innymi przeglądarkami. Wygląda na to, że nie ma dobrego i szybkiego rozwiązania.

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]