Przejdź do treści

Galeria zdjęć

Skrypt galerii #

Stosując specjalny skrypt, który automatycznie otwiera pliki w nowym oknie bez potrzeby tworzenia dodatkowych stron, można zautomatyzować tworzenie galerii. Ponadto aktualizacja nie będzie w tym przypadku utrudniona - dodanie nowego zdjęcia będzie się wiązało tylko z dopisaniem jednej dodatkowej linijki bez potrzebny tworzenia całej galerii od nowa.

Wymagana wiedza:

Aby wstawić na stronę skrypt galerii zdjęć, należy zapisać przedstawiony poniżej kod w dowolnym pliku z rozszerzeniem *.js - np. galeria.js:

Zaznacz kod

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

function Galeria(id, zdjecia, css, ochrona, zaladuj)
{
	this.kolumny = 2;
	this.naStronie = 10;
	
	
	this.id = id;
	this.zdjecia = zdjecia;
	this.ochrona = typeof ochrona != 'undefined' ? ochrona : false;
	this.css = css;
	
	if (typeof zaladuj != 'undefined' && zaladuj)
	{
		for (var i = 0; i < this.zdjecia.length; i++)
		{
			new Image().src = this.zdjecia[i][0];
		}
	}
	
	this.wyswietl = function(strona)
	{
		if (typeof strona == 'undefined') strona = 1;
		var html = '';
		
		for (var i = start_ = (strona - 1) * this.naStronie, stop_ = Math.min(start_ + this.naStronie, this.zdjecia.length); i < stop_; i++)
		{
			if (i > start_ && !(i % this.kolumny)) html += '</tr><tr>';
			html +=
				'<td>' +
					'<a href="' + (this.ochrona ? 'javascript:void(0)' : this.zdjecia[i][1]) + '" onclick="return !' + this.id + '.pokaz(' + i + ')" onkeypress="return !' + this.id + '.pokaz(' + i + ')"><img src="' + this.zdjecia[i][0] + '" alt=""' + (this.ochrona ? ' onmousedown="return false" oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" galleryimg="no"' : '') + ' /></a>' +
					(typeof this.zdjecia[i][2] != 'undefined' ? '<div>' + this.zdjecia[i][2] + '</div>' : '') +
				'</td>';
		}
		if (html) html = '<table><tr>' + html + '</tr></table>';
		
		if (this.zdjecia.length > this.naStronie)
		{
			html += '<div class="stronicowanie">';
			if (strona > 1) html += '<a href="javascript:void(0)" onclick="' + this.id + '.wyswietl(' + (strona - 1) + '); return false" onkeypress="' + this.id + '.wyswietl(' + (strona - 1) + '); return false">&laquo;</a>';
			for (var i = 1, stop_ = Math.ceil(this.zdjecia.length / this.naStronie); i <= stop_; i++)
			{
				html += ' ' + (i == strona ? i : '<a href="javascript:void(0)" onclick="' + this.id + '.wyswietl(' + i + '); return false" onkeypress="' + this.id + '.wyswietl(' + i + '); return false">' + i + '</a>');
			}
			if (strona < stop_) html += ' <a href="javascript:void(0)" onclick="' + this.id + '.wyswietl(' + (strona + 1) + '); return false" onkeypress="' + this.id + '.wyswietl(' + (strona + 1) + '); return false">&raquo;</a>';
			html += '</div>';
		}
		
		document.getElementById(this.id).innerHTML = '<div class="galeria">' + html + '</div>';
	}
	
	this._pokaz = function(i)
	{
		var numer = (i + 1) + '/' + this.zdjecia.length;
		if (this.zdjecia.length < 2) var stronicowanie = '';
		else
		{
			var stronicowanie =
				'<div class="stronicowanie" style="white-space: nowrap">' +
					(i > 0 ? '<a href="javascript:void(0)" onclick="setTimeout(\'document.write(window.opener.' + this.id + '._pokaz(' + (i - 1) + ')); document.close(); document.close()\', 1); return false" onkeypress="setTimeout(\'document.write(window.opener.' + this.id + '._pokaz(' + (i - 1) + ')); document.close(); document.close()\', 1); return false">&laquo;&nbsp;Wstecz</a>&nbsp;&nbsp;&nbsp;' : '') +
					numer +
					(i < this.zdjecia.length - 1 ? '&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" onclick="setTimeout(\'document.write(window.opener.' + this.id + '._pokaz(' + (i + 1) + ')); document.close()\', 1); return false" onkeypress="setTimeout(\'document.write(window.opener.' + this.id + '._pokaz(' + (i + 1) + ')); document.close()\', 1); return false">Dalej&nbsp;&raquo;</a>' : '') +
				'</div>';
		}
		
		var html =
			'<html>' +
				'<head>' +
					'<title>' + (typeof this.zdjecia[i][2] != 'undefined' ? this.zdjecia[i][2].replace(/<[^>]+>/g, '') + (numer ? ' (' + numer + ')' : '') : numer) + '</title>' +
					(typeof this.css != 'undefined' && this.css ? '<link rel="Stylesheet" type="text/css" href="' + this.css + '" />' : '') +
					'<'+'script type="text/javascript">' +
					'function dopasuj() { window.resizeTo(Math.min(screen.availWidth, Math.max(document.getElementById(\'img\').width + 50, document.getElementById(\'body\').offsetWidth)), Math.min(screen.availHeight, document.getElementById(\'body\').offsetHeight + 80)); }' +
					(this.ochrona ? 'window.onblur = function() { if (document.getElementById(\'body\')) document.getElementById(\'body\').style.visibility = \'hidden\'; try { clipboardData.clearData(); } catch (e) {} }; window.onfocus = function () { if (document.getElementById(\'body\')) document.getElementById(\'body\').style.visibility = \'visible\'; };'  : '') +
					'<'+'/script>' +
				'</head>' +
				'<body style="margin: 0; padding: 0" onload="dopasuj(); dopasuj()"' + (this.ochrona ? ' oncontextmenu="return false" onbeforeprint="document.getElementsByTagName(\'body\')[0].style.visibility = \'hidden\'; window.alert(\'Wydruk jest niedostępny!\')" onafterprint="document.getElementsByTagName(\'body\')[0].style.visibility = \'visible\'"' : '') + '>' +
					'<div id="body">' +
						'<div id="zdjecie">' +
							(typeof this.zdjecia[i][2] != 'undefined' || numer ? '<h1>' + (typeof this.zdjecia[i][2] != 'undefined' ? this.zdjecia[i][2] : numer) + '</h1>' : '') +
							'<div style="text-align: center"><img id="img" src="' + this.zdjecia[i][1] + '" alt=""' + (this.ochrona ? ' onmousedown="return false" oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" galleryimg="no"' : '') + ' /></div>' +
							(typeof this.zdjecia[i][3] != 'undefined' ? '<div>' + this.zdjecia[i][3] + '</div>' : '') +
							stronicowanie +
						'</div>' +
					'</div>' +
				'</body>' +
			'</html>';
		
		return html;
	}
	
	this.pokaz = function(i)
	{
		try { Galeria.okno.close() } catch (e) {}
		Galeria.okno = window.open('', this.id, 'menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes,width=400,height=400');
		if (!Galeria.okno) return false;
		
		Galeria.okno.document.close();
		Galeria.okno.document.write(this._pokaz(i));
		Galeria.okno.document.close();
		Galeria.okno.focus();
		
		return true;
	}
	
	document.write('<div id="' + this.id + '"></div>');
	this.wyswietl();
}

