Kurs HTML - skrypty (galeria grafik)







SPIS TREŚCI

Galeria grafik




Na wielu stronach w Internecie można spotkać galerię grafik, stosowaną do przedstawienia
kolekcji zdjęć, zwykle o dużych rozmiarach.
Najczęściej jest ona tworzona w ten sposób, że na głównej stronie umieszcza się
pomniejszone kopie obrazków oraz odsyłacze, po kliknięciu których następuje wczytanie
obrazka w pełnych rozmiarach. Pozwala to uchronić się od wczytywania wszystkich
dużych obrazków jednocześnie (użytkownik powiększa tylko te, które mu odpowiadają),
a także zachowuje estetykę strony.


Uwaga! Miniaturki grafik muszą być pomniejszone fizycznie, tzn. nie mogą to być
oryginalne duże obrazki z ustalonymi za pomocą atrybutów HTML zmniejszonymi rozmiarami (patrz powyżej).
Tylko wstawienie pomniejszonych obrazków uchroni od niepotrzebnego wczytywania dużych plików.


Zmniejszenia wymiarów obrazka można dokonać praktycznie w każdym programie graficznym.
Najczęściej ustala się takie same rozmiary dla wszystkich miniatur, ponieważ ułatwia to
utrzymanie estetyki strony.
Obrazki w galerii zwykle ustawia się w komórkach tabeli
(najczęściej bez obramowania), dzięki czemu można je dokładnie ustawić w rzędach i kolumnach.


Jeżeli zamierzasz umieścić na swojej stronie obszerniejszą galerię grafik, zaleca się
podzielenie jej na kilka części i stworzenie kilku podstron z miniaturkami.


Wczytanie oryginalnego dużego obrazka następuje najczęściej po kliknięciu bezpośrednio jego miniaturki.
Aby zastosować taki efekt, należy użyć odsyłacza obrazkowego (podstawowego).
Prawie zawsze stosuje się również atrybut TARGET="_blank",
który powoduje otwarcie nowego okna przeglądarki:


<A TARGET="_blank" HREF="ścieżka do strony z dużym obrazkiem"><IMG SRC="ścieżka do pliku miniaturki obrazka" BORDER="0"></A>



Jak łatwo zauważyć, aby stworzyć klasyczną galerię grafik, trzeba napisać tyle stron,
ile mamy obrazków - po jednej dla każdego dużego egzemplarza (a nawet o jedną więcej).
Można jednak uprościć tą procedurę, stosując specjalny skrypt, który automatycznie otwiera pliki w nowym oknie,
bez potrzeby tworzenia dodatkowych stron. Aby to zrobić, należy wstawić w treści nagłówkowej dokumentu
(w ramach HEAD) następujący tekst:


<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
// Autorem skryptu jest: SŁAWOMIR KOKŁOWSKI
// www.kurshtml.website.pl
// Jeśli chcesz wykorzystać ten skrypt na swojej stronie,
// nie usuwaj tego komentarza!


function wyswietl(plik, szerokosc, wysokosc)
{
// Atrybuty domyślne:
var domyslna_szerokosc = 0; // w pikselach
var domyslna_wysokosc = 0;
var kolor_tla = ""; // np.: "#FFFFFF" albo "white" itd.
var obramowanie = 1; // w pikselach


szerokosc = Math.abs(parseInt(szerokosc));
wysokosc = Math.abs(parseInt(wysokosc));
obramowanie = Math.abs(parseInt(obramowanie));
if (!szerokosc && domyslna_szerokosc) szerokosc = Math.abs(parseInt(domyslna_szerokosc));
if (!wysokosc && domyslna_wysokosc) wysokosc = Math.abs(parseInt(domyslna_wysokosc));

var start = plik.lastIndexOf('/');
var stop = plik.lastIndexOf('.');
if (stop < start) stop = plik.length;
var nazwa = plik.substring(start+1, stop);

var okno = window.open("", "", "menubar=no,toolbar=no,location=no,directories=no,status=no,resizable=yes,scrollbars=yes" + (szerokosc ? ",width=" + szerokosc : "") + (wysokosc ? ",height=" + wysokosc : ""));

okno.document.write('<!DOC'+'TYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">\n' +
'<HT'+'ML>\n' +
'<HE'+'AD>\n' +
'<ME'+'TA HTTP-EQUIV="Content-type" CONTENT="text/html; char'+'set=iso-8859-2">\n' +
'<TI'+'TLE>' + nazwa + '</TI'+'TLE>\n' +
'</HE'+'AD>\n' +
'<BO'+'DY' + (kolor_tla ? ' BGCOLOR="' + kolor_tla + '"' : '') + ' style="margin: 0">\n' +
'<TABLE BORDER="0" WIDTH="100%" HEIGHT="100%" CELLPADDING="0" CELLSPACING="0">\n' +
'<TR><TD ALIGN="center" VALIGN="center">\n' +
'<IMG SRC="' + plik + '"' + (obramowanie ? ' BORDER="' + obramowanie + '"' : '') + '>\n' +
'</TD></TR>\n' +
'</TABLE>\n' +
'</BO'+'DY>\n' +
'</HT'+'ML>');
}
//-->
</SCRIPT>


