![PopBox!](http://4.bp.blogspot.com/_hljKDuw-cxQ/Ry9ZN1pXgpI/AAAAAAAADho/isoQXDVGPzo/s00/PopBoxLogo.gif)
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" />
<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>
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>
<img src="URL_imagen" class="PopBoxImageSmall" style="width: anchoThumbnail; height: altoThumbnail;" onclick="Pop(this,speed,'PopBoxImageLarge');" pbshowrevertbar="false" pbshowreverttext="false" pbshowrevertimage="false" />
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.
![](http://4.bp.blogspot.com/_hljKDuw-cxQ/Ry93q1pXgrI/AAAAAAAADh4/Szu44vpm_6U/s00/PopBox_2.png)
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.
45 comentarios:
buenísimo JMiur, se me ocurren varias buenas utilidades para este JS.
q barbaro, muy buen script de hecho q se pueden hacer cosas únicas
Hola Jmiur.
No puedo abrir la hoja de estilo por problemas con mi ordenador.
Podrias darmela como texto y decirme exactamente donde copiarlo.
Gracias.
!!Es tremendo¡¡ me gusta más que el visor de imágenes "Thumbnail Viewer"
Vaya tela y yo con tan poco tiempo :(
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>.
Esto esta de Lujo!!!.
Gracias
Sip!! sin duda alguna es una de los mejores visores, muchísimo mejor que el Thumbnail Viewer
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.
Vaya, que buen script, decime: ¿hay posiblidades de incrustar la libreria mootols.js dentro del Template Blogger para crear el acordeón?
Saludos.
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.
Gracias JMiur por la referencia un saludo.
Muy útil!!
Ya lo implementé en mi blog y funciona perfecto :)
http://clawder.blogspot.com
Un saludo ^^
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,
Hola Jmuir:
en donde puedo obtener el archivo PopBoxStyle.ccs
Sergio: en el ZIP están todos los archivos.
jajajaja buscaba esta librería en Google y mira por donde aparece Vagabundia :)
Y hasta habías comentado en su momento :D
Realmente es una gran librería y muy sencilla de usar: Recomendad :D
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.
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?
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.
Pués no puedo agregar nada más ¿te has fihjado si dice algo al respecto en la página del autor?
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.
Gracias por información, Rubén.
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
me olvide de poner el blog es este:
http://lasdefondonegro.blogspot.com/
No veo que en tu blog haya ninguna clase de regla de estilo para definir el cursor.
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
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>
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
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>
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
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 :)
Lo desconozco. Evidentemente, es un error del script pero no sé cómo se soluciona.
Gracias por revisarlo. Luego de mucho usar este efecto, descubír el error en IE. :(
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,
La Tobonera:
No creo que eso pueda hacerse con este script. No veo ninguna forma.
¿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
Hay algo nuevo que está agregando Blogger y que está molestando así que habrá que esperar.
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.
No sé si eso es posible, tendrás que ver en la página de los desarrolladores.
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.
¿A qué tabla y signo te refieres?
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.
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.
muchas gracias JMiur un saludo grande.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...