Question

Hola, quiero implementar un button que al cliquear sobre el este me abra una ventana dentro del mismo tab del browser y en esta darle las opciones de añadir fotos, ponerle un nombre y una descripción al álbum así como seleccionar a una foto para que sea el cover del álbum, quiero que pueda mostrar el proceso de subida en un progressbar y una vez esté completado muestra la imagen en cuestión subida y pase a subir la siguiente, para el SEO cada imagen subida podrá especiicarle un nombre al fichero o se establecerá por el nombre del albúm y enumerada( file: [nombre_album+[num_de_foto]].jpg), las imágenes serán cambiada de tamaño a 800x600 a través de código, una vez que todas las fotos estén subidas se habilitará el button de publicar y cuando este se clicquee se cierre o desaparezca la ventana y se publique el álbum Fotográfico.
Alguien puede recomendarme que deba estudiar para hacer cada paso que planteo.
Saludos Dairon
Foto de la Idea:

Comments

Te dejo un enlace interesante:
http://www.kabytes.com/programacion/subir-archivos-jquery-html5-javascript-flash/

---

Gracias, están buenos revisaré cual escojo para integrar a mi página y configurarlo a mi gusto para lograr la interfás que muestro en mi pregunta.

---

Si tu pregunta es saber que se requiere para hacer un sistema así, necesitas.

• Jquery y el uso de ventanas modales
• carga de archivos via ajax.
• manejo de la libreria GD para php ( para poder manipular la imagen en el servidor, generalmente frameworks como laravel, codeigniter tienen una libreria ya incluida )
• guardar información de la imagen en la base de datos, nombre, tamaño, mime type, ruta, etc.
• crear una estructura en la base de datos para las imagenes y galerias, album id | image id | user id | etc

para simplificar tu trabajo existen librerias y frameworks, esto te ayudaría a realizarlo mucho mas rápido.

---

Realmente utilizaré librerias, probaré las que mensionó @carlossevi para agilizar mi trabajo pero tengo que estudiarlas para gestionar los datos como mencionó @white dentro de la base de datos.

Answer 1

Para la ventana nueva que se abra al oprimir un botón en la misma pantalla te recomiendo Boostrap - Modals:

http://getbootstrap.com/javascript/#modals

Y para la barra de proceso Pace.js:

http://github.hubspot.com/pace/docs/welcome/