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.

Popularity: 2%

Odpowiedz

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





Zend Framework: gwiazdka przy wymaganych polach

W przypadku wymaganych pól w formularzach najczęściej oznacza się je poprzez dodanie gwiazdki. W tym wpisie chciałbym pokazać w jaki [...]

MySQL: GROUP_CONCAT

Ostatnio zostałem poproszony, aby na liście zamówień w sklepie PrestaShop wyświetlić listę produktów, które zostały sprzedane. Oczywiście można by było [...]

Zend Framework: jak zwiększyć wartość o 1 w bazie danych?

Ostatnio wykonując projekt w Zend Framework musiałem zwiększyć wartość kolumny pewnego rekordu o jeden. Oczywiście można by było wykonać najpierw [...]

PHP: Skracanie długich linków

Czasem w komentarzach ktoś może wstawić długi link, który może rozciągnąć naszą stronę. Jednym z rozwiązań jest skrócenie linku. Przykładowo [...]