galería de imágenes jquery

[marianalfr]

Hola,

soy nueva en esto del desarrollo web y totalmente autodidacta, así que disculpadme si no me expreso correctamente.

Estoy haciendo [URL="http://www.marianalerma.com"]mi página web[/URL], en la que tengo un [URL="http://www.marianalerma.com/architecture.html"]índice de proyectos[/URL] en el que cada "thumbnail" corresponde a un proyecto. Me gustaría que al hacer click sobre el "thumbnail", apareciera una galería de imágenes en plan lightbox, pero que muestre las imágenes de ese proyecto, en lugar del "thumbnail" del proyecto siguiente, que tal y como tengo todo compuesto sería lo que haría una galería tipo lightbox.

No sé si me he explicado bien, pero he encontrado un plugin de jquery que se llama [URL="http://fancybox.net/home"]Fancybox[/URL] y con el que sé que se puede hacer esto (en los ejemplos que proporcionan, es la opción 'Image Gallery' de 'Examples of manual call'), pero no se explica en la página.

Si alguien supiera una manera sencilla de conseguir una galería así, sin necesidad de hacer otra página en la que colocarla, me sería de gran ayuda.

Muchas gracias de antemano.

[alexg88]

¿Cómo que no se explica? Tienes una sección dedicada exclusivamente a como usarlo y otra donde te dicen todas las funciones que tienen y sus parámetros y para que sirven.

Aquí te explican como usarlo:
http://fancybox.net/howto

[marianalfr]

(veo que la respuesta que he enviado antes no aparece )

Decía que en "how to" veo que explica perfectamente como crear una galería de varias imágenes, pero estando todas ellas en la página. En la mía, por ejemplo, podría hacer una galería con todos los thumbnails que forman mi índice de proyectos, pero lo que yo quiero es que al pinchar sobre cada thumbnail, salga una galería diferente que muestre una serie de imágenes que se encuentran en una carpeta de la base de datos de la web, pero no en la web en sí misma.

Es decir, necesito poder acceder a distintas galerías desde una página sin salir de ella, y sin tener todas las imágenes de las galerías referenciadas en dicha página.

Si eso también lo explica, entonces es que no tengo conocimientos suficientes de jquery, porque no lo veo... Así que si es así, pasad de mi y disculpad las molestias...

Gracias otra vez.

[marianalfr]

En efecto, en la página de fancybox no decía como hacerlo, pero tras muchas horas, MUCHAS, investigando en la red, he conseguido la solución en un grupo de google, dejo el link aquí por si alguien ha tenido el mismo problema que yo. Como es necesario unirse al grupo, pego también la información.

Un saludo.


Este es el link: http://groups.google.com/group/fancybox/browse_thread/thread/c8000121907eb362/


Y esta la solución (en inglés):

JFK:

You have to declare the set of images within your gallery somewhere
(unavoidable)
if you don't want a bunch of invisible "rel" elements in your html,
you may declare the set of images within the fancybox custom script
itself
you could place the script in a separated js file so it doesn't has to
increase the size of your html document though
so ... having a single thumbnail:

<a id="myThumb" href="javascript:;" ><img src="images/thumb.jpg"
alt="" /></a>

call the gallery with this script:
<script type="text/javascript">

// from this point in a separate js file optional
$(document).ready(function() {
$("#myThumb").click(function() {
$.fancybox([
'images/01.jpg',
'images/02.jpg',
{
'href': 'images/03.jpg',
'title': 'title for image 3'
},
{
'href': 'images/04.jpg',
'title': 'title for image 4'
}
], {
// fancybox options
'type' : 'image', //required
'padding': 0 // optional
}); // closes fancybox
}); // closes click
}); // closes ready

</script>


NOTICE that images without title use the path/name format per line
only while images with title have to be contained between { }
brackets, specifying both the href and title attributes for each
image.

[kriminalxp]

Puedes encontra una solucion mas clara y con demo

[URL="http://rogersoto.com/blog/?p=265"]http://rogersoto.com/blog/?p=265[/URL]