Galería de Imágenes

[martim01]

Buenos días y ¡Feliz Año Nuevo! a todos. Estoy creando una página Web y quiero agregar un apartado de galería de imágenes. La página la estoy haciendo en PHP5. Quiero poner una página PHP en la que se muestren las miniaturas de algunas fotografías y cuando piquemos sobre las miniaturas, aparezca la misma imagen más grande y con una apariencia bonita desde la que se permita poder pasar de la imagen actual a la imagen posterior o volver a la anterior. Sé crear la página PHP en la que poner las miniaturas de las imágenes, lo que no sé y por ello os escribo, es crear la vista de la imagen en tamaño mayor y que permita pasar a las imágenes posteriores y anteriores. Si me podéis orientar, os lo agradecería. Saludos.

[Eleazan]

Puedes usar algún plugin jQuery / js para crear el efecto "galeria" que dices

Por ejemplo, podrías usar PrettyPhoto

O bien Pirobox

Básicamente, la miniatura (thumbnail) enlaza a la versión original de la imagen, y así cuando haces click en ella, se "abre". Lo q te aporta jQuery es que en vez de "abrir" una nueva ventana, o bien, cargar solo la foto... te la carga en una "ventana modal" (como si fuese un alert!), con efectos de transicion si quieres entre las distintas fotos que tenga la galeria :)

[lizetbr2008]

Iniciado por Eleazan

Por ejemplo, podrías usar prettyPhoto
O bien Pirobox

Tambien estoy buscando algo parecido... voy a probar con tu sugerencia de lo poco que vi... quedarian bien en mi proyecto

[martim01]

Gracias Eleazan. Probaré tu sugerencia y te contaré cómo me ha ido. ¡Feliz Año Nuevo para todos!

[jacohawk]

yo ecesito que al hacer click en una miniatura (en mi portafolios) se agrande la imagen,
eso ya lo tengo hecho, pero lo que necesito es sacar la URL de cada imagen en miniatura del post (de wordpress)
No sé si me he explicado, este es mi código:

<h2 class="project_title"><a id="single_image" href="<?php the_post_thumbnail(); ?>"><?php the_title(); ?></a></h2>

Pero no me va, por qué no??

[Eleazan]

Creo q deberías usar

Código PHP:

  $info = get_the_post_thumbnail($id);
$src = $info->src; 
   

Así, en $src tendrías la url del thumbnail :O

PD: Jacohawk, no tiene nada q ver lo q has dicho con el post... deberias haberlo puesto en otro xD

[jacohawk]

Sinceramente ya lo intenté, pero me pone "Debe escribir un título más descriptivo para el tema" ponga lo que ponga, ya no sé qué hacer xDDD

[martim01]

Buenos día: Estoy intentando poner en funcionamiento la galería de imágenes con PrettyPhoto pero no me toma el formato del modelo light_rounded que he seleccionado dentro de la caroeta prettyPhoto. No sé si la ubicación de la carpeta prettyPhoto no es la correcta en el directorio de la web, o que no he definido correctamente los parámetros en la página PHP desde la que quiero que se muestre mi galería. Adjunto el código que tengo creado, con el que se me muestran las miniaturas y cuando pico sobre ellas se me enlaza a la imagen de mayor tamaño, pero no con el formato de imagen light_rounded que he seleccionado. No creo que el error esté en el código de la librería o en el de inicio de prettyPhoto, pero también lo adjuntaré por si podéis, por favor, orientarme. Gracias.

Código de librería incluido en la cabecera de la página en la que se abre las miniaturas:

<script type="text/javascript" src="js/jquery.js" charset="utf-8"> </ script> <link rel = "stylesheet" href = "css / prettyPhoto.css" type = "text / css "media =" screen "charset =" UTF-8 "/> <script type="text/javascript" src="js/jquery.prettyPhoto.js" charset="utf-8"> </ script>



Código incluido en el cuerpo y creo que es el que está mal en alguna parte que no localizo:

<a href="images/fullscreen/10.jpg" rel="prettyPhoto[light_rounded]" title="Asamblea Granada 2010."><img src="images/thumbnails/t_10.jpg" width="60" height="40" border="0" alt="Asamblea Granada 2010" /></a>

<a href="images/fullscreen/11.jpg" rel="prettyPhoto[light_rounded]" title="Asamblea Granada 2010."><img src="images/thumbnails/t_11.jpg" width="60" height="40" border="0" alt="Asamblea Granada 2010" /></a>

<a href="images/fullscreen/29.jpg" rel="prettyPhoto[light_rounded]" title="Asamblea Granada 2010."><img src="images/thumbnails/t_29.jpg" width="60" height="40" border="0" alt="Asamblea Granada 2010" /></a>

<a href="images/fullscreen/31.jpg" rel="prettyPhoto[light_rounded]" title="Asamblea Granada 2010."><img src="images/thumbnails/t_31.jpg" width="60" height="40" border="0" alt="Asamblea Granada 2010" /></a>

<a href="images/fullscreen/57.jpg" rel="prettyPhoto[light_rounded]" title="Asamblea Granada 2010."><img src="images/thumbnails/t_57.jpg" width="60" height="40" border="0" alt="Asamblea Granada 2010" /></a>

<a href="images/fullscreen/69.jpg" rel="prettyPhoto[light_rounded]" title="Asamblea Granada 2010."><img src="images/thumbnails/t_69.jpg" width="60" height="40" border="0" alt="Asamblea Granada 2010" /></a>



Código incluido antes del cierre del cuerpo:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal', /* fast/slow/normal */
opacity: 0.80, /* Value between 0 and 1 */
showTitle: true /* true/false */
});
});
</script>



Saludos.