Jeśli chcemy, aby wszystkie nowe okna miały określoną szerokość, wysokość, kolor tła
albo szerokość obramowania wokół obrazka,
odpowiednie wartości można wpisać w zaznaczonych powyżej miejscach.
Wszystkie otwierane okna przyjmą podane rozmiary chyba, że w wywołaniu określimy
inaczej (patrz poniżej).


Jeżeli zamierzasz umieścić galerię grafik na więcej niż jednej stronie Twojego serwisu
(lub została ona podzielona na klika części),
zamiast wpisywać powyższy kod w treści nagłówkowej, można go zapisać w zewnętrznym pliku
z rozszerzeniem *.js. Należy jedynie pamiętać, aby koniecznie usunąć z niego wtedy
dwie pierwsze i dwie ostatnie linijki!
Jeśli zapiszesz skrypt w zewnętrznym pliku, w treści nagłówkowej poszczególnych podstron galerii wystarczy wpisać:


<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="galeria.js"></SCRIPT>


gdzie "galeria.js" to lokalizacja
stworzonego przed momentem pliku.
Zauważ, że plik "galeria.js" jest zapisywany tylko jeden raz,
a potem można się do niego odwoływać z różnych dokumentów,
dzięki czemu nie trzeba wielokrotnie powtarzać tego samego kodu.



Następnie w odpowiednim miejscu na stronie trzeba wpisać:


<A TARGET="_blank" HREF="ścieżka do dużego obrazka" onclick="wyswietl('ścieżka do dużego obrazka'); return false"><IMG SRC="ścieżka do miniaturki obrazka" BORDER="0"></A>


gdzie "ścieżka do dużego obrazka" jest już lokalizacją
właściwego obrazka, a nie strony HTML na której miałby się on znajdować. Dzięki takiemu rozwiązaniu nie trzeba
tworzyć osobnej strony dla każdego dużego rysunku w galerii, ponieważ odnośniki prowadzą bezpośrednio do samych
plików obrazków.


Możliwe jest również wykorzystanie zwykłego odnośnika tekstowego zamiast obrazkowego.
Dzięki temu na jednej stronie można przygotować kilka wersji obrazka, dla różnych
rozdzielczości ekranu. Tak właśnie jest w większości dobrych serwisów z tapetami komputerowymi.


<A TARGET="_blank" HREF="ścieżka do dużego obrazka" onclick="wyswietl('ścieżka do dużego obrazka'); return false">Tu podaj opis odnośnika (np. rozdzielczość obrazka)</A>


Rozmiary okna, w którym zostanie wyświetlony pełnowymiarowy obrazek, domyślnie zależą od ustawień użytkownika
i mogą zupełnie nie odpowiadać naszym oczekiwaniom. Jeśli chcemy dopasować rozmiary otwieranego okna
do wymiarów obrazka, to w odpowiednim miejscu na stronie można wpisać:


<A TARGET="_blank" HREF="ścieżka do dużego obrazka" onclick="wyswietl('ścieżka do dużego obrazka', szerokość, wysokość); return false"><IMG SRC="ścieżka do miniaturki obrazka" BORDER="0"></A>


gdzie "szerokość" i "wysokość" to odpowiednie wymiary w pikselach, jakie przyjmie nowe okna (nie wymiary obrazka!).
Jeżeli większość okien ma mieć takie same rozmiary, lepiej umieścić odpowiednie definicje
w pierwszej części kodu (nagłówkowego), a później stosować poprzednią metodę otwierania
okna - już bez argumentów dodatkowych.


