Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home Webmaster

Galería de imágenes en php

6 junio, 2012
en Webmaster
0
Galería de imágenes en php

Vamos a crear una galería de imágenes utilizando php. No será necesario utilizar base de datos, vamos a mostrar las imágenes que se encuentran dentro de una carpeta. De esta forma podremos actualizar la galería solamente con subir más imágenes a la carpeta.

Resumen del Contenido

  • Descripción del proceso:
  • Código de la página Html
  • Javascript utilizado

Descripción del proceso:

Todo el proceso es basa en escanear el contenido de una carpeta con un pequeño scritp de php.

Primero tendremos que preparar las imágenes que pondremos de la siguiente forma en carpetas:

[highlight]images/featured/: en esta carpeta guardaremos las imágenes de mayor tamaño. Tamaño de la imágenes 500px x 350px.[/highlight]

[highlight]imagen/th/: en esta carpeta guardaremos la imágenes en miniatura. Tamaño de las imágenes 50px x 50px[/highlight]

El nombre de las imágenes grandes y miniaturas tiene que coincidir respectivamente, si no coinciden dará un error de imagen no encontrada.

Finalmente con un javascript vamos sacando la información de la carpeta

Código de la página Html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Galería de imagenes con PHP</title>
 <script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
 <script src="js/scripts.js" type="text/javascript"></script>
 <link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="container">
 <h1>Some Portfolio</h1>
 <div id="featured">
 <?php
 $featured_dir = 'images/featured/';
 $scan = scandir($featured_dir);
 echo '<img src="'. $featured_dir . $scan[2] . '" alt="image" />';
 ?>
 </div>

 <ul id="options">
 <?php
 $dir = 'images/tn/';
 $scan = scandir($dir);

 for ($i=0; $i<count($scan); $i++) {
 if ($scan[$i] != '.' && $scan[$i] != '..') {
 echo '
 <li>
 <a href="' . $featured_dir . $scan[$i] . '">
 <img src="'. $dir . $scan[$i] . '" alt="'. $scan[$i] . '" />
 </a>
 </li>';
 }
 }
 ?>
 </ul>
 </div>
</body>
</html>

En la línea:

[highlight]$featured_dir = ‘images/featured/’; [/highlight]

Indicamos la carpeta para las imágenes grandes

En la línea:

[highlight]$dir = ‘images/tn/’; [/highlight]

Indicamos la carpeta para las imágenes en miniatura

Javascript utilizado

El fichero scripts.js que hemos utilizado en el proceso es el siguiente:

$(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/featured/' + imageName);

var chopped = imageName.split('.');
 $('#featured h2').remove();
 $('#featured')
 .prepend('<h2>' + chopped[0] + '</h2>')
 .children('h2')
 .fadeIn(500)
 .fadeto(200, .6);

});

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

En la linea:

[highlight]$(‘#featured img’).attr(‘src’, ‘images/featured/’ + imageName);[/highlight]

vemos donde utilizamos la carpeta que incluye las imágenes grandes, cambiando aquí el nombre podríamos utilizar cualquier carpeta que queramos. Para cambiar el nombre tienes que hacerlo tanto en el código Html como en el javascript.

Ver demo

Descargar ficheros

Etiquetas: galería imagenesphp
ANUNCIO
Post anterior

Responsive Design. Consejos para Diseño Sensible

Próximo Post

FancyBox

Otros Posts

Auditoría WPO

Auditoría WPO

11 enero, 2021
0

¿Qué es WPO (Web Perfomance Optimization)? Una auditoría WPO es la parte de marketing que se encarga de analizar la velocidad de un sitio web y recomienda cambios para optimizar la velocidad de carga y...

Mejora el SEO local con Google My Business

Mejora el SEO local con Google My Business

9 enero, 2021
0

Todos los propietarios de empresas están buscando una manera de hacerse notar en los resultados de búsqueda. Ahora, mientras dure toda la pandemia del coronavirus va a ser vital ofrecer a los clientes un perfil...

Por favor logueate para comentar

Recomendados

Tutorial crear efecto metálico en un botón

Heramienta de Texto en Photoshop

29 enero, 2011
Mobile First Index

Mobile First Index

23 abril, 2020
Infografía: Anatomía de una landing page

Infografía: Anatomía de una landing page

30 septiembre, 2014
Errores mas comunes al crear una web

Errores mas comunes al crear una web

15 septiembre, 2014

Tutotial Monstersse

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .