Mapy, markery, obrazki - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › Mapy, markery, obrazki › Mapy, markery, obrazki

Data: 2015-02-15 01:05:54
Temat: Mapy, markery, obrazki
Od: "Michal M. Lechanski" <m...@d...eu> szukaj wiadomości tego autora
[ pokaż wszystkie nagłówki ]
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=Termina
l+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.p
ng",
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'