Lightbox abre una nueva url y no una presentación.

admax · 14 Dic 2012, 23:39 · Solicitar retirada

Hola foreros.
He hecho el curso de "como crear tu web" que da una muy buena base para empezar. Felicito a sus creadores.
En mi página web, estoy usando el lightbox para mis galerías de imágenes, pero tengo un problema: cuando hago click en una imagen, se me abre una nueva página y no una "presentación" de imágenes como debería de hacer lightbox, y no se como resolverlo. Me vuelve loco.
Dejo mis códigos esperando que alguien me ayude a encontrar el fallo.

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Christophe Jumel</title>
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"</script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"</script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<style type="text/css">
<script type="text/javascript">
$(function() {
$('#galleryad a').lightBox();
});
</script>
/* jQuery lightBox plugin - Galleryad style */
#galleryad {
background-color: #444;
padding: 10px;
width: 520px;
}
#galleryad ul { list-style: none; }
#galleryad ul li { display: inline; }
#galleryad ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#galleryad ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#galleryad ul a:hover { color: #fff; }
</style>


</head>
<body>

<div id="templatemo_header_wrapper">
<div id="templatemo_header">

<div id="site_title">
<a href="http://www.templatemo.com"><span>INFOARQUITECTURA</span></a>
</div> 

<div id="templatemo_menu">
<ul>
<li><a href="index.html">Portada</a></li>
<li><a href="about.html">Quién soy</a></li>
<li><a href="gallery.html" class="current">Proyectos</a></li>
<li><a href="contact.html">Contacto</a></li>
</ul>
</div> 

</div> 
</div> 

<div id="templatemo_main_wrapper">
<div id="templatemo_main">

<div id="templatemo_content">

<h2>Proyectos de Christophe Jumel,(Arquitecto en París)</h2>
<p>Si pincha en la imágenes en miniatura, podrá ver varias imágenes de cada proyecto.</p>

<div id="galleryad">

<ul>
<li>
<a href="images/gallery/01_Allianz_vue_A1_06w1.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/01_Allianz_vue_A1_06_S.jpg" alt="Image 1" height="60"/></a>
</li>
<li>
<a href="images/gallery/02_Allianz_vue_B1_04_copiaW.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/02_Allianz_vue_B1_04_copia_S.jpg" alt="Image 2" height="60"/></a>
</li>
</ul>
<ul>
<li>
<a href="images/gallery/03_Allianz_vue_C1_03W.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/03_Allianz_vue_C1_03_copia_S.jpg" alt="Image 3" height="60"/></a>
</li>
<li>
<a href="images/gallery/04_Allianz_vue_D1_05W.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/04_Allianz_vue_D1_05_copia_S.jpg" alt="Image 4" height="60"/></a>
</li>
</ul>
<ul>
<li>
<a href="images/gallery/05_Allianz_vue_E1_03_copiaW.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/05_Allianz_vue_E1_03_copia_S.jpg" alt="Image 5" height="60"/></a>
</li>
<li>
<a href="images/gallery/06_Allianz_vue_F1_03W.jpg" title="ALLIANZ SEGUROS. $('#galleryad').lightBox();"><img src="images/gallery/06_Allianz_vue_F1_03_copia_S.jpg" alt="Image 6" height="60"/></a>
</li>
</ul>
</div>

<div class="galleryad_box">
<div class="right">
<h5>ALLIANZ SEGUROS</h5>
<p>Proyecto de reforma de la sede <b><u>ALLIANZ SEGUROS</u></b> ubicada en "la Tour Neptune" en la esplanada de "La Défense" en París.</p>
<p>Dotado de 2 zonas de espera, el hall de acceso fue fruto del primer proyecto bajo el lema "fenêtre sur la Seine" (ventana sobre el sena).
Luego se encargo el proyecto de la zona de transición hacia los ascensores, la cafetería y múltiples rincones de descanso.</p>
<a href="#" class="more float_r">ver imágenes</a>
</div>
<div class="cleaner"></div>
</div>

y el CSS incrustado en la plantilla:

/* jQuery lightBox plugin - Galleryad style */
#galleryad {
float: left;
width: 280px;
}
#galleryad ul { list-style: none; }
#galleryad ul li { display: inline; }
#galleryad ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
float: left;
}
#galleryad ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#galleryad ul a:hover { color: #fff; }

De antemano, gracias por vuestra ayuda.

skaparate · 15 Dic 2012, 00:44 · Solicitar retirada

Hola:

Intenta con esto:

jQuery(document).ready(function($) {
  $('#galleryad a').click(function(e) {
    e.preventDefault();
    $(this).lightBox();
  });
});

admax · 15 Dic 2012, 22:31 · Solicitar retirada

Hola Skaparate.
Gracias por tu rápida respuesta.
He puesto tu código en mi html pero tampoco me funciona. ¿Supongo que solo hay que ponerlo aquí sin cambiar nada más, verdad?
Te enseño donde lo he puesto.

<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"</script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"</script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<style type="text/css">
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#galleryad a').click(function(e) {
e.preventDefault();
$(this).lightBox();
});
});
</script>
/* jQuery lightBox plugin - Galleryad style */
#galleryad {
background-color: #444;
padding: 10px;
width: 520px;
}
#galleryad ul { list-style: none; }
#galleryad ul li { display: inline; }
#galleryad ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#galleryad ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#galleryad ul a:hover { color: #fff; }
</style>

Un saludo.

admax · 15 Dic 2012, 23:52 · Solicitar retirada

Hola.
He mirado el código del ejemplo de lightbox (en el archivo descargado de la página oficial del plugin) y donde se activa el plugin: '#gallery a' sale en verde cuando en mi código '#galleryad a' sale en azul.
¿Podría ser que no se cargue bien el plugin? Porque supongo que si todo estuviese bien, me debería salir también en verde, ¿o no?
Un saludo.

skaparate · 16 Dic 2012, 02:42 · Solicitar retirada

En todos los script falta esto >:

<script type ="text/JavaScript" src="jquery.js"></script>

Revisa tu código.

admax · 16 Dic 2012, 19:37 · Solicitar retirada

Es verdad. Fallo de principiante. Gracias pero aún así no funciona.