Wymagana wiedza

• Konstruowanie ścieżek dostępu do obrazków
• Podstawy stylów CSS (m.in. arkusze stylów)
• Odsyłacze do podstrony

Przykład przeglądarki zdjęć

Skrypt przeglądarki zdjęć

Aby uzyskać powyższy efekt, należy zapisać przedstawiony poniżej kod w dowolnym pliku z rozszerzeniem *.js - np. przegladarka_zdjec.js:

/**
 * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl}
 * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
 */

function PrzegladarkaZdjec(id, zdjecia)
{
	this.czas = 5;	// czas przejścia w trybie pokazu slajdów [sek]
	
	
	this.id = id;
	this.zdjecia = zdjecia;
	var timerID = null;
	
	this.wyswietl = function(nr)
	{
		clearTimeout(timerID);		
		var f = document.getElementById(this.id);
		
		if (nr < 0) nr = f.elements['zdjecia'].options.length - 1;
		else if (nr > f.elements['zdjecia'].options.length - 1) nr = 0;
		
		if (nr == 0)
		{
			f.elements['poczatek'].disabled = true;
			f.elements['wstecz'].disabled = true;
			f.elements['dalej'].disabled = false;
			f.elements['koniec'].disabled = false;
		}
		else if (nr == f.elements['zdjecia'].options.length - 1)
		{
			f.elements['poczatek'].disabled = false;
			f.elements['wstecz'].disabled = false;
			f.elements['dalej'].disabled = true;
			f.elements['koniec'].disabled = true;
		}
		else
		{
			f.elements['poczatek'].disabled = false;
			f.elements['wstecz'].disabled = false;
			f.elements['dalej'].disabled = false;
			f.elements['koniec'].disabled = false;
		}
		
		f.elements['zdjecia'].selectedIndex = nr;
		document.getElementById(this.id + '__img').src = f.elements['zdjecia'].options[nr].value;
		document.getElementById(this.id + '__opis').innerHTML = typeof this.zdjecia[nr][2] != 'undefined' ? this.zdjecia[nr][2] : '';
		if (f.elements['auto'].checked) this.przewin();
	}
	
	this.przewin = function()
	{
		clearTimeout(timerID);
		var f = document.getElementById(this.id);
		if (f.elements['auto'].checked)
		{
			if (document.getElementById(this.id + '__img').complete) timerID = setTimeout(this.id + '.wyswietl(' + (f.elements['zdjecia'].selectedIndex < f.elements['zdjecia'].options.length - 1 ? f.elements['zdjecia'].selectedIndex + 1 : 0) + ')', this.czas * 1000);
			else timerID = setTimeout(this.id + '.przewin()', 500);
		}
	}
	
	var matches = window.location.search.match(new RegExp('[\?&]' + this.id + '=(-?[0-9]+)(&|$)'));
	if (matches && typeof matches[1] != 'undefined')
	{
		var auto = matches[1].substring(0, 1) == '-' ? true : false;
		matches[1] = parseInt(matches[1]);
		var nr = Math.abs(matches[1]);
		if (nr < 0) nr = 0;
		else if (nr > zdjecia.length - 1) nr = zdjecia.length - 1;
	}
	else
	{
		var nr = 0;
		var auto = false;
	}
	
	for (var i = 0, html = ''; i < zdjecia.length; i++)
	{
		html += '<option value="' + zdjecia[i][0] + '"' + (i == nr ? ' selected' : '') + '>' + zdjecia[i][1] + '</option>';
	}
	
	document.write(
		'<form action="javascript:void(0)" id="' + this.id + '" class="zdjecia">' +
			'<div class="zdjecia_menu">' +
				'<input type="button" name="poczatek" value="|&lt;&lt;"' + (nr == 0 ? ' disabled' : '') + ' title="Początek" onclick="' + this.id + '.wyswietl(0)" onkeypress="' + this.id + '.wyswietl(0)">' +
				'<input type="button" name="wstecz" value="  &lt;&lt;  "' + (nr == 0 ? ' disabled' : '') + ' title="Wstecz" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex - 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex - 1)">' +
				' <select name="zdjecia" onchange="' + this.id + '.wyswietl(this.selectedIndex)">' +
					html +
				'</select> ' +
				'<input type="button" name="dalej" value="  &gt;&gt;  "' + (nr == zdjecia.length - 1 ? ' disabled' : '') + ' title="Dalej" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex + 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex + 1)">' +
				'<input type="button" name="koniec" value="&gt;&gt;|"' + (nr == zdjecia.length - 1 ? ' disabled' : '') + ' title="Koniec" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].options.length - 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].options.length - 1)">' +
				'<div><input type="checkbox" name="auto"' + (auto ? ' checked' : '') + ' id="' + this.id + '__auto" onclick="' + this.id + '.przewin()" onkeypress="' + this.id + '.przewin()" style="vertical-align: middle"> <label for="' + this.id + '__auto">Pokaz slajdów</label></div>' +
			'</div>' +
			'<img id="' + this.id + '__img" src="' + zdjecia[nr][0] + '" alt="" title="Dalej..." onclick="' + this.id + '.wyswietl(document.getElementById(\'' + this.id + '\').elements[\'zdjecia\'].selectedIndex + 1)">' +
			'<div class="zdjecia_opis" id="' + this.id + '__opis">' + (typeof zdjecia[nr][2] != 'undefined' ? zdjecia[nr][2]: '') + '</div>' +
		'</form>'
	);
	
	if (auto) this.przewin();
}

