header

Szablon galerii - zdjęcia rozmieszczone w tabeli

Najprostszym sposobem na galerię internetową jest rozmieszczenie miniaturek zdjęć w tabelce i utworzenie hiperłączy od każdej miniaturki do oryginalnego zdjęcia. Oto przykład:

Kąty Rybackie Kąty Rybackie Kąty Rybackie
Kąty Rybackie port w Jastarni plaża w Jastarni
Kąty Rybackie Kąty Rybackie Kąty Rybackie
Kąty Rybackie plaża w Jastarni bunkier na półwyspie Hel

Kod strony z galerą:

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>moja galeria</title>
	<meta name="keywords" content="szablon strony">
	<meta name="description" content="Polskie morze w obiektywie.">
	<meta name="author" content="Jacek (jacek@jacek.pl)">
</head>
<body>
	<div style="text-align:center; width:800px; margin-left:auto; margin-right:auto;">
	<table border="0" cellspacing="0" cellpadding="0">
	<tr style="background-color:#009900">
		<td height="175">&nbsp;</td>
	</tr>
	<tr>
		<td height="625" style="background-color:#ffff00">
		<table width="798" border="0" cellspacing="12">
		<tr>
			<td><a href="katy_rybackie_01.jpg">
			<img src="katy_rybac01_mini.jpg" width="250" height="188"></a></td>
			<td><a href="jastarnia_01.jpg">
			<img src="jastarnia_01_mini.jpg" width="250" height="188"></a></td>
			<td><a href="jastarnia_02.jpg">
			<img src="jastarnia_02_mini.jpg" width="250" height="188"></a></td>
		</tr>
		<tr>
			<td>plaża w Katach Rybackich</td>
			<td>port w Jastarni</td>
			<td>plaża w Jastarni</td>
		</tr>
		<tr>
			<td><a href="katy_rybackie_02.jpg">
			<img src="katy_rybac02_mini.jpg" width="250" height="188"></a></td>
			<td><a href="jastarnia_04.jpg">
			<img src="jastarnia_04_mini.jpg" width="250" height="188"></a></td>
			<td><a href="jastarnia_03.jpg">
			<img src="jastarnia_03_mini.jpg" width="250" height="188"></a></td>
		</tr>
		<tr>
			<td>Kąty Rybackie</td>
			<td>plaża w Jastarni</td>
			<td>bunkier na półwyspie Hel</td>
		</tr>
		</table></td>
		</tr>
	</table>
</div>
</body>
</html>

 

Kopiujemy kod, wklejamy do edytora, w którym tworzymy stronę (np. Notatnika). Zapisujemy jako galeria.htm lub galeria.html. W miejsce "katy_rybackie_01.jpg" i "katy_rybackie_01_mini.jpg" wpisujemy odpowiednio nazwę swojego zdjęcia, które otworzy się po kliknięciu, i nazwę miniaturki. Po zapisaniu powinnimy otrzymać następujący efekt:

Szablon galerii - efekty transition i transform - CSS3

Transition, scale, transform-origin, hover - przy pomocy CSS można dodać efektowne animacje. Po najechaniu kursorem na zdjęcia - hover, przy pomocy scale(x,y) zdjęcie powiększa się w skali x i w skali y odpowiednio w prawo-lewo i górę-dół; w czasie określonym przez transition i względem punktu określonego przez transform-origin.

Kąty Rybackie
Kąty Rybackie

 

Kod strony z galerą:

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>strona główna</title><meta name="keywords" content="szablon galerii html">
	<meta name="description" content="Opis zawartości strony.">
	<meta name="author" content="Imię i nazwisko autora, adres email">
	<!--<link rel="stylesheet" type="text/css" href="styl.css">-->
	<style type="text/css">
		body {	
			text-align:center;
			background-color:#FFFFFF;}
		#page {
			width:800px;
			margin-right:auto;
			margin-left:auto;
			text-align:left;}		
		#contentheader {
			text-align:center;
			height: 175px;
			background-color:#C5C5C8;			
			border:1px;
			padding:5px;
			margin:0px 0px 2px 2px;}
		.zoom {
			height: 100%;  		
			overflow: hidden;}
		#contentleft {
			width:388px;
			background-color:#C5C5C8;   		
			float: left;
			position: relative;
			border:1px;
			padding:5px;   		
			margin:0px 0px 2px 2px;
			height: 546px;}
		#contentright {
			background-color:#C5C5C8;   	
			width: 388px;
			float: left;
   			position: relative;
			border:1px;
			padding:5px;   	
			margin:0px 0px 2px 2px;
			height: 546px;}
		.foto_lewy {
			height: 100%;
			width: 100%;  
			transition:0.85s;
			transform-origin:25% 10%;}
		.foto_prawy {
			height: 100%;  		
			width: 100%;
			transition:0.85s;
			transform-origin:100% 15%;}
		.foto_lewy:hover { 	
			transform:scale(1.6,1.35);}
		.foto_prawy:hover {
			transform:scale(1.45,1.7);}		
		#textleft {
			width:388px;
			background-color:#C5C5C8;
			float: left;
			position: relative;
			border:1px;
			padding:5px;
			margin:0px 0px 2px 2px; 
	  		height:46px;}
		#textright {
			background-color:#C5C5C8;   		
			width: 388px;
			float: left;
			position: relative;
			border:1px;   	
			padding:5px;
			margin:0px 0px 2px 2px;
			height:46px;}
	</style>
</head>
<body>
	<div id="page">
		<div id="contentheader">
			<p>Galeria</p>
		</div>
		<div id="contentleft">
			<div class="zoom">
				<img class="foto_lewy" src="../foto/ryga_kot.jpg">
			</div>
		</div>
		<div id="contentright">
			<div class="zoom">
				<img class="foto_prawy" src="../foto/wilno_kot.jpg">
			</div>
		</div>
		<div id="textleft">
			<p>Ryga</p>
		</div>
		<div id="textright">
			<p>Wilno</p>
		</div>
	</div>
</body>
</html>

 

Kopiujemy kod, wklejamy do edytora, w którym tworzymy stronę (np. Notatnika). Zapisujemy jako galeria.htm lub galeria.html. W miejsce "ryga_kot.jpg" i "wilno_kot.jpg" wpisujemy odpowiednio nazwę swojego zdjęcia.

 

Galeria we flashu - użycie gotowego szablonu - SimpleViewer

Szybko i prosto efektowną galerię we flashu stworzymy wykorzystując dostępny bezpłatnie szablon SimpleViewer (http://www.airtightinteractive.com/simpleviewer/). Pomocny do stworzenia za nas miniaturek i ułatwiajcy konfigurację SimpleViewera jest, również bezpłatny, program Porta ( http://stegmann.dk/mikkel/porta/).

Program Porta ma szersze możliwości, pozwala tworzyć również galerie w html-u.