Esto no es ningún plugin, es una solución Javascript para agrandar las imágenes a la medida que tu quieras con estilo. Esto lo descubrí gracias a Yo misma, dió en el clavo, era justo lo que estaba buscando y por lo visto no era el único ya que desde que lo he puesto en algunos posts he recibido muchos emails de gente preguntando como lo hacía así que he decidio hacer un post para explicarlo, aunque ella también lo explicó muy bien en su blog.
Lo bueno de Popbox es que nos permite mostrar imágenes utilizando diferentes efectos de ampliación, moviéndolas o redimensionándolas de manera dinámica y, lo que mas me gustó, funciona perfectamente tanto en Firefox como en Internet Explorer.
INSTALACION:
Para poder empezar a utilizarlo lo primero que tenemos que hacer es descargarnos Popbox y descomprimirlo, como si de un plugin se tratase, hasta ahí fácil, no? Vereis que en su interior hay tres carpetas, Images, scripts y stylesheets. Lo único que teneis que hacer es subir a la raiz de vuestro servidor lo que hay en el interior de scripts y stylesheets, o sea, Popbox.js y Styles.css.
Lo siguiente será abrir nuestro panel de administración de wordpress y en el archivo header.php introducir justo antes de /head esto:
-
<script src="TU_ALOJAMIENTO/PopBox.js" type="text/javascript"></script>
-
<link type="text/css" src="TU_ALOJAMIENTO/PopBoxStyles.css" />
Sustituye donde pone TU_ALOJAMIENTO por la dirección donde has subido los archivos.
Ya tenemos todo listo para empezar a utilizar Popbox. Ahora en cualquier entrada tenemos que pegar este código para poder ver los mágnificos resultados que hemos conseguido.
-
<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 de lo que estamos poniendo es esta:
src es la imagen a mostrar
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.
Popbox tienes muchas variantes, desde poner titulos a las imagenes, poder ver una imagen en la miniatura y despues ver otra en grande, agrandar cuando cliquemos o agrandar cuando pasemos el ratón por encima. Si queréis ver todas las posibilidades que tenéis pasaros por aquí y descubriréis todo lo que podéis conseguir.
Aquí os dejo algunos ejemplos y los códigos que tenéis que introducir para conseguirlos.
Simplemente Ampliar
-
<img src="URL_Imagen" class="PopBoxImageSmall" style="width: 450px; height: 250px;" onclick="Pop(this,50,'PopBoxImageLarge');" pbshowrevertbar="false" pbshowreverttext="false" pbshowrevertimage="false" />
Ampliar con texto
-
<img class="PopBoxImageSmall" pbshowcaption="true" pbcaption="El texto" title="Click para ampliar/reducir" style="width: 450px; height: 250px;" src="URL_Imagen" onclick="Pop(this,50,'PopBoxImageLarge');" />
Ampliar con dos imagenes
-
<img src="URL_Imagen_1" class="PopBoxImageSmall" style="width: 450px; height: 250px;" onclick="Pop(this,50,'PopBoxImageLarge');" pbshowrevertbar="false" pbshowreverttext="false" pbshowrevertimage="false" pbSrc="URL_Imagen_2"/>
Mozilla Firefox 2.0.0.12 |S.O 
Windows XP
Ubuntu Linux
Internet Explorer 3.02 |S.O 
WordPress 2.3.2
