Colorbox

orchating · #1 (**permalink**) 28/06/2011, 03:59

Hola gente, estoy un poco frustrado...

Estoy haciendo un mapa de imagen de un plano, el tema esta en que quiero que al pulsar en cada sección se habrá el típico lightbox con las imagenes de esa sección, el tema esta en que... dejo el código y lo comento.

Código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
	$("a[rel='example1']").colorbox({transition:"fade"});
    });
</script>
</head>

<body>
   <img src="plano.png" border="0" usemap="#Map" />
       <map name="Map" id="Map">
          <a href="images/instalaciones/laboratorio.jpg" rel="example1" title="Titulo">
             <area shape="poly" coords="198,7,198,53,206,53,206,7,326,7,266,120,243,109,245,104,118,38,133,7" alt="" title="rayos x" />
          </a>
       </map>
</body>

Por si no se entiende el código (lo he reducido al máximo para no tardar..) yo tengo que tener el ancla en el elemento área para que al pichar en ese área se abra la ventana del lightbox, el tema esta en que el Crhome, Explorer 8 y 9, safari, opera... todoooos lo hacen bien pero cuando lo abro con mi amigo el firefox no hace nada de nada, y el problema esta que el firefox no reconoce que el ancla este como padre del <area>, y no se ya que hacer..

Si alguien a tenido este problema o se le ocurre alguna manera se agradece cualquier tipo de ayuda por descabellada que sea jejeje

Mil gracias y saludo!

orchating · #2 (**permalink**) 28/06/2011, 04:40

Lo e conseguido xDDDDDD era una chorrada como todas las cosas de esta vida jajaja pero bueno dejo la solución y una pequeña duda que tengo.

Código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
	$("area[alt='example1']").colorbox({transition:"fade"});
    });
</script>
</head>

<body>
   <img src="plano.png" border="0" usemap="#Map" />
       <map name="Map" id="Map">
             <area shape="poly" coords="198,7,198,53" alt="example11" title="Perruquer&iacute;a" href="images/instalaciones/peluqueria.jpg" /> 
          </a>
       </map>
</body>

el ejemplo aqui: www.ribesvet.com

La duda que tengo si veis tiene 2 idiomas, porque solo me funciona en castellano si tengo un corta pega? puede ser problema de que el id="Map" esta definido ya en uno de ellos?

Gracias majetes!