JMiur [E]

PopBox!Gracias a Cosas Sencillas llegué hasta PopBox que es una impresionante librería escrita en JavaScript que nos permite mostrar imágenes utilizando diferentes efectos de ampliación, moviéndolas o redimensionándolas de manera dinámica y, por lo que he visto, funciona perfectamente tanto en Firefox como en Internet Explorer.

La configuración es bastante sencilla, bajamos el ZIP , lo descomprimimos y alojamos su contenido en un servidor:

PopBox.js es el script en si mismo
PopBoxStyles.css es la hoja de estilo (podemos copiar su contenido directamente en Blogger)

Las imágenes ya están alojadas en ImageShack pero pueden ser cambiadas o reubicadas siempre que editemos los archivos que las utilizan:

magminusCUR.gif y magplusCUR.gif son los cursores utilizados en la hoja de estilo. Eventualmente, pueden usarse las mismas pero en formato CUR
magminus.gif y magplus.gif son los cursores incluidos en el script y spinner40.gif es la imagen de carga.

Para probarla, sólo debemos agregar el script y la hoja de estilo antes de </head>:
<script src="URL_PopBox.js" type="text/javascript"></script>
<link type="text/css" src="URL_PopBoxStyles.css" />
Dentro del script hay una serie de variables que hacen referencia a ciertos datos internos (incluyendo las imágenes) que podemos personalizar sin necesidad de tocar los archivos. Basta agregar los cambios en la plantilla, inmediatamente después de las dos instrucciones anteriores:
<script type="text/javascript">
popBoxWaitImage.src = "URL_spinner40.gif"; // imagen de carga
popBoxRevertImage = "URL_magminus.gif"; // imagen del cursor
popBoxPopImage = "URL_magplus.gif"; // imagen del cursor

popBoxRevertText = "Click para contraer la imagen."; // texto por defecto
popBoxPopText = "Click para expandir la imagen."; // texto por defecto
</script>
Hay otras variables que pueden consultarse en la documentación online.

También podríamos modificar las clases CSS ya que estas son opcionales:
<style type="text/css">
.PopBoxImageSmall {
border: none 0px white;
cursor: url("URL_magplusCUR.gif"), pointer;
}
.PopBoxImageLarge {
border: solid thin #CCCCFF;
cursor: url("URL_magminusCUR.gif"), pointer;
}
</style>
Aplicar los efectos es muy sencillo porque lo único que necesitamos es la etiqueta IMG a la que podemos agregarle algunos atributos especiales. Este es el ejemplo más simple:

UNA IMAGEN NORMALUNA IMAGEN CON TEXTOS
Click sobre las imágenes para ampliar.

El código necesario para mostrar una imagen sin ningún otro tipo de agregado es el siguiente:
<img
src="URL_imagen"
class="PopBoxImageSmall"
style="width: anchoThumbnail; height: altoThumbnail;"
onclick="Pop(this,speed,'PopBoxImageLarge');"
pbshowrevertbar="false"
pbshowreverttext="false"
pbshowrevertimage="false" />
donde:

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

Por último, ejecutaremos el evento para ampliarla, en este caso onclick aunque también puede ser onmouseover. La función tiene esta sintaxis:

Pop(obj, speed, className)

donde:

obj es el objeto imagen (por defecto usamos la palabra this)
speed es la velocidad de apertura (un valor de 50 es un valor normal, cuanto más alto, más rápido)
className es el nombre de la clase CSS que se aplicará a la ventana o null

En el ejemplo:

onclick="Pop(this,50,'PopBoxImageLarge');"

Podemos utilizar una sola imagen y, en ese caso, establecemos el atributo style y definimos los valores de width y de height para mostrar una miniatura pero, lo razonable es utilizar dos imágenes diferentes, una miniatura y la imagen de tamaño natural para así aliviar la carga de la página.

La dirección URL que incluimos en el atributo src, será siempre la miniatura. Si son dos imágenes, la segunda imagen se agrrega en otro atributo especial:

pbSrc="URL_imagenNormal"

que, además tiene una segunda opción:

pbSrcNL="URL_imagenNormal"

similar al atributo anterior pero, fuerza a no precargar la imagen con la página sino hacerlo sólo cuando se haga click en ella.

Otros atributos:

pbCaption es optativo y se utiliza para mostrar algún texto en la parte inferior de la ventana generada. Si no lo definimos pero utilizamos el atributo title, será este el que se mostrará.

Como, por defecto, se coloca una barra horizontal en la parte superior y un texto en la parte inferior, podemos controlarlos con estos atributos:

pbShowRevertBar muestra u oculta la barra superior (false o true)
pbShowRevertText muestra u oculta el texto de la barra superior (false o true)
pbShowRevertImage muestra u oculta la imagen de la derecha de la barra superior (false o true)
pbRevertText el texto de la barra superior

pbShowCaption muestra u oculta la barra inferior (false o true)
pbCaption el texto de la barra inferior

Ver más detalles.


USANDO UNA IMAGENUSANDO DOS IMÁGENES
<img class="PopBoxImageSmall" pbshowcaption="true" pbcaption="El texto" title="Click para ampliar/reducir" style="width: 150px; height: 170px;" src="URL_imagen" onclick="Pop(this,50,'PopBoxImageLarge');" />
<img class="PopBoxImageSmall" title="Click para ampliar/reducir" pbshowcaption="true" pbcaption="El texto" src="URL_imagenMiniatura" pbsrc="URL_imagen" onclick="Pop(this,50,'PopBoxImageLarge');" />
Click sobre las imágenes para ampliar.

Hay muchas más posibilidades que pueden verse en la página de los autores donde hay abundante documentación. Por ejemplo:

onclick="PopEx(obj, newLeft, newTop, newWidth, newHeight, speed, className);"

es una función que permite establecer la posición y el tamaño de la imagen ampliada.

newLeft y newTop son parámetros que indicarán la posición relativa y pueden ser valores negativos o positivos (si queremos que sean valores absolutos, deberemos agregar la letra A al valor, por ejemplo, 200A)
newWidth y newHeight será el tamaño de la imagen ampliada, si es cero, se usará la imagen completa.

PopEx(this, -125, 60, 350, 220, 50, null)


PopEx(this, -50, 0, 250, 330, 30, 'PopBoxImageLarge')


PopEx(this,-50,-200,250,330,50,null)

45 comentarios:

solrac  

buenísimo JMiur, se me ocurren varias buenas utilidades para este JS.

Responder
David  

q barbaro, muy buen script de hecho q se pueden hacer cosas únicas

Responder
ADMIN.  

Hola Jmiur.
No puedo abrir la hoja de estilo por problemas con mi ordenador.
Podrias darmela como texto y decirme exactamente donde copiarlo.
Gracias.

Responder
Gem@  

!!Es tremendo¡¡ me gusta más que el visor de imágenes "Thumbnail Viewer"
Vaya tela y yo con tan poco tiempo :(

Responder
JMiur  

Es una de las que tiene más posibilidades aunque hay un momento en que se vuelve compleja para usar si queremos hacer cosas "extrañas" pero en la página principal hay bastante documentación y algunos ejemplos.

También es interesante porque no interfiere con otras librerías así que parce 100% compatible.

ADMIN:
Acabo de subir el archivo AQUI con extensión TXT para que no tengas problemas, simplemente la cambias por CSS. Debe colocarse debajo de los scripts, inmediatamente antes de </head>.

Responder
Claudio - Poca Tinta  

Esto esta de Lujo!!!.

Gracias

Responder
Darwin  

Sip!! sin duda alguna es una de los mejores visores, muchísimo mejor que el Thumbnail Viewer

Responder
JMiur  

Son básicamente, dos cosas diferentes y sin duda este es superior ya que tiene muchas más posibilidades. Les recomiendo ver la página original porque hay muchas más que no alcancé a mostrar.

Responder
Lucas  

Vaya, que buen script, decime: ¿hay posiblidades de incrustar la libreria mootols.js dentro del Template Blogger para crear el acordeón?

Saludos.

Responder
JMiur  

Es posible y también puede ser problemático. Fijate en este post, allí hay algunas advertencias respecto al tema y mi experiencia personal.

Me había comenzado a interesar en el tema mootools pero terminé abandonando la idea justamente or esos problemas, tanto en Blogger como en WordPress se hace difícil de manejar y los resultados varían mucho con los navegadores.

De cualquier manera, puedes probarlo y ver como resulta.

Responder
Toni  

Gracias JMiur por la referencia un saludo.

Responder
Claw  

Muy útil!!

Ya lo implementé en mi blog y funciona perfecto :)

http://clawder.blogspot.com

Un saludo ^^

Responder
Sergio Gil  

Hola Jmuir:

Lo instale en mi blog y funciona bien, pero no puedo ver el cursor cuando lo paso por encima de la imagen.

Slds,

Responder
Sergio Gil  

Hola Jmuir:

en donde puedo obtener el archivo PopBoxStyle.ccs

Responder
JMiur  

Sergio: en el ZIP están todos los archivos.

Responder
Gem@  

jajajaja buscaba esta librería en Google y mira por donde aparece Vagabundia :)

Responder
JMiur  

Y hasta habías comentado en su momento :D

Realmente es una gran librería y muy sencilla de usar: Recomendad :D

Responder
NKR  

Hola JMiur.
Acabo de darme cuenta que las imágenes, que tengo en la sidebar, y las muestro con esta librería no funciona bien en IE. Para ser más exacto , se abren una sola vez. Para volver a verlas hay que refrescar la página.
Miré esta entrada con IE. y me temo que ocurre lo mismo. ¿Alguna idea para que los que navegan con el Explorer (según Analytics el 64,60% de mis visitas ) puedan ver lo mismo que yo con Firefox?.
Saludos.

Responder
JMiur  

NKR: Tanto con IE7 como con IE8, tu blog se ve absolutamente normal, no encontré inconvenientes en ver las imágenes, por ejemplo, las de los camareros ¿Hay algo especial que no funcione?

Responder
NKR  

Hola JMiur.
Lo que ocurre es que en "los camareros" , con IE, las imágenes solo se abren una vez. Para abrir otra vez la misma imagen tengo que actualizar la página .Con Firefox las puedo abrir las veces que quiera sin actualizar.

Responder
JMiur  

Pués no puedo agregar nada más ¿te has fihjado si dice algo al respecto en la página del autor?

Responder
Rubén  

Se trata de un bug de PopBox (versión 2.6b). En la página del autor sucede el mismo problema, según he comprobado, con IE8.

Responder
JMiur  

Gracias por información, Rubén.

Responder
Uno mas del monton  

a mi me ocurre lo mismo ke a Segio no se me ven los cursores probablemente estoy poniendo mal las cosas nose estuve probando y no lo logro

Responder
Uno mas del monton  

me olvide de poner el blog es este:
http://lasdefondonegro.blogspot.com/

Responder
JMiur  

No veo que en tu blog haya ninguna clase de regla de estilo para definir el cursor.

Responder
Uno mas del monton  

uu y tendría ke agregar algo? yo pense ke usando la clase "PopBoxImageLarge" y poniendo las imagenes en el css andaba, tengo ke agregar algo abajo del css??.. nose ke me falta o ke hago mal.. estuve intentando pero no llegue a nada

Responder
JMiur  

No. Lo que yo no veo en el blog es que el archivo externo se cargue y allí están als definiciones de estilo; debes tener algún error de sintaxis en la plantilla; por ejemplo, en el código fuente, se lee esto:

/*<link src='http://expresandome.hostei.com/PopBoxStyles.css' type='text/css'/>*/

y esos /* i */ están de más.

No hace falta usar un archivo externo, simplemetnte copia las reglas de estilo y las colocas entre etiquetas<style> y </style>

Responder
Uno mas del monton  

