24/11/2010 jdmweb.

com | Cómo crear una galería …

Hola estoy Jeremy, un desarrollador web desde Londres. Estoy

compartiendo aquí las cosas interesantes que encuentro en la
web de la Web de codificación, PHP, MySQL, CSS y jQuery de
curso.

Inicio Recursos Portafolio Acerca de mí

Póngase en contacto con

Creación de una galería de

imágenes simple con PHP y jQuery
Una galería de imágenes es una característica muy común de un sitio web a tener. Es una manera eficaz de
presentar bien un conjunto de fotos. Con la creciente popularidad de JavaScript plugin, galerías de imágenes son
en la actualidad en ejecución con ricas características, efectos y transiciones, con el fin de hacer hincapié en los
contenidos.

Cuando desea crear una galería de imágenes, hay varios pasos que participan en el proceso. En este tutorial,
veremos cómo se puede configurar todo, a continuación, añadir, eliminar o editar imágenes en su galería, de una
manera sencilla y dinámica. Por último, vamos a explicar cómo podemos configurar la mesa de luz plugin de jQuery
para trabajar con nuestras imágenes.

¿Cuáles son los beneficios de esta solución? Este método es taaan fácil de configurar, pero aún así logra mucho.
Poco esfuerzo, grandes recompensas. Usted sólo tiene que poner sus imágenes en una carpeta, y que dan ruta de
la carpeta a la clase. También diga a la clase el tamaño que quieres que tu imagen para ser, y que maneja todo el
trabajo duro por usted. Con sólo llamar a un método, se puede ver su galería en la página. Así que si estás
buscando una forma rápida y conveniente de poner una galería de imágenes en un sitio, siga leyendo.

Demostración

¿Cómo configurar

El Plan de Acción

Para resumir lo que se trata en este artículo, he aquí una breve lista de los pasos necesarios que debe tomar para
hacer que todo funcione:

1. Pon tus imágenes en una carpeta

http://jdmweb.com/resources/imgallery 1/6
24/11/2010 jdmweb.com | Cómo crear una galería …
2. Incluya los archivos
3. Cambiar las variables que coinciden con la propia
4. Llame al método getPublicSide
5. Gestiona tus imágenes

Paso 1: Pon tus imágenes en una carpeta

A medida que se va a trabajar con imágenes, lo primero que debe hacer es colocar las imágenes en una carpeta
en la estructura de directorios de su sitio.

Cuando todos están cargados, escriba la ruta de acceso a esta carpeta y vaya al paso 2.

Paso 2: Incluir los archivos

Vamos a echar un vistazo a los archivos que necesita incluir en el fin de obtener el administrador de trabajar. Usted
necesitará seis archivos: La jQuery Biblioteca, La imgallery PHP clase, archivo javascript y hojas de estilo,
sino también el LightBox guión y estilos a fin de presentar las imágenes muy bien:

1. / / Clase imgallery PHP

2. incluyen("ruta_destino / imgallery.php");
3.
4. / / Secuencias de comandos (jQuery + LightBox Plugin imgallery + Script)
5. <script de tipo="text / javascript" src="ruta_destino / jquery.js"> </script>
6. <script de tipo="text / javascript" src="ruta_destino / jquery.lightbox.js"> </script>
7. <script de tipo="text / javascript" src="ruta_destino / imgallery.js"> </script>
8.
9. / / CSS (CSS LightBox imgallery + CSS)
10. <link rel="stylesheet" tipo="text / css" href="ruta_destino / lightbox.css" />
11. <link rel="stylesheet" tipo="text / css" href="ruta_destino / imgallery.css" />

Paso 3: Cambiar las variables

Para trabajar, la clase se basa en tres variables, la ruta de la carpeta de donde las imágenes se almacenan, el
tamaño que quieres que tu miniaturas de ser, y el tamaño máximo de una imagen.

A fin de establecer los parámetros, abra el archivo imgallery.php, y las líneas de cambio 23, 24 y 25 a lo que
usted desea que la configuración sea:

1. //=======================================//
2. //============> <============// Constructor
3. //=======================================//
4. público en función __construct(
5. $ Thumbsize=96, / / Cambiar esto para ajustar el tamaño miniatura
6. $ Maxsize=640, / / Cambiar esto para ajustar el tamaño máximo de imagen
7. FolderPath $=". / lib / imgallery / imágenes", / / Cambiar esto coinciden con la ruta de la
8. $ Elementos=array()
9. ){
10. $ This->Thumbsize=$ Thumbsize;
11. $ This->maxsize = $ maxsize;
12. $ This->FolderPath = $ FolderPath;
13. $ This->elementos = $ elementos;
14. }
15.

http://jdmweb.com/resources/imgallery 2/6
24/11/2010 jdmweb.com | Cómo crear una galería …
Eso es todo, su galería es más o menos dispuesta a trabajar ahora, sólo tiene que abrir una página y hacer una
llamada a un método en particular.

Paso 4: Llame al método getPublicSide

Ahora que han cambiado las variables, la clase está listo para ponerse en acción.

Si usted apenas está buscando una manera rápida de hacerlo funcionar, abra la página, y escribir lo siguiente:

1. ImgGallery::getPublicSide();

Al hacer esta llamada, la lógica detrás de la galería se las fotografías de la carpeta especificada. A continuación,
dinámicamente cambia el tamaño de tus fotos y crea sus miniaturas basado en el tamaño dado. Por último, se
muestra el resultado final para el usuario, y establece la navegación LightBox, listos para ser utilizados por sus
visitantes. ¿No era tan fácil?

De revisión de código

Si desea conocer un poco más lo que está pasando en el código de sabios, vamos a tener una mirada en conjunto.

1. //=========================================//
2. //====> Fácil llamar a configurar todo <===//
3. //=========================================//
4. público en función de getPublicSide(){
5. Galería $ = nuevo ImgGallery();
6. Galería $->loadImages();
7. Galería $->pantalla();
8. }
9.

El método getPublicSide, crea una instancia de la imgallery objeto. A continuación, llama la loadImages método ()
para obtener las imágenes de la carpeta, y la pantalla () para escribir el margen de beneficio del resultado final.

Como no tiene nada de extraordinario, vamos a echar un vistazo a lo que sucede a continuación. El método llama
loadImages getImageArray (). Como se verá en el siguiente código, getImageArray () utiliza la globalización php
función muy útil para poder leer el contenido del directorio dado, y busca imágenes. Esas imágenes son agregadas
a la galería, ahora están listos para ser utilizados con el objeto.

Como nuestras fotos están listas, y se cargan en la galería, entonces se llama al método de visualización, que
recorre las imágenes, y para cada uno de ellos, genera una imagen en miniatura (realizado por el método de
getImageThumbnail), una foto tamaño (getMaxImage), y por supuesto, genera el marcado de la galería.

1. //========================================//
2. //=====> Lista de las imágenes para incluir <=====//
3. //========================================//
4. público en función de getImageArray(){
5. / / Dile a la clase en busca de imágenes dentro de esta carpeta
6. $ Path = $ this->FolderPath.'/{*. jpg, *. gif, *. png} ';
7. $ Imgarray=glob($ path,GLOB_BRACE)?glob($ path,GLOB_BRACE):matriz();
8. volver imgarray $; / / Retorno de las imágenes que se encuentran
9. }
10.
11. //=========================================//
12. //==> Escribe el marcado de la galería de <===//
13. //=========================================//
http://jdmweb.com/resources/imgallery 3/6
24/11/2010 jdmweb.com | Cómo crear una galería …
14. público en función de la pantalla($ mostrarlo=1){
15. $ Marcado='
16. id="easyimgallery"> <div
17. <ul> ';
18. si(!vacío($ this->elementos)){foreach($ this->elementos como $ img){
19. $ Thumb=$ this->getImageThumbnail($ img);
20. Maxsize $=$ this->getMaxImage($ img);
21. $ Nombreimg=final(explosión("/",$ img));
22. $ Marcado.='<li> <a href = "'.$ maxsize."style =" lightbox "title =" ".$ nombreimg."">
23. <Img src = "".$ pulgar."alt =" ".$ nombreimg.'"/>
24. </ A> </ li> ';
25. }}
26. $ Marcado.='
27. </ Ul>
28. </ Div> ';
29. si($ mostrarlo==1){ echo $ marcado; }
30. retorno $ marcado;
31. }
32.

Eso es todo por el lado de PHP realmente. En la parte delantera, los archivos de javascript que se incluyen están
ahí para configurar el plugin de LightBox. Es sólo un fragmento simple de código para decir que cada enlace que se
encuentra en la galería se comporta como una caja de luz:

1. jQuery(el documento).preparada(función() {
2. / / Configuración de la caja de luz
3. $("# easyimgallery uno").mesa de luz();
4. });

En este punto, el código está listo para funcionar. Si ha seguido los pasos y poner sus imágenes en la carpeta,
debe ver las miniaturas que aparecen en su página.

¿Cómo puedo añadir, quitar o editar las fotos de mi galería?

A medida que ahora entiendo, la galería trabaja con una carpeta. En cuanto a la galería es que se trata, esta
carpeta que contiene toda la información acerca de su galería. Basado en este concepto, si desea:

Agregar una imagen a la galería, simplemente copiarlo en la carpeta. La próxima vez que actualice la
página, que se incluirán.
Eliminar una imagen, simplemente sacarlo de la carpeta. La próxima vez que actualice la página, se habrá
ido.
Editar una imagen de la galería, basta con cambiar el nombre en su carpeta. La próxima vez que actualice la
página, el nombre será cambiado.

Conclusión

Esta clase práctica se encarga de la codificación de la galería sobre la base de una ruta de carpeta y tamaños de
imagen. Es una solución simple que no requiere una base de datos para poder trabajar, pero que sigue siendo
dinámico en términos de margen de beneficio y generación de miniaturas.

¿Por qué no compartir esta aquí:

http://jdmweb.com/resources/imgallery 4/6
24/11/2010 jdmweb.com | Cómo crear una galería …

Me gusta 6

Descubra también:

Deja tu comentario

Pseudo: Mensaje:

Correo electrónico:

Página web:

Enviar

Posted

Esta rutina parece asumir que se está ejecutando desde el directorio raíz, ya que pone un "/"
delante de la imagen de la guía para la ubicación de la fotografía y la imagen.
Por ejemplo, en mi sistema de desarrollo Estoy corriendo de
http://localhost/jQueryGalleryAndSliders/SimpleImageGallery/index.php

pero el enlace a una de las imágenes es:

http://localhost/images/cache/640x480. ~ ~ imágenes filename.png

Espero que tenga sentido? Estoy buscando en la función de visualización en imgallery.php para
ver si hay una manera de modificar la ruta de entrada. ¿Es este el lugar para tratar de hacer
esto?
Gracias!
Desde WBR 23/07/10 a las 03:18 { respuesta }

http://jdmweb.com/resources/imgallery 5/6
24/11/2010 jdmweb.com | Cómo crear una galería …
Buscar:

Navegación rápida Últimas Noticias Últimas Tweet

Inicio
Recursos
Último mensaje: Creación de una galería de
imágenes simple con PHP y jQuery
Recursos más populares
Acerca de mí
Póngase en contacto con
Búsqueda

© Jeremy Desvaux de Marigny 2010 Volver al principio

http://jdmweb.com/resources/imgallery 6/6