Podgląd kart dla webmasterów

Jeżeli masz własną stronę internetową, prowadzisz forum lub piszesz bloga związanego z Magic: the Gathering, możesz wykorzystać nasz kod JavaScript!

Dzięki niemu możesz w banalny sposób wyświetlać na swojej własnej stronie estetyczny i przesuwalny podgląd jakichkolwiek kart MTG - zupełnie tak, jak w naszym sklepie. Każdy użytkownik Twojego serwisu będzie mógł obejrzeć wszystkie karty Magic: the Gathering, które kiedykolwiek ujrzały światło dzienne za pomocą jednego kliknięcia. I to nie opuszczając Twojej strony!!!

Zapoznaj się z poniższą instrukcją. Instalacja kodu potrzebnego do uruchomienia jest naprawdę prosta - tylko trzy kroki - i zajmie Ci najwyżej dwie minuty!

Tuż pod instrukcją instalacji znajdują się przykłady użycia kodu na własnej stronie.

Instrukcja instalacji kodu

Krok 1.

Tuż przed zamknięciem tagu </HEAD> (tzn. przed końcem sekcji nagłówka) wstaw poniższy kod:

Krok 2.

Tuż po rozpoczęciu tagu <BODY> wstaw:

<div id="MTGNetTop"><h1>(C) MTGNet.pl. Single Magic: the Gathering.</h1></div>
<script type="text/javascript">
	MTGNet_initTop();
	MTGNet_cards.init(5);
</script>

Zawartość powyższego znacznika nie będzie widoczna podczas wyświetlania Twojej strony.

Ta warstwa jest konieczna do poprawnego działania skryptów.

Zamiast liczby 5 w drugiej linijce skryptu możesz wstawić jakąkolwiek liczbę. Tyle będzie można u Ciebie mieć jednocześnie aktywnych podglądów kart na ekranie.

Krok 3.

Gdziekolwiek w kodzie swojej strony (oczywiście pomiędzy <BODY>, a </BODY>) wtaw:

<div id="MTGNetCardInfo">
	<div id="MTGNet_overDiv" style="position:absolute; z-index:1000;"></div>
	<div id="MTGNet_divCardView" class="divCardViewFrame"></div>
	<a class="MTGNetCardInfoLink" 
		style="visibility: visible; display: inherit;" 
		href="http://www.mtgnet.pl/magic/code/">MTGNet. Sklep: karty MTG</a>
</div>
<script type="text/javascript">
	MTGNet_cards.init(5);
</script>

Po wstawieniu powyższego kodu będzie on widoczny jako tekstowy link do naszego sklepu (jak poniżej):

MTGNet. Sklep: karty MTG

Wstaw go w miejsce, w którym będzie dobrze komponował się z resztą Twojej witryny.

Nie zależy nam na tym, żeby link znajdował się w centralnym, czy inaczej eksponowanym miejscu Twojej strony. Jednak musi być on widoczny. Jeżeli chcesz nadać mu swoją kolorystykę, czy ustalić czcionkę, wystarczy, że zdefiniujesz styl CSS dla a.MTGNetCardInfoLink. Możesz również definiować styl dla div#MTGNetCardInfo aby edytować wygląd kontenera, w którym znajduje się link.

I to już wszystko!

Jeżeli postępowałeś zgodnie z instrukcją i nie dokonałeś żadnych zmian w powyższych kodach, możesz już zacząć korzystać z podglądu!!!

Zauważ, że ta strona (ta, którą właśnie oglądasz) została również skonstruowana dokładnie według powyższych wskazówek. Możesz obejrzeć jej źródło, jeżeli masz jakieś wątpliwości.

Uwaga: Jeżeli ingerowałeś w kod, musisz liczyć się z tym, że podgląd nie będzie działał.

Przykłady użycia

Wyświetlanie karty w miejscu kliknięcia

Counterspell z dodatku Tempest

<a href="javascript:void(null);" onclick="MTGNetCardShowM(event, 'Counterspell', 'TP');">Counterspell z dodatku Tempest</a>

Gdy znana jest Ci nazwa oraz edycja/dodate, używasz funkcji MTGNetCardShowM.

W pierwszym parametrze musisz wpisać słowo "event". Posłuży to przeglądarce do ustalenia aktualnej pozycji myszki.

