Pedir presupuesto

Galería de Imagenes con PHP, Css y jQuery

Muchas veces nos vemos en la necesidad de incluir una galería de imágenes en nuestra web. Muchos (desconociendo lenguajes de servidor o por no disponer del hosting necesario) utilizan simple HTML, con la desventaja de que por cada imagen que queramos incluir tendriamos que tocar el código HTML.

Para eso existen lenguajes como PHP con el que podremos hacerlo dinámicamente.

Por lo tanto, vamos a crear un ejemplo en PHP creando una galería con las imágenes que contenga una carpeta en nuestro servidor (como por ejemplo puede ser nuestro Portafolio), en las que si el usuario hace clic en una de las imágenes, utilizaremos jQuery para ampliarla.

Esquema de la mini-aplicación:

  1. Usar PHP para «escanear» nuestra carpeta con las imágenes del portafolio, mostrando cada imagen (thumbnail) en la página
  2. Darle estilo con CSS
  3. Cuando el usuario haga clic en el Thumbnail, usaremos jQuery para cargar la versión a mayor tamaño en la misma página.
  4. Si el usuario tiene desabilitado Javascript, simplemente direccionaremos a una nueva página que contenga la imagen a tamaño completo.

Estructura de Carpetas

Creamos la estructura de las carpetas para las imagenes que tendrá que quedar de la siguiente manera:

->IMAGES (raiz de la aplicación)
–>PORTAFOLIO
–>PORTAFOLIO_TN

En la carpeta «PORTAFOLIO» añadiremos las imagenes. En nuestro ejemplo con un tamaño de 400 x 144 (px).
La ruta de una imagen a tamaño completo quedaria por ejemplo de la siguiente manera: IMAGES/PORTAFOLIO/imagen1.jpg

En la carpeta «PORTAFOLIO_TN» añadiremos las imagenes en miniatura (Thumbnails). En nuestro ejemplo con un tamaño de 200 x 72 (px).
La ruta de una imagen reducida (thumbnail) quedaria por ejemplo de la siguiente manera: IMAGES/PORTAFOLIO_tn/imagen1.jpg

¡¡ Muy importante !! Las imágenes tienen que tener el mismo nombre. Es decir si en la carpeta PORTAFOLIO se llama imagen1.jpg, en la PORTAFOLIO_TN tiene que llamarse tambien imagen1.jpg.

Codificando

Ahora empezamos a codificar nuestra página con los archivos necesarios (HTML, CSS, jQUERY).

Código HTML (index.php)

index.php

Código CSS (default.css)

[css]
html
{
background: #000 url(images/bg.jpg) no-repeat 50% 0;
}

body
{
font-family: helvetica, georgia, sans-serif;
text-align: center;
}

#container
{
text-align: left;
width: 500px;
margin: auto;
}

#container h1
{
color: #fff;
margin: .4em 0;
}

#featured
{
position: relative;
height: 160px;
overflow: hidden; /* might remove */
}

#featured h2
{
position: absolute;
bottom: 0;
margin: 0;
line-height: 1.3em;
padding: .2em;
background: black;
color: #fff;
text-align: center;
width: 400px;
filter: alpha(opacity=60);
-moz-opacity: 60;
opacity: .6;
}

ul#options
{
background: #000 url(images/bottom.jpg) repeat-x 0 100%;
overflow: hidden;
height: 20%;
margin: 1em 0 0 0;
padding: .5em;
/* margin: 10px 0 0 0;
padding: 10px;*/
border-top: 1px solid #8a8a8a;
border-bottom: 1px solid #f5f5f5;
}

#options li
{
float: left;
width: 240px;
list-style: none;
cursor: pointer;
}

#options li:hover img
{
border: 2px solid gray;
}

#options li img
{
width: 200px;
height: 72px;
}

.selected
{
border: 0px solid gray;
}

#options a
{
outline: none;
}

a img
{
border: none;
}
[/css]

Ahora tendremos un problema, ya que como siempre, Internet Explorer en su versión 6 no respeta los standars de codificación y tenemos que adaptar nuestro CSS añadiendo un pequeño hack en ul#options:

[css]ul#options {
height: 1%;
}[/css]

Código Javascript (js/scripts.js)

[js]
$(function() {

$(‘ul#options li img’).click(function() {
$(‘ul#options li img’).removeClass(‘selected’);
$(this).addClass(‘selected’);

var imageName = $(this).attr(‘alt’);

$(‘#featured img’).attr(‘src’, ‘IMAGES/PORTAFOLIO/’ + imageName);

var chopped = imageName.split(‘.’);
$(‘#featured h2’).remove();
$(‘#featured’)
.prepend(‘

‘ + chopped[0] + ‘

‘)
.children(‘h2’)
.fadeIn(500)
.fadeto(200, .6);

});

$(‘ul#options li a’).click(function() {
return false;
});
});

[/js]

Ejemplo:
Descarga:
Enlace:

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

Un comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es