Edición de «Galeria de Imagenes con jQuery»

De KumbiaPHP Framework Wiki

Advertencia: no has iniciado sesión. Tu dirección IP se hará pública si haces cualquier edición. Si inicias sesión o creas una cuenta, tus ediciones se atribuirán a tu nombre de usuario, además de otros beneficios.

Puedes deshacer la edición. Antes de deshacer la edición, comprueba la siguiente comparación para verificar que realmente es lo que quieres hacer, y entonces guarda los cambios para así efectuar la reversión.

Revisión actual Tu texto
Línea 2: Línea 2:
  
 
Esta es una practica donde tendremos varias miniaturas de imagenes a mostrar en la vista, al seleccionar alguna de las imagenes, se nos abrira una ventana en jquery que tomara el alto y ancho de la imagen original a la cual podremos colocarle una descripcion. Puedes pasar de una imagen a otra desde esta ventana de presentacion, la cual tambien indica al pie, X imagen de N cantidad en total de imagenes presentes.
 
Esta es una practica donde tendremos varias miniaturas de imagenes a mostrar en la vista, al seleccionar alguna de las imagenes, se nos abrira una ventana en jquery que tomara el alto y ancho de la imagen original a la cual podremos colocarle una descripcion. Puedes pasar de una imagen a otra desde esta ventana de presentacion, la cual tambien indica al pie, X imagen de N cantidad en total de imagenes presentes.
 
Para tener una idea de lo que involucra este ejemplo, puedes consultar los siguientes screenshot:
 
[http://dl.dropbox.com/u/2807704/kumbiaPHP/screenshot/galeria_img_1.png galeria_imagenes] y [http://dl.dropbox.com/u/2807704/kumbiaPHP/screenshot/galeria_img_2.png galeria_imagen_seleccionada]
 
  
 
Esta es una practica muy sencilla, no incluye Modelos ni especificaciones en el Controller, esta basada unicamente en descargar el jQuery Lightbox y colocar sus archivos en sus correspondientes sitios en kumbiaPHP Framework. Luego el agregar algunas cosas en la plantilla e indicar la ruta de las imagenes en nuestra vista.
 
Esta es una practica muy sencilla, no incluye Modelos ni especificaciones en el Controller, esta basada unicamente en descargar el jQuery Lightbox y colocar sus archivos en sus correspondientes sitios en kumbiaPHP Framework. Luego el agregar algunas cosas en la plantilla e indicar la ruta de las imagenes en nuestra vista.
Línea 10: Línea 7:
 
== Descargamos jQuery Lightbox plugin ==
 
== Descargamos jQuery Lightbox plugin ==
  
 +
[[Archivo:Show.jpg]]
 
Descarga jQuery lightbox plugin de su Web [http://leandrovieira.com/projects/jquery/lightbox/ jQuery_Lightbox_plugin]
 
Descarga jQuery lightbox plugin de su Web [http://leandrovieira.com/projects/jquery/lightbox/ jQuery_Lightbox_plugin]
  
Línea 105: Línea 103:
  
 
Edita cada una de estas imagenes en tu editor de imagenes preferido y reducelas para crear una imagen en miniatura de cada una y guarda '''una copia''' para tener las imagenes en tamaño normal y en tamaño miniatura. Las miniaturas guardalas en '''app/public/img/galeria/miniaturas/'''
 
Edita cada una de estas imagenes en tu editor de imagenes preferido y reducelas para crear una imagen en miniatura de cada una y guarda '''una copia''' para tener las imagenes en tamaño normal y en tamaño miniatura. Las miniaturas guardalas en '''app/public/img/galeria/miniaturas/'''
Las miniaturas para esta practica se han llamado: img1_mini.jpg, img2_mini.jpg, img3_mini.jpg... img8_mini.jpg
 
  
 
La Vista:''' index.phtml''' la cual estara en '''app/views/index/index.phtml'''
 
La Vista:''' index.phtml''' la cual estara en '''app/views/index/index.phtml'''
Línea 156: Línea 153:
 
imageBtnClose: 'images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
 
imageBtnClose: 'images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
  
imageBlank: 'images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
+
imageBlank: 'images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
 
</source>
 
</source>
  
Línea 178: Línea 175:
  
 
== Descarga esta Practica ==
 
== Descarga esta Practica ==
Descarga este ejemplo: [http://dl.dropbox.com/u/2807704/kumbiaPHP/v1_b1/app_galeria_img.zip app_galeria_img] para el '''core''' del beta1
+
Descarga este ejemplo: [http://dl.dropbox.com/u/2807704/kumbiaPHP/v1_b1/app_galeria_img.zip app_galeria_img]
  
 
Cualquier ayuda que necesites sobre esta practica de Galeria de Imagenes con jQuery, puedes pasar por el IRC de KumbiaPHP, el Foro o la Listmail, siempre hay personas dispuestas a ayudarte en lo que necesites.
 
Cualquier ayuda que necesites sobre esta practica de Galeria de Imagenes con jQuery, puedes pasar por el IRC de KumbiaPHP, el Foro o la Listmail, siempre hay personas dispuestas a ayudarte en lo que necesites.

Ten en cuenta que todas las contribuciones a KumbiaPHP Framework Wiki pueden ser editadas, modificadas o eliminadas por otros colaboradores. Si no deseas que las modifiquen sin limitaciones, no las publiques aquí.
Al mismo tiempo, asumimos que eres el autor de lo que escribiste, o lo copiaste de una fuente en el dominio público o con licencia libre (véase Proyecto:Derechos de autor para más detalles). ¡No uses textos con copyright sin permiso!

Para editar esta página, responde la pregunta que aparece abajo (más información):

Cancelar Ayuda de edición (se abre en una ventana nueva)