Witam,

Mam problem. Używam Google Maps API w połączeniu z JQuery i FancyBox. Gdy klikam na marker później na hhh w baloniku to zamiast załadować mi efekt galerii to ładuje normalnie zdjęcie.

A może ktoś poprawi tak, że jak kliknę na marker to od razu pojawi się galeria.

Za pomoc dziękuję.


[PHP] pobierz, plaintext 
  1. 		<script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>
  4. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  5. 		<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRBRXpdM9jp6G1MF9yLMfWuIYZt2BR5Ltrn1m4M
    P2hliyyWcC1AqLxZ3A'     type='text/javascript'></script> 
  6. 		<script type="text/javascript" src="http://gmapsapi.com/examples/075/jquery.js"></script>
  7. 		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  8.  
  9. <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script>
  10. <script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
  11. <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
  12. <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
  13.  
  14. 		<style type="text/css">
  15. 		#okno
  16. 		{
  17. 			position: absolute;
  18. 			margin-left: -141px;
  19. 		}
  20.  
  21. 		#okno .stopka
  22. 		{
  23. 			display: block; width: 286px;
  24. 			background: url(http://gmapsapi.com/examples/075/dol.png) repeat-x 30px 0;
  25. 			padding: 0;
  26. 			margin: 0;
  27. 			height: 46px;
  28. 		}
  29.  
  30. 		#okno div.tresc
  31. 		{
  32. 			border: 1px solid rgb(181,181,181);
  33. 			border-bottom: 0;
  34. 			background: url(http://gmapsapi.com/examples/075/srodek.png) repeat-y white;
  35. 		}
  36.  
  37. 		#okno h3
  38. 		{
  39. 			display: block;
  40. 			margin: 0;
  41. 			padding: 4px;
  42. 			width: 220px;
  43. 			font-family: Arial;
  44. 			font-size: 14px;
  45. 			float: left;
  46. 			margin-left: 7px;
  47. 			border-bottom: 1px solid #ededed;
  48. 		}
  49.  
  50. 		#okno p
  51. 		{
  52. 			clear: right;
  53. 		}
  54.  
  55. 		#okno .close
  56. 		{
  57. 			border: 1px solid red;
  58. 			float: right;
  59. 			margin: 4px 4px 0 0;
  60. 			padding: 0;
  61. 			cursor: pointer;
  62. 		}
  63.  
  64. 		#okno p
  65. 		{
  66. 			display: block;
  67. 			margin: 0 0 5px 32px;
  68. 			font-family: Arial;
  69. 			padding: 4px;
  70. 			font-size: 11px;
  71. 			color: #333;
  72. 			text-align: justify;
  73. 		}
  74.  
  75. 		#okno .ikona
  76. 		{
  77. 			float: left;
  78. 			width: 20px;
  79. 			margin: 3px 0 0 5px;
  80. 			background-repeat: no-repeat;
  81. 			height: 32px;
  82. 		}
  83.  
  84. 		</style>
  85.  
  86.  
  87.     </head> 
  88.     <body onunload='GUnload()'>
  89. 		<script type='text/javascript'>
  90. 		<!-- 
  91. 			var mapa;	
  92. 			var okno;
  93. 			var ikona1 = new GIcon(G_DEFAULT_ICON,'admin.jpg');
  94. 			var markery_wspolrzedne = [
  95. 				new GLatLng(50.480287,17.335296)
  96.  
  97. 			]; // współrzędne przykładowych markerów
  98.  
  99. 			var markery_ikony = [ikona1];
  100.  
  101. 			var markery_opcje = [
  102. 				{tytul:'Marker bez przycisku X', przyciskX: true, ikona:true}
  103. 			]; // opcje okien dla poszczególnych markerów
  104.  
  105. 			var markery_opisy = [
  106. 			'<a class=grouped_elements rel=group1 href=a.jpg>hhh</a>'
  107. 			]; // opisy markerów
  108.  
  109. 			// prototyp funkcji otwierającej okno z informacjami
  110. 			GMarker.prototype.otworzOkno = function(html,opcje_uzytkownika)
  111. 			{
  112. 				var punkt = this.getPoint();
  113. 				var opcje = 
  114. 				{
  115. 					przyciskX:			true,
  116. 					tytul:				false,
  117. 					ikona:				true
  118. 				}; // domyślne opcje (mogą zostać nadpisane opcjami użytkownika)
  119.  
  120. 				if(opcje_uzytkownika)
  121. 					$.extend(opcje,opcje_uzytkownika);
  122.  
  123. 				var tytul = (opcje.tytul ? opcje.tytul : 'Informacje o markerze');
  124. 				var przyciskX = (opcje.przyciskX ? true : false);
  125. 				var ikona = (opcje.ikona ? true : false);
  126. 				var ikonaURL = this.getIcon().image;	
  127.  
  128. 				$('#okno').fadeOut(500, function()
  129. 				{
  130. 					okno.latlng = punkt;
  131. 					okno.zmienZawartosc(html);
  132.  
  133. 					if(tytul)
  134. 					{
  135. 						okno.zmienTytul(tytul);
  136. 						$('#okno h3').css('display','block');
  137. 					}
  138. 					else
  139. 					{
  140. 						$('#okno h3').css('display','none');
  141. 					}
  142.  
  143. 					if(ikona)
  144. 						$('#okno .ikona').css('visibility','visible');
  145. 					else
  146. 						$('#okno .ikona').css('visibility','hidden');
  147. 					$('#okno .ikona').css('background-image','url('+ikonaURL+')');
  148.  
  149. 					if(przyciskX)
  150. 						$('#okno .close').css('display','block');
  151. 					else
  152. 						$('#okno .close').css('display','none');
  153.  
  154. 					okno.redraw(true);
  155. 					$('#okno').fadeIn(500);
  156. 				});	
  157. 			}
  158.  
  159. 			function Okno()
  160. 			{
  161. 				this.latlng = new GLatLng(50.480287,17.335296);
  162. 			};  
  163.  
  164. 			Okno.prototype = new GOverlay();   
  165.  
  166. 			Okno.prototype.zmienZawartosc = function(html)
  167. 			{
  168. 				$('#okno>.tresc>p.tresc').html(html);
  169. 			}
  170.  
  171. 			Okno.prototype.zmienTytul = function(html)
  172. 			{
  173. 				$('#okno>.tresc>h3').html(html);
  174. 			}
  175.  
  176. 			Okno.prototype.pokaz = function()
  177. 			{
  178. 				$('#okno').fadeIn(500);
  179. 			}
  180.  
  181. 			Okno.prototype.ukryj = function()
  182. 			{
  183. 				$('#okno').fadeOut(500);
  184. 			}
  185.  
  186. 			Okno.prototype.initialize = function(mapa)   
  187. 			{   
  188. 				var div_okno		= $('<div />');
  189. 				var div_stopka		= $('<div />');
  190. 				var div_tresc 		= $('<div />');
  191. 				var div_ikona		= $('<div />');
  192. 				var img_zamknij		= $('<img />');
  193. 				var h3				= $('<h3 />');
  194. 				var p_tresc			= $('<p />');
  195.  
  196. 				$(div_okno).attr('id','okno').css('display','none');
  197. 				$(div_tresc).attr('class','tresc');
  198. 				$(div_ikona).attr('class','ikona').attr('src','http://maps.gstatic.com/intl/pl_ALL/mapfiles/marker.png');
  199. 				$(img_zamknij).attr('class','close').attr('src','http://gmapsapi.com/examples/075/x.gif').attr('alt','x').click(function() { okno.ukryj(); });
  200. 				$(h3).html('Informacje o markerze');
  201. 				$(p_tresc).attr('class','tresc');
  202. 				$(div_stopka).attr('class','stopka');
  203.  
  204. 				$(div_ikona).appendTo($(div_tresc));
  205. 				$(h3).appendTo($(div_tresc));
  206. 				$(img_zamknij).appendTo($(div_tresc));
  207. 				$(p_tresc).appendTo($(div_tresc));
  208. 				$(div_tresc).appendTo($(div_okno));
  209. 				$('<br />').css('clear','both').appendTo($(div_tresc));
  210. 				$(div_stopka).appendTo($(div_okno));
  211.  
  212. 				$(div_okno).appendTo($(mapa.getPane(G_MAP_FLOAT_PANE)));
  213. 				this.latlng = mapa.getCenter();
  214. 				this.mapa = mapa;
  215. 				this.okno = div_okno;
  216. 			}; 
  217.  
  218.  
  219. 			Okno.prototype.remove = function()   
  220. 			{   
  221. 				$(this.okno).remove();
  222. 			};   
  223.  
  224. 			Okno.prototype.copy = function()   
  225. 			{   
  226. 				return new Okno();
  227. 			};   
  228.  
  229. 			Okno.prototype.redraw = function(wymus)   
  230. 			{   
  231. 				if (!wymus)   
  232. 					return;  
  233. 				var punkt = mapa.fromLatLngToDivPixel(this.latlng);
  234. 				$(this.okno).css('top',(punkt.y-$('#okno').height())+'px').css('left',punkt.x+'px'); 
  235. 			}   
  236.  
  237. 			function mapaStart()
  238. 			{
  239. 				if(GBrowserIsCompatible())
  240. 				{
  241. 					mapa = new GMap2(document.getElementById('mapka'));
  242. 					mapa.addControl(new GMapTypeControl());
  243. 					mapa.addControl(new GOverviewMapControl()); 
  244. 					mapa.addControl(new GScaleControl());
  245. 					mapa.addControl(new GLargeMapControl());
  246. 					mapa.setCenter(new GLatLng(50.480287,17.335296),17,G_NORMAL_MAP);
  247.  
  248. 				     mapa.hideControls();  
  249.     GEvent.addListener(mapa, "mouseover", function(){mapa.showControls();});  
  250.       GEvent.addListener(mapa, "mouseout", function(){mapa.hideControls();});  
  251.          mapa.enableContinuousZoom();  
  252.     mapa.enableDoubleClickZoom();  
  253.  
  254. 					// tworzymy okno i dodajemy je do mapy
  255. 					okno = new Okno();
  256. 					mapa.addOverlay(okno);
  257.  
  258. 					for(var i=0;i<=0;i++)
  259. 						dodajMarker(i); // dodanie przykładowych markerów
  260.  
  261. 					GEvent.addListener(mapa,'click',function(marker,punkt)
  262. 					{
  263. 						if(!marker || !marker.getPoint)
  264. 						{
  265. 							okno.ukryj(); // ukrywamy okno, jeśli kliknięto nie w marker
  266. 							return;
  267. 						}
  268. 						else
  269. 						{
  270. 							marker.otworzOkno(marker.opis,marker.opcje);
  271. 						}
  272. 					});
  273. 				}
  274. 			}					
  275.  
  276. 			function dodajMarker(i)
  277. 			{
  278. 				var latlng 	= markery_wspolrzedne[i];
  279. 				var opcje	= markery_opcje[i];
  280. 				var opis	= markery_opisy[i];
  281. 				var ikonka	= markery_ikony[i];
  282. 				var marker = new GMarker(latlng,{icon: ikonka});
  283.  
  284. 				marker.opcje	= opcje;
  285. 				marker.opis		= opis;
  286.  
  287. 				mapa.addOverlay(marker);
  288. 				return marker;			
  289. 			}
  290. 			$(document).ready(mapaStart);
  291. 			$("a.grouped_elements").fancybox();
  292. 		-->
  293. 		</script>
  294.  
  295. 		<div id='mapka' style='width: 600px; height: 350px; border: 1px solid black; background: gray; background: url('http://web4you.com.pl/template/loader.gif'); background-repeat: no-repeat; background-position: center;'></div>
  296.  
  297.  
[PHP] pobierz, plaintext