RSS
people
Apr 13 2008

PopBox - miniaturas con estilo

En intruso.info encontré este excelente tutorial sobre el uso de PopBox, una solución javascript para el control de miniaturas en los post. Realmente me gustó mucho el efecto que se consigue.
Lo más interesante es que nos permite diferentes efectos de ampliación. Explico primero los simples pasos de instalación:

INSTALACION

  • Descarga PopBox desde aquí
  • Descomprime el archivo descargado.
  • Dentro del archivo hay tres carpetas: Images, scripts y stylesheets
  • Sube a la raíz de tu servidor, el contenido de las carpetas scripts y stylesheets (o sea popbox.js y style.css
  • En el panel de administración de WordPress, en las opciones de diseño, abre y edita el archivo header.php y agrega justo antes de /head, lo siguiente:
PLAIN TEXT
CODE:
  1. <script src="TU_ALOJAMIENTO/PopBox.js" type="text/javascript"></script>
  2. <link type="text/css" src="TU_ALOJAMIENTO/PopBoxStyles.css" />

  • Sustituye donde dice TU_ALOJAMIENTO por la ubicación donde subiste los archivos anteriores

Y así de fácil ya estamos listos para empezar a usar PopBox.

Ahora en cualquier entrada debemos colocar el siguiente código:

PLAIN TEXT
CODE:
  1. <img src="URL_imagen" class="PopBoxImageSmall" style="width: 450px; height: 187px;" onclick="Pop(this,50,'PopBoxImageLarge');" pbshowrevertbar="false" bshowreverttext="false" pbshowrevertimage="false" />

Una pequeña explicación:

  • src es la imagen a mostrar (URL_imagen)
  • class es la clase CSS que usamos para mostrar un cursor diferente
  • style es el estilo CSS donde, en este caso, definimos el ancho y el alto de la miniatura
  • pbshowrevertbar, pbshowreverttext, pbshowrevertimage son atributos especiales que controlan los textos y pondremos en false para no utilizarlos.

Ejemplos con su propio código

Simplemente ampliar (clic sobre la imagen)

Codigo a usar

PLAIN TEXT
CODE:
  1. <img class="PopBoxImageSmall" style="width: 450px; height: 250px;" onclick="Pop(this,50,'PopBoxImageLarge');" src="http://virtualizado.net/wp-admin/URL_Imagen" alt="" />

Ampliar con texto (clic sobre la imagen)

Código a usar

PLAIN TEXT
CODE:
  1. <img class="PopBoxImageSmall" style="width: 450px; height: 250px;" title="Click para ampliar/reducir" onclick="Pop(this,50,'PopBoxImageLarge');" src="http://virtualizado.net/wp-admin/URL_Imagen" alt="" />

Esta publicación fue escrita por kryptOS en April 13, 2008 a las 6:16 pm bajo Internet. Usa el Permalink. Sigue los comentarios en el RSS de esta publicación.

Deja tu comentario