abrir link de 2 maneras

morfasto · #1 (**permalink**) 08/11/2011, 22:58

Hola, que tal?

Estoy buscando la manera para hacer que cuando abra un link dandole click este abra un lightbox y cuando quiera abrirlo en otra ventana, te direccione a otro link ya que cuando tengo un estilo para lightbox y un estilo para formato normal del browser?

Muchas gracias!

morfasto · #2 (**permalink**) 09/11/2011, 09:22

Asi como en facebook, cuando le das click a una foto, por ejemplo, esta se abre en un lightbox, pero le das click derecho y la abres en otra ventana, esta aparece con otro estilo, como hago eso?

lubtufano · #3 (**permalink**) 10/11/2011, 17:22

Esto se puede realizar de la siguiente manera; el enlace debe apuntar a la página con formato normal para browser por ejemplo.

<a href="galeria.php?numFoto=4"><img src="foto4.jpg"></a>

Ahora, para abrir la lightbox al dar clic sobre el enlace se debe cancelar el evento por defecto de este y luego abrir lightbox. Esto se pude conseguir con la siguiente función.

function cancelarEvento(elEvento)
{
if(window.event)
window.event.returnValue= false;
else
elEvento.preventDefault();
}

Se puede que llamar a esta función en el evento oncilck del enlace pasandole como parametro la palabra clave event

<a href="galeria.php?numFoto=4" onclick="cancelarEvento(event)"><img src="foto4.jpg"></a>

Por último se deberia agregar la instrucción para abrir la lightbox en este mismo evento.

<a href="galeria.php?numFoto=4" onclick="cancelarEvento(event); lightbox"><img src="foto4.jpg"></a>

Eso ya depende de la lightbox que se use lo importante es cancelar el evento por defecto; y por supuesto que al abrir el enlace en una pestaña o ventana nueva con el botón derecho se mostrara la página original a la que apunta este.

morfasto · #4 (**permalink**) 29/01/2012, 02:22

Entiendo como dices que debe de funcionar, pero soy bastante novato en Javascript y todavia no logro hacerlo, nose como hacer para abrir el colobox con el evento onclick.

Este es mi codigo para ver si ayuda:

Código HTML:

Ver original<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script>
    $(document).ready(function(){
        $(".color__box").colorbox({iframe:true, width:912, height:895, top:20, scrolling:false});
    });
    function cancelarEvento(elEvento)
    {
        if(window.event)
        window.event.returnValue= false;
        else
        elEvento.preventDefault();
    }
</script>
</head>
<body>
    <a class='color__box' href='pagina.php?id=1' onclick="cancelarEvento(event); colorbox">Pagina 1<a/><br>
    <a class='color__box' href='pagina.php?id=2' onclick="cancelarEvento(event); colorbox">Pagina 2<a/><br>
    <a class='color__box' href='pagina.php?id=3' onclick="cancelarEvento(event); colorbox">Pagina 3<a/><br>
    <a class='color__box' href='pagina.php?id=4' onclick="cancelarEvento(event); colorbox">Pagina 4<a/><br>
    <a class='color__box' href='pagina.php?id=5' onclick="cancelarEvento(event); colorbox">Pagina 5<a/>
</body>
</html>

Espero que me puedan ayudar!

Muchas Gracias!

morfasto · #5 (**permalink**) 29/01/2012, 13:57

Alguna idea?

Muchas gracias!