Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 6 de 6

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

  1. #1
    Recien Llegado! Habitual
    Fecha de Ingreso
    28 may, 12
    Mensajes
    12
    Poder de Reputación
    9

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

    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>
    <!--////// END \\\\\\\-->

    </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> <!-- end of site_title -->


    <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> <!-- end of templatemo_menu -->

    </div> <!-- end of header -->
    </div> <!-- end of header wrapper -->

    <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.

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,044
    Poder de Reputación
    21
    Hola:

    Intenta con esto:

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

  3. #3
    Recien Llegado! Habitual
    Fecha de Ingreso
    28 may, 12
    Mensajes
    12
    Poder de Reputación
    9
    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.

  4. #4
    Recien Llegado! Habitual
    Fecha de Ingreso
    28 may, 12
    Mensajes
    12
    Poder de Reputación
    9
    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.

  5. #5
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,044
    Poder de Reputación
    21
    En todos los script falta esto >:

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

    Revisa tu código.

  6. #6
    Recien Llegado! Habitual
    Fecha de Ingreso
    28 may, 12
    Mensajes
    12
    Poder de Reputación
    9
    Es verdad. Fallo de principiante. Gracias pero aún así no funciona.

Temas Similares

  1. como usar lightbox
    Por marianovelada en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 7
    Último Mensaje: 07/12/2012, 06:16
  2. Visual lightbox ¿alguien lo conoce?
    Por beatriz150 en el foro Foro General
    Respuestas: 4
    Último Mensaje: 07/09/2011, 14:00
  3. Insertar visor tipo Lightbox
    Por Icelost en el foro Foro General
    Respuestas: 1
    Último Mensaje: 10/02/2011, 13:50

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •