readers

RSS

Popbox, controla tus miniaturas con estilo

Lun, 11 Febrero 2008

Wordpress

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:

Código a introducir:
  1. <script src="TU_ALOJAMIENTO/PopBox.js" type="text/javascript"></script>
  2. <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.

Código a introducir:
  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 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


Código a introducir:
  1. <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


Código a introducir:
  1. <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


Código a introducir:
  1. <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"/>

Related Posts with Thumbnails

Popularity: 4% [?]

,

10 Comentarios to “Popbox, controla tus miniaturas con estilo”

  1. 1
    Lucía Says:

    Qué chulo …

    Parece muy útil y queda muy bien!!

  2. 2
    jose87 Says:

    Se queda de lujo, muy muy bueno ;)

  3. 3
    luigix Says:

    Muy interesante. Me lo apunto porque el efecto es chulísimo y ya cuando lo vi en tu blog me quedé con el gusanillo.

  4. 4
    Yo misma Says:

    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 ;)

  5. 5
    juan rafael Says:

    Ni me he enterado ni nada ni veo ningún cambio en las fotos.
    ¿¿??

  6. 6
    juan rafael Says:

    Retiro lo dicho, que he ido al post de Yo misma y ya está todo claro.
    Gracias.

  7. 7
    forat Says:

    lol !! tio muy bueno este manual, este finde me lo curro sin falta ya sabes que me va a venir muy bie, ;)

  8. 8
    F O R A T » Titulo del articulo: Servidor Web en Linux Debian 2 ( Sistema operativo ) » Says:

    [...] !!! Al pinchar en las imágenes podemos verlas ampliadas [...]

  9. 9
    .::virtualizado::.» Blog Archive » PopBox - miniaturas con estilo Says:

    [...] intruso.info encontré este excelente tutorial sobre el uso de PopBox, una solución javascript para el control [...]

  10. 10
    De Cabo Says:

    Muy bueno Intruso! estoy deseoso de probarlo!

Deja tu Comentario