Drugi parametr to nazwa karty.

Trzecim parametrem jest skrótowa nazwa edycji / dodatku wg notacji przyjętej w MTGNet.pl.

Losowy Spirit Link

<a href="javascript:void(null);" onclick="MTGNetCardShowM(event, 'Spirit Link');">Losowy Spirit Link</a>

Kiedy chcesz wyświetlić kartę nie znając edycji / dodatku, z której pochodzi, lub nie jest to dla Ciebie ważne, wystarczy, że pominiesz trzeci parametr funkcji MTGNetCardShowM.

Losowa karta

<a href="javascript:void(null);" onclick="MTGNetCardShowM(event);">Losowa karta</a>

Aby wyświetlić losową kartę użyj funkcji MTGNetCardShowM jedynie z pierwszym parametrem.

Zwróć uwagę, że taki link (zresztą podobnie, jak wszystkie pozostałe) wyświetla karty za każdym naciśnięciem! W tym przypadku to bardzo ciekawy efekt.

Wyświetlanie karty w okolicach ustalonego obiektu

CEL

Morphling nad celem

<a href="javascript:void(null);" onclick="MTGNetCardShowO('fixedExampleObj', 'Morphling', '', -120, -350);">Morphling nad celem</a>

Jeżeli chcesz wyświetlić kartę w pobliżu ustalonego obiektu, skorzystaj z funkcji MTGNetCardShowO.

W pierwszym parametrze podajesz ID elementu, do którego będziesz równał kartę.

Drugi i trzeci parametr to kolejno nazwa karty i edycja / dodatek.

Ostatnie dwa parametry oznaczają przesunięcie poziome i pionowe lewego górnego rogu karty w stosunku do lewego górnego rogu elementu docelowego. Możesz je pominąć - w takim przypadku lewy górny róg karty będzie w miejscu lewego górnego rogu elementu docelowego (przesunięcia = 0).

Wyświetlanie karty w pozycji absolutnej

Absolute Grace absolutnie wypozycjonowana

<a href="javascript:void(null);" onclick="MTGNetCardShowXY(300, 300, 'Absolute Grace', '');">Absolute Grace absolutnie wypozycjonowana</a>

Zauważ, że po kliknięciu nie widać karty ;) A to dlatego, że znajduje się ona 300 pikseli w prawo i w dół od górnego lewego narożnika tej strony. Przewiń stronę, żeby uwierzyć!

Użytą tutaj funkcję MTGNetCardShowXY przy odrobinie wyobraźni i minimum znajomości JavaScriptu możesz zastosować do animacji!

Problem apostrofu

Kamahl's desire wyslashowana

<a href="javascript:void(null);" onclick="MTGNetCardShowM(event, 'Kamahl\'s Desire', '');">Kamahl's desire wyslashowana</a>

Niektóre karty mają w nazwie apostrof. Nie można ich w ten sposób niestety przekazać jako parametr do funkcji JavaScript. Każdy z apostrofów należy, jak powyżej, poprzedzić znakiem \.

Prosty podgląd wszystkiego

Dzięki tak krótkiemu kodowi można uruchomić podgląd dowolnej karty o wpisanej nazwie. Pozostawienie pola pustego spowoduje wyświetlenie losowej karty.

Możliwości

Oczywiście powyższe przykłady nie opisują nawet części możliwości wykorzystania naszej biblioteki. Wszystko zależy tutaj głównie od Twojej inwencji. Możesz tworzyć katalogi kart, wizualizować decki i całe kolekcje, możesz sprzęgać podgląd karty nie tylko z linkami - możesz tworzyć miniaturki, animować karty, dodawać efekty fade, a nawet pokusić się o stworzenie gry!

Cokolwiek postanowisz, daj nam o tym znać. Chętnie zobaczymy naszą bibliotekę w akcji!

Na zakończenie

To już wszystko. Mamy nadzieję, że nasza biblioteka okaże się być pomocna i sprawi, że Twoja strona zyska na oglądalności.

Dołożyliśmy wszelkich starań, aby kod działał poprawnie na wszystkich przeglądarkach, na których działa MTGNet.pl. Jeżeli masz jakiekolwiek uwagi do funkcjonowania naszego kodu, skorzystaj z formularza kontaktowego - chętnie poznamy Twoją opinię!

Ekipa MTGNet.pl