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"/>
Popularity: 4% [?]









Febrero 12th, 2008 at 9:22 am
Qué chulo …
Parece muy útil y queda muy bien!!
Febrero 12th, 2008 at 9:38 am
Se queda de lujo, muy muy bueno
Febrero 12th, 2008 at 10:25 am
Muy interesante. Me lo apunto porque el efecto es chulísimo y ya cuando lo vi en tu blog me quedé con el gusanillo.
Febrero 12th, 2008 at 12:40 pm
Intruso, gracias por reconvertir mis explicaciones para los de Wordpress, que yo no tengo ni idea; la verdad es que el script es muy bueno
Febrero 12th, 2008 at 1:38 pm
Ni me he enterado ni nada ni veo ningún cambio en las fotos.
¿¿??
Febrero 12th, 2008 at 1:39 pm
Retiro lo dicho, que he ido al post de Yo misma y ya está todo claro.
Gracias.
Febrero 14th, 2008 at 2:51 am
lol !! tio muy bueno este manual, este finde me lo curro sin falta ya sabes que me va a venir muy bie,
Febrero 19th, 2008 at 12:07 am
[...] !!! Al pinchar en las imágenes podemos verlas ampliadas [...]
Abril 14th, 2008 at 1:58 am
[...] intruso.info encontré este excelente tutorial sobre el uso de PopBox, una solución javascript para el control [...]
Mayo 14th, 2008 at 10:29 am
Muy bueno Intruso! estoy deseoso de probarlo!