Problemas para pasar una variable de un script a otro

ffrago · #1 (**permalink**) 26/04/2012, 12:48

Buenas a todos, tengo el siguiente código (que adjunto al final) i lo que necesito es pasar dos valores des de el a href a la funcion initialize.

Tal i como está funciona correctamente, pero tengo que introducir los valores directamente a la funcion initialize y me interesa pasarse-los des de el a href

Alguien me puede decir como hacerlo?

Deberian cambiar las siguinentes lineas de codigo:

1.- changepicturecallback: function(){ initialize(); }}); por changepicturecallback: function(){ initialize(lat,lang); }});

2.- var latlng = new google.maps.LatLng(41.287276,1.251579); por var latlng = new google.maps.LatLng(lat,lang);

Aquí podeis ver el ejemplo: http://www.gestoriaparis.com/temporal/prueba.php

I aquí os dejo el codigo completo para que entendais el funcionamiento:
================================================== ===

Código HTML:

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />

<script src="javascript/jquery-1.6.1.min.js" type="text/javascript" ></script>
<script src="javascript/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"	src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script>
/*Nos inicia los parametros para el div de googlemaps*/
$(document).ready(function(){
	$("#googlemaps a[rel^='prettyPhoto']").prettyPhoto({theme:'pp_default',animation_speed:'slow',
		custom_markup: '<div id="map_canvas" style="width:600px; height:480px"></div>',
		changepicturecallback: function(){ initialize(); }});
		/*En la linea anterior me gustaria podenr poner function(){ initialize(lat,lang)
		y pasar el valor de las variables des del a href a href="#?custom=true&width=600&height=480" rel="prettyPhoto" title=""*/
	
});
function initialize() {
	var latlng = new google.maps.LatLng(41.287276,1.251579); /* Me gustaria poner var latlng = new google.maps.LatLng(lat,lang) */
	var myOptions = {
	  zoom: 16, /* Nivell de zoom */
	  center: latlng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP /* tipus de mapa */
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"),
		myOptions);
  }
</script>
</head>
<body>
<!-- en el a href también pasamos  parametreos para el div de google maps
i es aquí donde me gustaria definir las variables  lat i lang. Como las passo ariba? -->
<div class="galery_clearfix" id="googlemaps"><a href="#?custom=true&width=600&height=480" rel="prettyPhoto" title="">Ampliar mapa</a></div>
</body>
</html>

Muchas gracias de antemano

hmvr414 · #2 (**permalink**) 26/04/2012, 15:29

Hola,

Una opción:

modificar la llamada a changepicturecallback en la version de desarrollador de prettyphoto, para pasar el valor del href del enlace:

Código Javascript:

Ver originallínea 537
settings.changepicturecallback(); // Callback!

cambiar por:

Código Javascript:

Ver originalsettings.changepicturecallback(pp_images[set_position]); // Callback!

con eso uno puede leer como parametro en la funcion changepicturecallback el href del enlace, y para recuperar el parametro requerido se puede usar la funcion getParam que esta definida en el mismo prettyphoto:

Código Javascript:

Ver originalfunction getParam(name,url){
      name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
      var regexS = "[\\?&]"+name+"=([^&#]*)";
      var regex = new RegExp( regexS );
      var results = regex.exec( url );
      return ( results == null ) ? "" : results[1];
}

entonces la llamada a prettyphoto puede cambiar a:

Código Javascript:

Ver original$("#googlemaps a[rel^='prettyPhoto']").prettyPhoto({theme:'pp_default',animation_speed:'slow',
        custom_markup: '<div id="map_canvas" style="width:600px; height:480px"></div>',
        changepicturecallback: function(e){ 
        
        initialize(getParam("lat",e), getParam("lng",e)); 
        
        
        }});

y la funcion initialize:

Código Javascript:

Ver originalfunction initialize(lat,lng) {
    var latlng = new google.maps.LatLng(lat,lng); 
    var myOptions = {
      zoom: 16, /* Nivell de zoom */
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP /* tipus de mapa */
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

y luego la ubicacion puede definirse en el href:

Código HTML:

Ver original<div class="galery_clearfix" id="googlemaps"><a href="#?custom=true&width=600&height=480&lat=41.287276&lng=1.251579" rel="prettyPhoto" title="">Ampliar mapa</a></div>
<div class="galery_clearfix" id="googlemaps"><a href="#?custom=true&width=600&height=480&lat=28.4189&lng=-81.581254" rel="prettyPhoto" title="">Otro mapa</a></div>

ffrago · #3 (**permalink**) 27/04/2012, 02:59

Primeramente muchas gracias po tu respuesta, pero después de haver aplicado los cambios sigue sin funcionar-me. Eh estado mirando y no encuentro el error. A ti te funcionó?

hmvr414 · #4 (**permalink**) 27/04/2012, 10:14

Hola,

aqui esta el ejemplo:
http://flaminlab.com.co/pruebas/prueba.html

te falta agregar la funcion getParam en el script al lado de initialize.

function getParam(name,url){
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( url );
return ( results == null ) ? "" : results[1];
}

ffrago · #5 (**permalink**) 27/04/2012, 12:11

Muchas gracias de verdad por todo, ahora si me funciona. Eres un crack!!!