Na początku, w wyróżnionym miejscu, można dodatkowo zmienić czas przejścia do następnego zdjęcia w trybie pokazu slajdów (liczony w sekundach). Czas ten jest liczony od momentu pełnego załadowania zdjęcia.

Następnie na stronie, gdzie ma być umieszczona przeglądarka zdjęć, należy w nagłówku dokumentu (wewnątrz <head>...</head>) wstawić:

<script src="przegladarka_zdjec.js"></script>

W wyróżnionym miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku przegladarka_zdjec.js. Teraz wystarczy wkleić na stronie w wybranym miejscu przykładowy kod:

<script>
var przegladarka_zdjec = new PrzegladarkaZdjec('przegladarka_zdjec', new Array(
	new Array('zdjęcie', 'Tytuł', 'Opis'),
	new Array('zdjęcie', 'Tytuł', 'Opis'),
	new Array('zdjęcie', 'Tytuł', 'Opis')
));
</script>

UWAGA!
Zwróć uwagę, że po każdym elemencie, wprowadzającym do przeglądarki kolejne zdjęcie ("zdjęcie, Tytuł, Opis"), oprócz ostatniego musi być postawiony przecinek. Pominięcie przecinka lub postawienie go po ostatnim elemencie spowoduje błędy w skrypcie i przeglądarka wcale się nie wyświetli!

Jak w każdym skrypcie JavaScript, w wartościach zmiennych ujętych w apostrofy (tutaj jest to Tytuł i Opis) nie wolno już używać apostrofów ("'") ani odwróconych ukośników ("\"). Jeżeli musimy ich użyć, należy poprzedzić je dodatkowym znakiem "\" - np. "\'", "\\". Poza tym wartości tych zmiennych muszą się znajdować w jednej linijce, tzn. absolutnie niedozwolone jest przełamywanie wiersza klawiszem Enter.

Zwróć również uwagę na wyróżnione wyrazy przegladarka_zdjec: muszą być one w obu miejscach dokładnie identyczne, a dodatkowo nie mogą zawierać znaków zabronionych w identyfikatorach, tj. innych niż angielskie litery, cyfry (ale nie na początku) i podkreślniki ("_").
Aby umieścić w jednym dokumencie kilka oddzielnych przeglądarek zdjęć, należy powtórzyć tylko powyższą część kodu, modyfikując w nim właśnie wyróżniony identyfikator przegladarka_zdjec - inny dla każdej przeglądarki.

Ostatni parametr jest nieobowiązkowy, tzn. można go pominąć:

new Array('zdjęcie', 'Tytuł')

W opisie można bez przeszkód używać znaczników HTML, np. aby wprowadzić formatowanie tekstu lub podzielić treść na akapity.

Ponadto aby odpowiednio wystylizować przeglądarkę zdjęć, można do niej dołączyć np. taki arkusz CSS:

.zdjecia {
	text-align: center;
}

.zdjecia_menu {
	margin-bottom: 10px;
	font-size: 10px;
}

.zdjecia_menu input, .zdjecia_menu select {
	font-size: 10px;
}

.zdjecia_opis {
	margin-top: 10px;
	text-align: justify;
}

Najwygodniej będzie zapisać go w osobnym pliku z rozszerzeniem *.css - np. przegladarka_zdjec.css i osadzić w nagłówku dokumentu za pomocą znacznika:

<link rel="stylesheet" href="przegladarka_zdjec.css">

Oczywiście można go również dołączyć do już istniejącego arkusza stylów serwisu.

Inicjalizacja

Czasami może zajść potrzeba wyświetlenia w przeglądarce zdjęć zaraz po załadowaniu strony zdjęcia innego niż pierwsze. W tym celu do strony, na której wstawiony jest skrypt, trzeba przejść poprzez odsyłacz, w którym przekazujemy wybrany numer zdjęcia w parametrze, tzn. po pytajniku zaraz po nazwie pliku:

nazwa_pliku.html?przegladarka_zdjec=numer_zdjecia

Wyróżniony wyraz przegladarka_zdjec musi być taki sam, jak identyfikator przeglądarki zdjęć podawany podczas jej tworzenia. Ponadto należy pamiętać, że numeracja zaczyna się od zera, a nie od jeden, tzn. pierwsze zdjęcie ma faktyczny numer 0, drugie - 1 itd.

Aby dodatkowo automatycznie uruchomić tryb pokazu slajdów, należy podać numer ujemny, np.:

nazwa_pliku.html?przegladarka_zdjec=-0