¿Existe Lightbox para HTML?

[Anushka]

Hola a todos

¿Es posible usar Lightbox para vinculos?

Encontre esto:

Tambien se puede usar en vinculos:

<a href="juanitoperez.html" rel="lightbox"> Web de juanito </a>

Pero no me funciona

Se abre la ventana Lightbox pero no se carga la página HTML. Se queda en el modo "cargando.........."

Gracias

[maycolalvarez]

el lightbox es un div con posición absoluta, eso se hace con javascript y css simultáneamente, frameworks como jQuery permiten integrarlo de forma rápida, pero el que quieres en particular trata de cargar el html por medio de AJAX.

no te funciona porque debes de incluir en el html el código JS del lightbox

[Anushka]

Iniciado por maycolalvarez

no te funciona porque debes de incluir en el html el código JS del lightbox

Ya lo tengo puesto al principio del código. Lo daba por echo y las imagenes fucncionan perfectamente. Lo que no me carga - es HTML.

[HiToGoRoShi]

para eso usa mejor jquery

Código Javascript:

("#div_a_mostrar_data").load('mi_pagina.html')
 

[Anushka]

Iniciado por HiToGoRoShi

para eso usa mejor jquery

Código Javascript:

("#div_a_mostrar_data").load('mi_pagina.html')
 

HiToGoRoShi gracias por contestar pero soy una aprendiz y no se adonde pegar el código que pusiste.

Acabo de probar con Moodbox y funciona con html pero otro "problemilla" - ahora no se cargan las imagenes.

Lo hago así alo "bruto-novato" en java:

<!-- Start VisualLightBox.com HEAD section -->
<script type="text/javascript">var LightBoxOpt={autoPlay:false}</script>
<link rel="stylesheet" href="../engine/css/lightbox.css" type="text/css" media="screen" />
<script src="../engine/js/prototype.js" type="text/javascript"></script>
<script src="../engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="../engine/js/lightbox.js" type="text/javascript"></script>
<!-- Start MOODALBOX section -->
<script type="text/javascript" src="../moodalbox/js/mootools.js"></script>
<script type="text/javascript" src="../moodalbox/js/moodalbox.js"></script>
<link rel="stylesheet" href="../moodalbox/css/moodalbox.css" type="text/css" media="screen" /script>
<!-- End MOODALBOX section -->

[Anushka]

He probado con jquery y tampoco funciona .
Lo que necesito es abrir una ventana nueva (tipo pop-up) cuando se haga el click en el enlace.

Aqui va el código que encontré:

Código:

<script type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>  
<script language="javascript">  
$( document ).ready( function() {   
    $("a[rel='pop-up']").click(function () {   
        var caracteristicas = "height=700,width=800,scrollTo,resizable=1,scrollbars=1,location=0";   
        nueva=window.open(this.href, 'Pop-up', caracteristicas);   
        return false;   
 });   
});   
</script> 

<div><a href="pagina.html"  rel="pop-up" >Ver pagina</a> </div>

Me estoy voviendo locaaaaaaaaaaa
Ayudenme por faaaaaaaa

[Anushka]

Ya lo he resuelto con Shadowbox

Muy sencillo !!!

[Banditolane]

Anushka please. Necesito tu ayuda!!He tratado de hacerlo con Shadowbox pero es que no se como carajo se usa!!!jajaja. Creo que tiene que tan simple como lightbox pero no me funciona con los ejemplos que vienen en la web. Cuando clic en el enlace a la imagen, me abre un nuevo html con esa imagen unicamente y no algo del estilo de lightbox... He tratado de hacerlo yo mismo, aunque no he probado la opción que proponía Hitogoshi. A ver si me puedes echar un cable y enseñarme a usarlo please!!

[Anushka]

Iniciado por Banditolane

Anushka please. ......A ver si me puedes echar un cable y enseñarme a usarlo please!!

Lo que hice yo:
1) descargar archivo - http://dl.dropbox.com/u/647003/Ciuda.../Shadowbox.rar

2) descomprímelo y sube los archivos a un hosting o al servidor de prueba (p.ej. localhost)

3)Luego pega en cada página donde piensas utilizar efectos shadowbox - antes de </head> - lo siguiente:

Código:

<link rel="stylesheet" type="text/css" href="../shadowbox/shadowbox.css">
<script type="text/javascript" src="../shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
	language:   "es",
	modal: true,
	players:    ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
	});
</script>

¡OJO con las rutas marcadas en verde! Tienen que apuntar a los archivos de shadowbox....

4) ahora sólo hay que poner el atributo rel="shadowbox" dentro del código del elemento, por ejemplo:

Para imagen -

Código:

<a href="URL de la imagen" rel="shadowbox" title="Imagen">Imagen</a>

Galería de imagenes -

Código:

<a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 1</a>
<a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 2</a>

YouTube -

Código:

<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/CCwVb9Faxdc&amp;rel=0&amp;autoplay=1">YouTube</a>

Video Google -

Código:

<a href="http://video.google.com/googleplayer.swf?docid=-1941725100819420671&autoplay=1&hl=es&fs=true" title="Video Google" rel="shadowbox;width=405;height=340">Video Google</a>

Archivo SWF -

Código:

<a rel="shadowbox;width=400;height=300" title="SWF" href="URL del archivo.swf">Animación SWF</a>

Página WEB -

Código:

<a rel="shadowbox;width=700;height=500" title="Página web" href="URL de la página">Página web</a>

Mapa -

Código:

<a rel="shadowbox;width=425;height=350" title="Mapa" href="URL del mapa">Mapa Google</a>

[Banditolane]

Juas, si es tan simple como pensaba... jajaja! Muchas gracias Anushka. Creo que la clave estaba en que no lo subía al servidor, lo ejecutaba directamente y entonces no me lo hacia bien. Lo dicho, muchas gracias!!

Un Saludo!

[locofito]

Gracias Anushka!!! Esto sí que funciona!!!

[fenixkris]

Estimados, Excelente no pudo ser menos complicado, ahora:

Existe la posibilidad de ajustar el tamaño del contenido dentro del shadowbox para que no se muestre el Scroll?