EpicWEB.plwebdesign, programowanie, phat lewt!

Lightbox - 3 wielkości obrazka.

LightBox 2 to popularne rozwiązanie pozwalające na pokazywanie powiększeń zdjęć bez konieczności otwierania nowego okna. Poprzez osadzenie skryptu i prostą modyfikację już istniejącego kodu otrzymujemy galerię która działa od ręki.

Problemy pojawiają się dopiero kiedy chcemy zmodyfikować działanie. Klient zamówił w firmie wykonanie serwisu dla pośrednika w obrocie nieruchomości. Każda oferta zawiera zdjęcia w 3 wymiarach - miniaturka (1), zdjęcie główne (2) i zdjęcie powiększone. Po kliknięciu w miniaturkę ładuje się jej wersja "główna" w miejsce zdjęcia 2, zaś po kliknięciu w zdjęcie 2 ładuje się powiększenie Lightboxem. Dodatkowo, użytkownik ma możliwość nawigowania pomiędzy zdjęciami w Lightbox za pomocą dostarczanego przezeń interfejsu.

Jak już wspomniałem, Lightbox działa od ręki - wystarczy do linków od powiększeń obrazków dodać atrybut rel="lightbox" dla pojedynczego powiększenia, lub rel="lightbox" dla grupy powiększeń. Niestety, zachowanie do nadpisuje akcję onclick przez co psuje już działający mechanizm przejścia zdjęcia z pozycji 1 na 2. Rozwiązaniem jest modyfikacja pliku lightbox.js, a dokładniej funkcji start() i end() wywoływanych odpowiednio przed i po wyświetleniu powiększenia. Dodatkowo, obrazki, które chcemy umieścić w galerii nie powinny posiadać odnośnika z parametrem rel, akcja podmiany obrazka 2 na 1 powinna znajdować się w onclick obrazka oraz musimy mieć możliwość ich łatwej identyfikacji (np. przez nadanie ich odnośnikom klasy isLightbox). Ok, zabieramy się za modyfikowanie lightbox.js:

//Zmodyfikowana metoda start():

start: function(imageLink) {    
        var im = document.getElementsByTagName('A');
        for(var i = 0, j = im.length ; i < j ; i++) {
                        if(im[i].className == 'isLightbox') im[i].setAttribute('rel', 'lightbox[1]');
        }
        this.updateImageList();
        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
// dalsza część bez zmian

//Zmodyfikowana metoda end():
end: function() {
        var im = document.getElementsByTagName('A');
        for(var i = 0, j = im.length ; i < j ; i++) {
                        if(im[i].className == 'isLightbox') im[i].setAttribute('rel', '');
        }
        this.updateImageList();
// dalsza część bez zmian

Pierwsza dokonana przez nas modyfikacja oznaczy wybrane obrazki jako korzystające z Lightbox oraz zaktualizuje kolekcję zdjęć w galerii. Druga zaś usunie oznaczenia i ponownie zaktualizuje kolekcję, co pozwoli nam na przywrócenie funkcjonalności ładowania powiększenia do widoku 2.

Zapewne jest łatwiejszy sposób na odnalezienie obrazków niż getElementsByTagName ale niestety nie używam Scriptaculous więc zastosowałem proste (i pewnie mało wydajne) rozwiązanie.

Video-portfolio Stargate Studios

Zapewne nie jeden raz wracaliście z kina mówiąc, że efekty specjalne były na tak niskim poziomie, że widać było słaby rendering albo potwory wyglądały jak te ze wczesnych Godzilli. Takie efekty, to i Wy mogli byście zrobić. Prawda?

To zobaczcie, ile z tych efektów przegapiacie:

Oglądałem ten filmik parę razy i po prostu nie mogę wyjść z wrażenia. Dzięki goshki za linka :)

Google Browser Size

Każdy, kto interesuje się kulturą pracy w Google wie, że pracownicy mogą poświęcić 20% swojego dnia pracy na rzeczy nie związane z ich głównym zajęciem takie jak tworzenie nowych produktów lub praca w innych zespołach. Oczywiście wszelkie stworzone w ten sposób projekty stają się automatycznie własnością Google, ale to już inna sprawa.

Jednym z efektów pracy w 20% jest Google Browser Size. Stwierdzić, że jest to prosta aplikacja jest lekkim nadużyciem - jest to diabelnie prosta aplikacja.

Zadaniem Browser Size jest pokazanie jaką część strony widzą użytkownicy różnych rozdzielczości ekranów bez konieczności przesuwania strony. Dodatkowo widzimy procentową ilość osób, które zobaczą elementy mieszczące się w oknie przeglądarki (uwaga, nie jest to wartość informująca, ile osób używa danej rozdzielczości - informuje ile osób przegląda stronę z oknem przeglądarki - a dokładniej oknem dokumentu - w tym lub wyższym rozmiarze ^[1]).

Osobiście uważam, że narzędzie to nie będzie się cieszyć dużym powodzeniem - po pierwsze nie bierze pod uwagę tego, że większość stron jest centrowana, przez co efekt pomiaru jest zniekształcony (poprawia się to, jeżeli przeskalujemy okno przeglądarki), a po drugie decyzja o tym, gdzie umiejscowić dany element powinna być podejmowana już na etapie tworzenia grafiki serwisu przez webdesignerów, a nie w momencie kodowania strony.

^[1] edycja, zgodnie ze stroną O Projekcie jest to wielkość okna, a nie rozdzielczość

Drobna zmiana przyzwyczajeń, duży wzrost wydajności pracownika.

Jako iż co raz większymi krokami zbliża się deadline większego projektu, szef poprosił mnie o zostawanie dłużej po pracy. Nie lubię pracować dłużej niż do 16, więc do pracy chodzę na 6-tą, kiedy większość z was przewraca się na kolejny boczek ;-)

Rozpoczęcie pracy 2 godziny przed innymi ma na mnie zbawienny wpływ - nagle nic mnie nie rozprasza, mogę spokojnie kończyć rzeczy, które po 8 zajmują mi parę razy więcej czasu - a to się ktoś o coś zapyta, zaprosi na herbatę czy opowie kawał. Wcześniej jestem ja i radio i praca idzie migiem.

Kolejna drobna zmiana to zakoszenie zakoszonego przez Marcina Kosedowskiego systemu TODO czyli Kółkowy system list. Wcześniej otoczony byłem masą kartek z kwadracikami, skreślonymi kwadracikami, zamazanymi kwadracikami, poprawionymi-by-wyróżniały-się-od-innych kwadracikami etc.

Teraz mam jedną lub dwie kartki z zamalowanymi kółkami. Naprawdę fajnie jest spojrzeć czasem na "fizyczną" reprezentację tego, jak nam idzie - widać ile jeszcze zostało( "(   ) poprawki dla IE6"), a ile już jest za nami.