Uważaj! Jeśli prowadzisz stronę np. z tapetami komputerowymi dla różnych rozdzielczości ekranu,
a będziesz chcieć otworzyć obrazek o rozmiarach np. 1024x768 i podasz takie wymiary nowego okna, użytkownicy
z mniejszą rozdzielczoścą ekranu będą mieli duży problem z zobaczeniem całego rysunku.
Ustalaj wymiary tylko dla małych obrazków - takich które swobodnie mieszczą się w najniższych rozdzielczościach!


Przykład:
Kliknij poniższy obrazek:


(obrazek powinien być miniaturową wersją oryginału).

A poniżej przykład z wykorzystaniem zwykłego odsyłacza i zmianą rozmiarów okna:
Wyświetl obrazek





Blokada zapisu
Jeżeli na swojej stronie chcesz udostępnić galerię zdjęć, ale tylko do wglądu bez możliwości zapisu obrazów,
można to zrobić dopisując do kodu nagłówkowego skryptu odpowiednie polecenia (patrz poniżej na wyróżniony tekst).
Rozwiązanie takie oczywiście jest bezsensowne w serwisach oferujących np. galerie tapet na pulpit - po co
komu tapety, których nie można pobrać. Dodatkowo należy pamiętać, że zabezpieczenie to może być
jedynie utrudnieniem dla osób niewtajemniczonych. Jeśli ktoś zna HTML choćby w stopniu podstawowym,
raczej nie powinien mieć problemów ze złamaniem blokady. Ponadto skrypt działa tylko
w nowszych wersjach Internet Explorera i Netscape'a, nie działa natomiast np. w Operze 7.


<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
// Autorem skryptu jest: SŁAWOMIR KOKŁOWSKI
// www.kurshtml.website.pl
// Jeśli chcesz wykorzystać ten skrypt na swojej stronie,
// nie usuwaj tego komentarza!


function wyswietl(plik, szerokosc, wysokosc)
{
// Atrybuty domyślne:
var domyslna_szerokosc = 0; // w pikselach
var domyslna_wysokosc = 0;
var kolor_tla = ""; // np.: "#FFFFFF" albo "white" itd.
var obramowanie = 1; // w pikselach


szerokosc = Math.abs(parseInt(szerokosc));
wysokosc = Math.abs(parseInt(wysokosc));
obramowanie = Math.abs(parseInt(obramowanie));
if (!szerokosc && domyslna_szerokosc) szerokosc = Math.abs(parseInt(domyslna_szerokosc));
if (!wysokosc && domyslna_wysokosc) wysokosc = Math.abs(parseInt(domyslna_wysokosc));

var start = plik.lastIndexOf('/');
var stop = plik.lastIndexOf('.');
if (stop < start) stop = plik.length;
var nazwa = plik.substring(start+1, stop);

var okno = window.open("", "", "menubar=no,toolbar=no,location=no,directories=no,status=no,resizable=yes,scrollbars=yes" + (szerokosc ? ",width=" + szerokosc : "") + (wysokosc ? ",height=" + wysokosc : ""));

okno.document.write('<!DOC'+'TYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">\n' +
'<HT'+'ML>\n' +
'<HE'+'AD>\n' +
'<ME'+'TA HTTP-EQUIV="Content-type" CONTENT="text/html; char'+'set=iso-8859-2">\n' +
'<TI'+'TLE>' + nazwa + '</TI'+'TLE>\n' +
'</HE'+'AD>\n' +
'<BO'+'DY' + (kolor_tla ? ' BGCOLOR="' + kolor_tla + '"' : '') + ' style="margin: 0" oncontextmenu="alert(\'Wszelkie prawa zastrzeżone!\'); return false" onselectstart="return false" onselect="return false" ondragstart="return false" ondrag="return false">\n' +
'<TABLE BORDER="0" WIDTH="100%" HEIGHT="100%" CELLPADDING="0" CELLSPACING="0">\n' +
'<TR><TD ALIGN="center" VALIGN="center">\n' +
'<IMG SRC="' + plik + '"' + (obramowanie ? ' BORDER="' + obramowanie + '"' : '') + '>\n' +
'</TD></TR>\n' +
'</TABLE>\n' +
'</BO'+'DY>\n' +
'</HT'+'ML>');
}
//-->
</SCRIPT>