Witam,chciałbym na stronie stworzyć galerie która wyglądała by jak nowy wpis na blogu tzn posiadała by nagłówek z tytułem serii oraz kilka zdjęć bez tekstu,kliknięcie jednego ze zdjęć otwierało by pełny podgląd,oraz kliknięcie nagłówka serii otwierało by pierwsze zdjęcie w serii w podglądzie pełnoekranowym,wyglądało by to mniej więcej tak:

user image

Jakiej technologii do tego wykorzystać? Gdyby istniał już do tego jakiś darmowy skrypt,to czy mógłbym prosić o jakieś namiary?
Próbowałem użyć CMS Zenphoto,ale on ustawia zdjęcia jako jeden wpis,którego można powiększać jak na obrazku bez tych czerwonych kresek (mogę się mylić),czy lepiej wziąć pod uwagę WordPress'a? Za wszelkie wskazówki będę wdzięczny.
Tutaj jeszcze kod mojej strony:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--  -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Photography</title>
	
	<meta http-equiv="description" content="">
	<meta name="reply-to" content="">
		<link rel="stylesheet" href="./Photography_files/light.css" type="text/css">
	
	

<!-- Begin content inserted by Ad Muncher -->
<!-- Retrieved from 195.211.72.38:80 -->


<!-- End content inserted by Ad Muncher -->

</head>
<body>
<div class="page-container">

<table class="content-container" cellspacing="0" cellpadding="0" border="0">
	<tbody><tr>
		<td class="top-left">&nbsp;</td>
		<td class="top-fill">&nbsp;</td>
		<td class="top-right">&nbsp;</td>
	</tr>
	<tr>
		<td class="left-fill"><img src="./Photography_files/border-left-fill.png"></td>
		<td class="content">
		
			<div id="main">
			
							
				<div id="gallerytitle">
					<div class="image">
						<div class="imagethumb"><img src="./Photography_files/header.jpg" alt=""></div>
					</div>
					<table width="100%" border="0" cellspacing="0" cellpadding="0" style="clear: both;">
						<tbody><tr>
							<td align="left"><a href=""><img src="./Photography_files/contact.jpg" alt="" border="0"></a></td>
							<td align="right">&nbsp;</td>
						</tr>
						<tr>
							<td colspan="2" height="8">&nbsp;</td>
						</tr>
						<tr>
							<td colspan="2" height="8" background="./Photography_files/seperator.gif" style="height: 8px; background-image:url(/themes/bornv3/images/seperator.gif); background-repeat: repeat-x;"></td>
						</tr>
						<tr>
							<td colspan="2" height="8">&nbsp;</td>
						</tr>
					</tbody></table>
				</div>

				<div id="padbox">
									
										<div class="album">
																		
											</div>
										<div class="album">
																		
											</div>
										<div class="album">
																		<div class="image">
							
																		
											</div>
										
								</div>
				<div style="margin: 20px">
					<table width="100%" border="0" cellspacing="0" cellpadding="0" style="clear: both;">
						<tbody><tr>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td align="right"><span class="copyright"> © 2012</span></td>
						</tr>
					</tbody></table>
				</div>
				
						
			</div>
			
		</td>
		<td class="right-fill"><img src="./Photography_files/border-right-fill.png"></td>
	</tr>
	<tr>
		<td class="bottom-left">&nbsp;</td>
		<td class="bottom-fill">&nbsp;</td>
		<td class="bottom-right">&nbsp;</td>
	</tr>
</tbody></table>

</div>

</body>
</html>