como ke el archivo externo no se carga? el efecto anda, mi problema es ke no se donde debería ubicar las relgas de estilo las pongo por varios lados y no me andan =( o capaz no son las ke debo poner

ahi sake los /* */ los deje cuando estuve probando

Responder
JMiur  

No. No se carga, y ahora, estás colcoando el estilo adentro del script lo cual es un error:

<script type='text/javascript'>
<style type='text/css'>
.......
</style>
.......
</script>

son dos etiquetas separadas:

<style type='text/css'>
.......
</style>

<script type='text/javascript'>
.......
</script>

Responder
Uno mas del monton  

ooo no te puedo creer ke torpe ke soy, ahi anda!! gracias ^^ como bien
dijiste no hace falta poner en css aparte, yo lo hice porke segui tal
cual los pasos de arriba jej ahora veo ke poniendo solo el style
debajo del .js es suficiente.
Una vez mas gracias

Responder
Manfenix  

Hola JMiur.
Tengo el siguiente problema en IE8.
Al agrandar una imagen, luego no se puede repetir el efecto.
Aquí tienes un EJEMPLO.
En dónde está el error?
Saludos :)

Responder
JMiur  

Lo desconozco. Evidentemente, es un error del script pero no sé cómo se soluciona.

Responder
Manfenix  

Gracias por revisarlo. Luego de mucho usar este efecto, descubír el error en IE. :(

Responder
La Tobonera  

Hola JMiur

Estoy usando este codigo:

img src="http://img202.imageshack.us/img202/3900/mgf2.jpg"
onmouseover="PopEx(this,-9,-2, 145, 56, 50,'PopBoxImageLarge');"
pbshowrevertbar="false"
pbshowreverttext="false"
pbshowrevertimage="false" /

lo que deseo hacer es que una ves se expanda la imagen funcione como link. He consultado la información en el sitio de Popbox pero no encontre nada.

Vos que sos el experto en tema sabés que codigo debo agregar para que simultaneamente la imagen funcione como link ?

Slds,

Responder
JMiur  

La Tobonera:
No creo que eso pueda hacerse con este script. No veo ninguna forma.

Responder
Administrador ArucasBlog  

¿Qué ocurre con Popbox que ahora funciona de otra manera? Prueba pulsando en las fotos porque algo han modificado y se duplican las imágenes. Saludos

Responder
JMiur  

Hay algo nuevo que está agregando Blogger y que está molestando así que habrá que esperar.

Responder
Martin Rocha  

JMiur, eto lo havia aplicado en mi blog viejo y ahora necesite un sistema de zoom y recorde este que es el mejor sin librerias ni nada.
Aplique lo de PopEx pero como hago si le doy un ancho X a la ampliada pero no darle altura, o sea que esta se modifique en funcion del ancho que le establezco.
Porque probe con un altura 0 pero al final queda toda la imagen en tamaño original.
Desde ya gracias JMiur que andes bien.

Responder
JMiur  

No sé si eso es posible, tendrás que ver en la página de los desarrolladores.

Responder
Martin Rocha  

Ok muchas gracias voy a chequear la pagina.
JMiur quiero poner la tabla con el signo de atencion al final de este blog por encima de las entradas relacionadas.
En que parte del html tendria que agregar el codigo porque probe en algunas partes pero nada.
Un saludo JMiur que andes bien.

Responder
JMiur  

¿A qué tabla y signo te refieres?

Responder
Martin Rocha  

Disculpa Jmiur, ahora si lo puse al final del blog al widget en este blog.
Es el que dice "Atencion", en si lo agregue solo por agregarlos, ya que queciera agregar esa tabla por encima de las entradas relacionadas pero no se sobre que codigo deveria de hacerlo.
Desde ya muchas gracias Jmiur que andes bien.

Responder
JMiur  

Deberías buscar
<div class='post-footer-line post-footer-line-4'>
y ponerlo encima de esa línea o bien buscar
<div id="postsrelacionados">
y también, ponerlo encima de esa línea.

Responder
Martin Rocha  

muchas gracias JMiur un saludo grande.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR