jdmweb.com _ Cómo crear una galería de imágenes simple con PHP y jQuery_es

Hola estoy Jeremy, un desarrollador web desde Londres. Estoycompartiendo aquí las cosas interesantes que encuentro en laweb de la Web de codificación, PHP, MySQL, CSS y jQuery de

curso.

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

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 unamanera sencilla y dinámica. Por último, vamos a explicar cómo podemos configurar la mesa de luz plugin de jQuerypara 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 dela carpeta a la clase. También diga a la clase el tamaño que quieres que tu imagen para ser, y que maneja todo eltrabajo 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ásbuscando 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 parahacer que todo funcione:

1. Pon tus imágenes en una carpeta

Inicio Recursos Portafolio Acerca de mí

Póngase en contacto con

24/11/2010 jdmweb.com | Cómo crear una galería …

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

2. Incluya los archivos3. Cambiar las variables que coinciden con la propia4. Llame al método getPublicSide5. 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 carpetaen 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. Ustednecesitará 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, eltamañ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 queusted 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 carpeta

8. $ Elementos=array()

9. ){

10. $ This->Thumbsize=$ Thumbsize;

11. $ This->maxsize = $ maxsize;

12. $ This->FolderPath = $ FolderPath;

13. $ This->elementos = $ elementos;

14. }

15.



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 unallamada 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, semuestra el resultado final para el usuario, y establece la navegación LightBox, listos para ser utilizados por susvisitantes. ¿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 llamaloadImages getImageArray (). Como se verá en el siguiente código, getImageArray () utiliza la globalización phpfunción muy útil para poder leer el contenido del directorio dado, y busca imágenes. Esas imágenes son agregadasa 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, querecorre las imágenes, y para cada uno de ellos, genera una imagen en miniatura (realizado por el método degetImageThumbnail), 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. //=========================================//



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ánahí para configurar el plugin de LightBox. Es sólo un fragmento simple de código para decir que cada enlace que seencuentra 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, estacarpeta 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 lapá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 lapá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 deimagen. Es una solución simple que no requiere una base de datos para poder trabajar, pero que sigue siendodinámico en términos de margen de beneficio y generación de miniaturas.

¿Por qué no compartir esta aquí:



Enviar

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 paraver si hay una manera de modificar la ruta de entrada. ¿Es este el lugar para tratar de haceresto?Gracias!

Desde WBR 23/07/10 a las 03:18 { respuesta }

Deja tu comentario

Posted

6Me gusta

Descubra también:

Pseudo:

Correo electrónico:

Página web:

Mensaje:



Navegación rápida

InicioRecursosÚltimo mensaje: Creación de una galería deimágenes simple con PHP y jQueryRecursos más popularesAcerca de míPóngase en contacto conBúsqueda

Últimas Noticias Últimas Tweet

© Jeremy Desvaux de Marigny 2010 Volver al principio

Buscar:



jdmweb.com _ Cómo crear una galería de imágenes simple con PHP y jQuery_es

Documents

Transcript of jdmweb.com _ Cómo crear una galería de imágenes simple con PHP y jQuery_es