Ayuda con Lightbox o Facebox...

Lizpi · #1 (**permalink**) 02/06/2008, 18:09

en un tema anterior 00siete me recomendó esta página http://www.dynamicdrive.com/dynamicindex4/indexb.html para obtener una mejor presentación de mis imágenes y es q' tengo q' colocar muchas en mì página

me gustaría hacerlo con Lightbox o Facebox (el q' sea más fácil) pero lamentablemente no sé de javascript y ya me he bajado todo, he tratado de seguir los pasos q' ahi indica pero tengo mil dudas y necesito q' alguien me explique como hacerlo

entre mis dudas son las siguientes:

el código del primer paso

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>

bien sé q' tengo q' colocarlo dentro de HEAD pero el siguiente paso no comprendo bien como debo hacerlo

2: Create your "thumbnail" HTML code. Three basic flavours are supported:

<a href="dog.jpg" rel="lightbox" ><img src="dog_thumb.jpg" /></a>

-¿Cómo es q' la imagen de "dog.jpg" luego es "dog_thumb.jpg"? solo se le agrega el "_thumb"? o hay q' hacer otra cosa?

-¿Dónde introduciré este código(del 2o.) exactamente? en <BODY>? siempre dentro de HEAD? o donde?

-¿Dónde coloco lo q' está en el zip q' dice q' hay q' bajar? en la carpeta lib de java? en la carpeta donde está mi pág.? o donde?

si alguien puede explicarme por favor o si hay un tutorial q' explique paso a paso agradeceré su ayuda

gracias

Mikmoro · #2 (**permalink**) 02/06/2008, 18:47

Cita:

Iniciado por Lizpi

2: Create your "thumbnail" HTML code. Three basic flavours are supported:

<a href="dog.jpg" rel="lightbox" ><img src="dog_thumb.jpg" /></a>

-¿Cómo es q' la imagen de "dog.jpg" luego es "dog_thumb.jpg"? solo se le agrega el "_thumb"? o hay q' hacer otra cosa?

-¿Dónde introduciré este código(del 2o.) exactamente? en <BODY>? siempre dentro de HEAD? o donde?

-¿Dónde coloco lo q' está en el zip q' dice q' hay q' bajar? en la carpeta lib de java? en la carpeta donde está mi pág.? o donde?

Primero debes crear tu versión miniatura (thumbnail) con un programa de edición de fotos al tamaño que quieras, y que le pongas un nombre tipo "tu_foto:thumb.jpg". En el ejemplo está hecha y te dice que pongas el código html del enlace como te indica.

El enlace lo deberás colocar en el body, claro. Es un enlace, ¿no? pues irá en la parte visible del código, es decir, en el body.

Por último debes descomprimir el zip y colocar los archivos donde te indica.

Pon aquí las instrucciones que te da paso a paso y vamos a leerlas juntos, verás qué fácil si las sigues con calma. Aunque te advierto que si tienes estás dudas, no estoy nada seguro de que debieras intentar usar lightbox.

Mikel.

Lizpi · #3 (**permalink**) 02/06/2008, 19:05

jajajaja

gracias

bueno realmente estoy iniciando con todo esto pero al menos quiero intentarlo a ver q' pasa
verás lo q' pasa es q' yo le pregunté a mi profesor como podía hacer ese efecto para presentar mis imágenes ya q' mi pág. tiene muchas, su respuesta fue: hay una forma, averiguela y hagala quiero ver si lo hace.
y bueno me estoy jugando una nota aparte q' quiero aprender ;) es por eso q' quiero intentarlo y si me ayudas mejor ^_^

gracias

Lizpi · #4 (**permalink**) 02/06/2008, 19:09

estos son los pasos:

Directions

Step 1: Insert the below code in the HEAD section of your page:

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>Step 2: Create your "thumbnail" HTML code. Three basic flavours are supported:

<a href="dog.jpg" rel="lightbox" ><img src="dog_thumb.jpg" /></a><a href="cat.jpg" rel="lightbox" title="Caption- cute cat!"><img src="cat_thumb.jpg" /></a><a href="dan.jpg" rel="lightbox" title="My best friend Dan">Dan</a>As you can see, the thumbnail code just consists of a standard <A> tag with its "href" attribute set to the image to show, an extra attribute rel="lightbox" to separate this link from ordinary links, and finally, an optional "title" attribute that will show a caption if set. You're free to use either a thumbnail image or text link as the interface to launching the enlarged image.

Step 3: Last but certainly not least, this script is made up of a few external files/images, as referenced in the code of Step 1. Download lightbox.zip, and upload its contents to a folder on your site. Then make sure the paths used in the code of step 1 correctly points to this directory. FYI, lightbox.zip contains these files:

lightbox.js - the main script.
lightbox.css - basic style and tricky PNG support.
overlay.png - 80% opacity, black tile used to create shadow.
loading.gif - mock status bar used in examples above.
close.gif - 'X' graphic placed in top-right corner.
That's it! Enjoy this superb script.

Notes
Inside lightbox.js, there are two configurable variables:

var loadingImage = 'loading.gif'; //path to the "loading animation" image
var closeButton = 'close.gif'; //path to the "close" button image

luego pruebo a ver q' tal ;)
gracias

Mikmoro · #5 (**permalink**) 03/06/2008, 10:29

Bueno, en este caso no sé si te debería ayudar mucho, porque eres tú quien debe aprobar, y seguro que si te han puesto este ejercicio, es que en el curso dispones de la información suficiente como para poder hacerlo

Si tal y como te dije vamos leyendo:

Cita:

Insert the below code in the HEAD section of your page:

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>

Imagino que entiendes algo de inglés, así que traduce. Inserta este código tal cual en la parte del head de la página:

<head>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js">
</head>

Cita:

Cambia los nombres de las imágenes por los tuyos propios, y para cada una crea una imagen normal (la que quieres ver grande) y una miniatura (con el nombre tipo dog_thumb.jpg, por ejemplo).
Ahora inserta los nombres de las imágenes en las etquetas de los enlaces, e inserta las etiquetas donde quieres que aparezcan los enlaces, por ejemplo:

<body>
<a href="dog.jpg" rel="lightbox" ><img src="dog_thumb.jpg" /></a>
</body>

Todo eso es un único enlace.

Ahora coloca las imágenes donde le has dicho que deben estar en el path de los enlaces, en este caso en la misma carpeta que el html.

Desempaqueta el zip y coloca todos los archivos en su sitio, siguiendo las rutas que hayas indicado en la cabecera, en este caso la misma carpeta del html.

Y listo. Eso funciona sin más. Pon cuidado al poner las rutas hasta los archivos que debe buscar el código y todo funcionará.

Ya dirás si tienes complicaciones. Y recuerda que es mejor aprender que aprobar

Mikel.

Lizpi · #6 (**permalink**) 03/06/2008, 22:02

Hola!

gracias por tu ayuda ya había hecho los pasos asi como indica lo q' me faltaba era crear las imágenes "nombre_thumb.ext" bueno está super funciona muy bien gracias por la paciencia.

y respecto a lo de <<<seguro que si te han puesto este ejercicio, es que en el curso dispones de la información suficiente como para poder hacerlo>>>
bueno no me pusieron este ejercicio, solo era crear una web con html puesto que solo hemos visto lo básico de HTML con un manual de éste, yo he hecho mi página pero como tiene muchas imágenes le consulté al prof. q' había visto este efecto en una página y q' me gustaría hacerlo q' como lo podía hacer, y pues solo me dijo q' averiguara q' sería interesante si lo podía hacer.
más creo q' lo hizo para ver si lo intentaba o me acomodaba y me evitaba otro trabajo, pero como era algo de lo cual tenía mucha curiosidad x aprender x eso llegué aki de preguntona

te agradezco mucho q' me ayudaras trataré de seguir aprendiendo

Mikmoro · #7 (**permalink**) 04/06/2008, 16:56

Ah, de acuerdo.

Hubo por aquì hace poco uno que puso prácticamente las preguntas del examen, y le convencimos de que las respuestas debían estar en su libro de texto o en los apuntes. Pensaba que te habían encargado el ejercicio concreto, o al menos que al animarte a hacerlo era porque se trataba de materia vista en el curso.

Me alegro de que te hayas apañado.

Mikel.

Lizpi · #8 (**permalink**) 04/06/2008, 22:44

jajaja
bueno yo no haría eso, soy bastante dedicada y trato de esforzarme, x eso ando de curiosa queriendo hacer las cosas si puedo mejor de como me las piden. Por eso insistía en q' iba a intentarlo y gracias a tu ayuda me funcionó ;)
x cierto tambien probé con el otro ejemplo q' me dejaste en el otro tema q' la imágen se agranda al pasar el cursor sobre ella también funciona muy bien ;)

gracias de nuevo