Galeria.okno = null;

Na samym początku w wyróżnionych miejscach można zmienić podstawowe ustawienia konfiguracyjne: ilość kolumn, w których będą wyświetlane miniatury oraz ilość obrazków miniatur umieszczanych na jednej stronie.

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

Zaznacz kod Wypróbuj kod

<script type="text/javascript" src="galeria.js"></script>

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

Zaznacz kod

<script type="text/javascript">
// <![CDATA[
var galeria = new Galeria('galeria', new Array(
	new Array('miniatura', 'zdjęcie', 'Tytuł', 'Opis'),
	new Array('miniatura', 'zdjęcie', 'Tytuł', 'Opis'),
	new Array('miniatura', 'zdjęcie', 'Tytuł', 'Opis')
));
// ]]>
</script>
miniatura
Lokalizacja miniatury zdjęcia
zdjęcie
Lokalizacja pełnowymiarowego zdjęcia
Tytuł
Tytuł zdjęcia/podpis miniatury (opcjonalnie)
Opis
Szerszy opis zdjęcia (opcjonalnie)

UWAGA!
Zwróć uwagę, że po każdym elemencie, wprowadzającym do galerii kolejne zdjęcie ("miniatura, 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 galeria 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 galeria: 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 galerii, należy powtórzyć tylko powyższą część kodu, modyfikując w nim właśnie wyróżniony identyfikator galeria - inny dla każdej galerii.

Ostatnie dwa parametry są nieobowiązkowe, tzn. można je pominąć:

Zaznacz kod

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

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ć galerię, można do niej dołączyć np. taki arkusz CSS:

Zaznacz kod Wypróbuj kod

.galeria {
	text-align: center;
}

.galeria table {
	margin-left: auto;
	margin-right: auto;
}

.galeria td {
	padding: 5px 5px 10px 5px;
}

.galeria td img {
	border: 1px solid black;
}

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

Zaznacz kod Wypróbuj kod

<link rel="Stylesheet" type="text/css" href="galeria_zdjec.css" />

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

Zobacz także #

Komentarze #

  • Gość
    Gość

    30.10.2014 09:05
    Dzięki za link chodziło o wielkość liter, niektóre obrazki były zapisane jako .jpg a inne .JPG na co nie zwróciłam wcześniej uwagi :)
    Zobacz więcej

  • Roberto
  • Gość
    Gość

    23.10.2014 08:23
    Hej,
    Jestem strasznym laikiem przy tworzeniu stron, a pracuję właśnie nad własną stroną i mam mały problem mianowicie przy tworzeniu swojej galerii zdjęć w kedzie w wersji roboczej wszystko jest w porządku i ładnie mi się wyświetla, ale jak tylko wrzucam to na serwer, nie otwierają się niektóre...
    Zobacz więcej

  • Gość
    Gość

    07.09.2014 14:49
    a gdzie jest w kodzie fragment dot. miniatuerk? wprowadziłabym żeby mianiaturka była zdjęciem odpalanym na nowej stronie ale pomniejszonym. O wiele ułatwiłoby to mi prace.
    Zobacz więcej

  • Gość
    Gość

    19.06.2014 23:59
    Przepraszam :)
    Zobacz więcej

  • Luke
    Luke

    19.06.2014 23:56
    Szukaj pod hasłem "lightbox" i nie dubluj postów z łaski swojej.
    Zobacz więcej

  • Gość
    Gość

    19.06.2014 23:52
    A dało by sie pisac na tej stronie co nam sie wyswietla po kliknieciu? Jezeli tak to w jaki sposob :)
    Zobacz więcej

  • Gość
    Gość

    03.05.2014 11:13
    Witajcie. jak wycentrować okienko, ktore wyskakuje ze zdjeciem? obecnie mam tak, ze 1/4 zdjecia jest poza przeglądarką i trzeba ciągle okno przesuwać w lewo, by zobaczyc cale zdjecie. z gory dziekuje!!!
    Zobacz więcej

  • dawidek314
    dawidek314

    03.03.2014 15:40
    Witam forumowiczów. Wiem że temat ten się przewijał już na tym forum m.in. na stronie 3 i 4 ale nadal nie znalazłem rozwiązania na problem. Mianowicie mam galerię zdjęć, stworzoną za pomocą skryptu ze strony http://www.kurshtml.edu.pl/skrypty/skrypt_galerii,galeria.html i ładnie z miniaturek...
    Zobacz więcej

  • Luke
    Luke

    25.02.2014 18:23
    Kac: "Jak zmodyfikować JS żeby przyciski Wstecz i Dalej znalazły się nad zdjęciem?".
    Odpowiada za to fragment zaczynający się od: var html =
    Kac: "Ponadto chciałbym żeby okienko podglądu było na pełny ekran. Da radę?".
    http://stackoverflow.com/questions/10297168/how-to-open-maximized-window-with...
    Zobacz więcej

Zobacz więcej komentarzy

Facebook