🚀 go-pugleaf

Witam, mam taki kod jak poniżej I wszystko działa OK. To znaczy
kliknięcie na markerze otwiera okienko informacyjne, w nim są
wyświetlane miniatury, które po kliknięciu otwierają obrazek w tym samym
oknie w którym jest mapa.
Chciałbym jednak aby docelowy obrazek był wyświetlany z wykorzystaniem
efektu Lightbox, niestety nie potrafię tego zrobić bo obrazki są
zdefiniowane w <head> a nie w <body>.
Jak przerobić poniższy kod by po kliknięciu miniaturki obrazek nie
wyświetlał się w bieżącym oknie, ale w "okienku" Lightboxa (czy
czegokolwiek działającego w tym stylu).

Z góry dziękuje za pomoc.

===== KOD ======

<!DOCTYPE html />
<html>
<head>
<title>Markery</title>
<link
href='http://fonts.googleapis.com/css?family=Terminal+Dosis:800,600'
rel='stylesheet' type='text/css'>
	<style type="text/css">
	body {
		font-family: 'Terminal Dosis', sans-serif;
		font-size: 18px;
		color: #333;
		background: #CCC; /* background color */	
		padding: 0;
		margin: 10px 0px;
		overflow-y: scroll;
	}
	td {
		font-size: 18px;	
	}
	h1 {
		text-align: center;
		font-family: 'Terminal Dosis', sans-serif;
		font-size: 60px;
		color: #EEEEEE;
		text-shadow: 0px -1px 0px #AAA, 0px 1px 0px #EEEEEE;
		margin: 0px 0px 20px 0px;
	}
	input {
		font-family: 'Terminal Dosis', sans-serif;
		font-size: 22px;
		padding: 7px 8px;	
		border: 0px;
		box-shadow: 0px 0px 6px #999;
		border-radius: 10px;
	}
	input[type="text"] {
		width: 300px;
	}
	input[type="submit"] {
		padding: 6px 20px;	
		margin-left: 10px;
	}
	#routeForm {
		width: 100%;
		text-align: center;
		margin-top: 20px;	
	}
	#directionsPanel {
		background: #FFFFFF;
		width: 800px;
		padding: 20px;
		margin: 0 auto;
		box-shadow: 0px 0px 6px #999;
		border-radius: 10px;
		font-size: 20px;
	}
	.adp-directions {
		width: 100%;	
	}
	</style>
	<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
	var markers = [
	['Obrazek 1<br> <a href="pic/pic1.jpg"><img
src="pic/thumbs/pic1.jpg"></a>',35.155522, 33.361981],
	['Obrazek 2, Obrazek 3<br> <a href="pic/pic2.jpg"><img
src="pic/thumbs/pic 2.jpg"></a>&nbsp<a href="pic/pic3.jpg"><img
src="pic/thumbs/pic3.jpg"></a>', 50.451029, 30.521704],
	['Obrazek 4<br> <a href="pic/pic4.jpg"><img
src="pic/thumbs/pic4.jpg"></a>', 46.562958, 16.453376]
	];
	
	var markers2 = [
	['Obrazek 6<br> <a href="pic/pic6.jpg"><img
src="pic/thumbs/pic6.jpg"></a>', 50.019299, 22.675038],
	];
	
	function initializeMaps() {
		var myOptions = {
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			mapTypeControl: false
		};
		var map = new
google.maps.Map(document.getElementById("map_canvas"),myOptions);
		var infowindow = new google.maps.InfoWindow();
		var marker, i;
		var bounds = new google.maps.LatLngBounds();
	
		for (i = 0; i < markers.length; i++) {
			var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
			bounds.extend(pos);
			marker = new google.maps.Marker({
				position: pos,
				icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
				map: map
			});
			google.maps.event.addListener(marker, 'click', (function(marker, i) {
				return function() {
					infowindow.setContent(markers[i][0]);
					infowindow.open(map, marker);
				}
			})(marker, i));
		}

		for (i = 0; i < markers2.length; i++) {
			var pos = new google.maps.LatLng(markers2[i][1], markers2[i][2]);
			bounds.extend(pos);
			marker2 = new google.maps.Marker({
				position: pos,
				icon: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
				map: map
			});
			google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
				return function() {
					infowindow.setContent(markers2[i][0]);
					infowindow.open(map, marker2);
				}
			})(marker2, i));
		}

		map.fitBounds(bounds);
	}
	</script>
</head>
<body onLoad="initializeMaps()">
	<h1>Markery</h1>
	<div id="map_canvas" style="width:100%; height:800px"></div>	
</body>
</html>


================

-- 
The Mis'