Te dejo mi tutorial para usar lightbox
Bueno, primero que nada, los archivos necesarios seran:
http://rapidshare.com/files/129038400/ibox.zip.htmlAqui encontraremos los siguientes archivos y directorios:
../images
bg.png
indicator.png
../skins
../skins/darkbox
darkbox.css
../skins/lightbox
lightbox.css
../
ibox.js
ejemplo.html
box_ejemplo.html
../imagenes
eso ultimo, son ejemplos ya listos para que los chequen ;)
una vez que descomprimimos los archivos al directorio de nuestro sitio vamos a pasar a una pagina y la vamos a abrir con nuestro editor web favorito
veremos algo como esto, claro pero mas trabajado:
este archivo viene incluido en el paquete que prepare para que se den una idea se llama ejemplo.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iBox v2</title>
</head>
<body>
hola
</body>
lo primero que haremos sera incluir el archivo .js en nuestra pagina entre el <head></head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="ibox.js"></script>
<script type="text/javascript">iBox.setPath('');</script>
entonces, nos tendria que quedar algo como esto:
<!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" />
<title>iBox v2</title>
<script type="text/javascript" src="ibox.js"></script>
<script type="text/javascript">iBox.setPath('');</script>
</head>
<body>
hola
</body>
una vez que hizimos esto, ya incluimos el script en nuestra pagina, ahora, vamos a definir la hoja de estilos que debe cargar dicho script, esto lo haremos definiendo entre en <head></head>
<link rel="stylesheet" href="../skins/darkbox/darkbox.css" type="text/css" media="screen"/>
entonces, nos quedara algo como esto:
<!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" />
<title>iBox v2</title>
<script type="text/javascript" src="ibox.js"></script>
<script type="text/javascript">iBox.setPath('');</script>
<link rel="stylesheet" href="../skins/darkbox/darkbox.css" type="text/css" media="screen"/>
</head>
<body>
hola
</body>
ahora que cargamos los estilos del ibox, e incluimos es script, lo que debemos hacer es dar el comando para ejecutar dicho script, ibox se puede usar de muchas maneras, la primera que veremos, sera para cargar otro HTML dentro de la pagina
para eso, usaremos un link normal
[url="box_ejemplo.html"]box_ejemplo.html[/url]
pero le incluiremos la variable
rel="ibox"
bueno, entonces, el documento quedara mas o menos asi:
<!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" />
<title>iBox v2</title>
<script type="text/javascript" src="ibox.js"></script>
<script type="text/javascript">iBox.setPath('');</script>
<link rel="stylesheet" href="../skins/darkbox/darkbox.css" type="text/css" media="screen"/>
</head>
<body>
hola
[url="box_ejemplo.html"]box_ejemplo[/url]
</body>
ahora que hemos terminado con los links, vamos a probar el ibox para las imagenes
<a href="images/image_1b.jpg" rel="ibox" title="Good Barbeque at 1024x450!">[img]images/small/image_1.jpg[/img]
igual usando el
rel="ibox"
entonces nuestro archivo se vera algo asi:
<!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" />
<title>iBox v2</title>
<script type="text/javascript" src="ibox.js"></script>
<script type="text/javascript">iBox.setPath('');</script>
<link rel="stylesheet" href="../skins/darkbox/darkbox.css" type="text/css" media="screen"/>
</head>
<body>
hola
este es un ejemplo cargando otros .html
[url="box_ejemplo.html"]box_ejemplo[/url]
</p>
Este es un ejemplo con imagenes
<a href="images/image_1b.jpg" rel="ibox" title="Imagenes">[img]images/small/image_1.jpg[/img]
</p>
</body>
y para los videos de youtube Wink solo tienen que ponerlo asi porque es un plug in
Code:
[url="http://www.youtube.com/watch?v=Sr2JneittqQ"]Video[/url]
el archivo final quedaria asi:
<!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" />
<title>iBox v2</title>
<script type="text/javascript" src="ibox.js"></script>
<script type="text/javascript">iBox.setPath('');</script>
<link rel="stylesheet" href="../skins/darkbox/darkbox.css" type="text/css" media="screen"/>
</head>
<body>
hola
este es un ejemplo cargando otros .html
[url="box_ejemplo.html"]box_ejemplo[/url]
</p>
Este es un ejemplo con imagenes
<a href="images/image_1b.jpg" rel="ibox" title="Imagenes">[img]images/small/image_1.jpg[/img]
</p>
[url="http://www.youtube.com/watch?v=Sr2JneittqQ"]Videos de Youtube[/url]
</body>
espero les haya servido, saludos
ATENCION: este script solo ha sido probado en Opera y firefox IE no (tenia que ser IE) :wink: :wink:
