Imaginemos que desea crear una página que muestre instantáneas de su último trabajo. Una forma de hacer esto sería codificar las imágenes en su documento. La repercusión obvia es que, cada vez que desee agregar un nuevo elemento, debe actualizar manualmente su documento html. Otro método sería almacenar y recuperar la información de una base de datos MYSQL. Esto funcionará perfectamente, aunque para muchos sitios, esta solución puede ofrecer mucho más poder del que se necesita técnicamente, sin mencionar el aumento en los costos de alojamiento..

En tales casos, la mejor solución es hacer que PHP escanee su carpeta de "cartera" y cree dinámicamente el código para usted. Si desea actualizar su página con una nueva instantánea, todo lo que necesita hacer es arrastrar la imagen, y su respectiva miniatura, a las carpetas apropiadas, y PHP hará el resto. Vamos a construirlo ahora!

Nuestra misión

Vamos a resumir brevemente lo que debemos lograr.

• Utilice PHP para escanear nuestra carpeta de cartera. Luego pasará por cada archivo, es decir, una imagen, y luego lo mostrará en la página..
• Estilo nuestro contenido un poco usando CSS.
• Cuando los usuarios hacen clic en una miniatura, usaremos jQuery para cargar la versión grande de la imagen en el panel principal.
• Si el usuario tiene Javascript deshabilitado, simplemente será dirigido a una nueva página que contiene la imagen a tamaño completo

Cómo usarlo

Agregar una nueva imagen a nuestro portafolio es simple. Tome una instantánea de su sitio web, folleto, tarjeta postal, etc. y dimensione a 500px x 350px. Coloque esta imagen dentro de la carpeta "imágenes / destacados".

A continuación, cree una miniatura que sea 50px x 50px. Coloque esta imagen dentro de la carpeta "images / tn".

Debe asegurarse de que tanto las imágenes de tamaño completo como las de miniatura tengan exactamente el mismo nombre de archivo.

Nuestro HTML final

          
 
Algunos portafolio
 
 '; ?> 
 
     '; ?> 
 
  

Nuestro CSS final

Miralo aqui.

Compensación para IE6

Por suerte, solo tenemos una cosa que arreglar. Si observa la imagen de arriba, verá que la lista #options no ordenada no contiene los elementos de su lista flotante. Mientras que los navegadores modernos borrarán correctamente los elementos gracias a nuestro "desbordamiento: oculto"; estilo, IE6 necesita una regla más. Agregue esto a su hoja de estilo.

 ul # options … varios estilos… altura: 1%; 

Podría haber puesto la altura a cualquier cosa y aún funcionaría. Piensa en ello como Drago golpeando IE6 en la cara y diciéndole "¡Despierta!". Este estilo obliga a IE6 a expandirse tanto como sea necesario para eliminar a sus hijos.

El Javascript completo (jQuery)

 $ (function () $ .preloadImage = function (path) $ ("# Featured img"). attr ("src", path); $ ('ul # options li img'). click (function () $ ('ul li img'). removeClass ('selected'); $ (this) .addClass ('selected'); var imageName = $ (this) .attr ('alt'); $ .preloadImage ('images / Featured / '+ imageName); var chopped = imageName.split ('. '); $ (' # Featured h2 '). remove (); $ (' # feature ') .prepend ('
'+ picado [0] +'
') .children (' h2 '). fadeIn (500) .fadeTo (200, .6); ); $ ('ul # options li a'). click (function () return false;); );

Crédito adicional

Hay formas de crear imágenes en miniatura de nuestras imágenes dinámicamente. Trate de encontrar una manera de hacer que PHP explore nuestra carpeta "destacada" y luego cree dinámicamente una versión en miniatura y guárdela dentro de la carpeta "tn".

• Suscríbase a la fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios..