Tworzymy dodatek do iStocka

Wreszcie po długim czasie oczekiwania IstockPhoto przywróciło powiększanie zdjęć. Sama funkcjonalność przydaje się nie tylko do podglądania szczegółów zdjęć, ale także do pobierania do naszych wstępnych layoutów stocków w większej niż minimalna rozdzielczości, dzięki czemu możemy naszemu klientowi pokazać grafiki we wstępnych layoutach o wiele lepszej jakości.

Niestety okienko do poglądu grafiki na stocku jest całkiem małe, przez co pokazanie całego stocka w powiększeniu jest żmudną zabawą (printScreen->kopiuj->wklej) x nRazy (albo zwyczajnie olewamy sprawę i zostawiamy paskudne stocki)

Łatwo to można jednak naprawić., o czym przekonamy się już za moment.

Pierwszą rzeczą jest sprawdzenie źródła iStocka za pomocą Firebuga. Poza kilkoma błędami w html (podwójde ID itp)

stock-bledy

 

widzimy, że korzystają z jQuery. To nam ułatwi pracę. Okazuje się też, że okienko podglądu stocków można w bardzo łatwy sposób powiększyć zmieniając jego wymiary.

Dłubanie za każdym razem za pomocą Firebuga nie jest wygodne, szczególnie gdy jesteś grafikiem robiącym setki layoutów. Stwórzmy sobie więc dodatek do przeglądarki, który wykona całą robotę za nas.

Aby stworzyć taki dodatek wystarczy stworzyć nową zakładkę, a w jej adres wstawić kod w postaci:

javascript:(function() {....tutaj cały skrypt...})()

Jak widzisz, nasza zakładka przenosi (a raczej wywołuje) do javascript (podobnie jak zwykłe zakładki przenoszą w jakieś miejsca w necie).
Nawiasy umieszczone po definicji funkcji powodują, że od razu zostanie ona wywołana. To często stosowana technika w Javascript, która pasuje tutaj jak ulał. Oczywiście tradycyjna technika z wywołaniem funkcji poprzez jej nazwę też zda tutaj egzamin…

Adres naszej zakładki, tak samo jak reszta adresów w necie musi być podany jako jedna linijka.
Właśnie dlatego na początku napiszemy nasz skrypt, a potem spakujemy go do jednego wiersza. Bardzo dobrze sprawdza się w tym przypadku konsola Firebuga, która umożliwia nam sprawdzanie działanie naszego skryptu na bieżąco (będąc na stronie iStocka), oraz kompresor do skryptów, którym upakujemy nasz skrypt.

Domyślnie okienko do wpisywania skryptów w Firebugu jest zminimalizowane. Aby je powiększyć wystarczy kliknąć na mały trójkącik mieszczący się w dolnym prawym rogu konsoli Firebuga.

firebug-consola

Sam skrypt długi nie jest, bo polega tylko na zmianie rozmiarów okienka podglądu, oraz usunięciu przeszkadzających dodatków.

jQuery('#zoom-nav-tools').remove();
jQuery('#filesGrid').remove();
jQuery('#zoomnavigator').remove();
jQuery('#ZoomDroppableDiv').width(1600).height(1200).css('background','#fff');

Po napisaniu skryptu cały adres będzie wyglądał tak:

javascript:(function(){jQuery('#zoom-nav-tools').remove();jQuery('#filesGrid').remove();jQuery('#zoom-navigator').remove();jQuery('#ZoomDroppableDiv').width(1600).height(1200).css('background','#fff');})()

Dodawanie zakładki

Aby utworzyć zakładkę mamy dwie możliwości. Pierwszą jest kliknięcie prawym guzikiem na belce zakładek – tuż pod adresem strony (możesz jej nie mieć widocznej, wtedy podłub trochę w menu Widok->Paski narzędzi) i wybraniu z menu opcji „Nowa zakładka…”. W okienku które się pojawi w miejsce adresu docelowego wstawiamy nasz „jedno linijkowiec”.

Ale to jest ta gorsza metoda. Lepsza metoda polega na stworzeniu na stronie zwykłego linka, który prowadzi na nasz skrypt (czyli w miejsce href wstawiamy nasz skrypt). Wystarczy taki link przeciągnąć na belkę zakładek i mamy działający dodatek, a inni też mogą sobie skorzystać z niego skorzystać.

Jeżeli korzystasz z niektórych dodatków – np readability lub np css refresh, musisz wiedzieć, że stworzone są w ten sam sposób co i nasz dodatek. Różnica jest taka, że taki readability zamiast wstawiać cały skrypt w adres linka/zakładki wstawia tam skrypt tworzący odwołanie do skryptu na ich serwerze. Podejrzyj sobie źródło takiej zakładki a zrozumiesz o czym piszę :)

Odpalamy zakładkę

Po utworzeniu zakładki, wchodzimy na zdjęcie na iStocku, klikamy na jego podgląd aby włączyć jego powiększanie (może być wymagane zalogowanie się), po czym klikamy naszą zakładkę. I mamy mega duży podgląd :) Oczywiście sam skrypt można spokojnie usprawnić, ale nie to było celem tego artykułu.

Pozostaje przestać być samolubem i podzielić się naszym dodatkiem :) Bierzcie i korzystajcie z niego wszyscy,

Nasze dzieło, które sobie przeciągnij na zakładki

Komentarze

  • Konrad

    Chyba na firefoxie nie działa. Wydaje mi się że w firefoxie nie wpisuje się: javascript:(function(){jakis kod})() tylko cos innego ale nie wiem co.

  • Konrad

    W Firefoxie: ctrl + shift + K