JMiur [E]

Floatbox es otra de esas ventanas modales similares a LightWindow pero que tiene algunas características importantes que la diferencian. La principal es que no requiere librerías extras por lo que termina siendo muy liviana y funciona sin limitaciones.

Permite mostrar imágenes individuales, galerías, slidshows, páginas externas, archivo de Flash, archivos de Quicktime y videos de casi todos los servicios existentes (YouTube, Google Videos, Vimeo, Dailymotion, etc.). El script tiene muchas opciones para configurarlo, botones para redimensionar las ventanas e imprimir su contenido; también puede agregarse información extra que también se muestra dentro de otra ventana modal,

Podemos descargarla en formato ZIP y allí encontraremos los dos archivos necesarios: floatbox.js y floatbox.css.

En Blogger, el CSS podemos agregarlo directamente en la plantilla entre etiquetas STYLE antes de </head>:
<style type='text/css'>
... aquí pegamos el contenido del archivo ...
</style>
O bien alojarlo en un archivo externo y cargarlo con LINK.

Debajo, agregaremos el script al que no le veo otra posibilidad que cargarlo desde un archivo externo (con extensión JS o TXT):
<script type="text/javascript" src="URL_floatbox.js"></script>
Para simplificar las cosas , este otro ZIP contiene los archivos ya traducidos al español y las imágenes alojadas.

Para utilizarlo, basta agregar el parámetro rel="floatbox" a un enlace. Por ejemplo:
<a rel="floatbox" href="URL_imagen">TEXTO o IMAGEN</a>
Click para ver un ejemplo con una imagen simple

Para crear una galerías de imágenes usamos rel="floatbox.group". Por ejemplo:
<a href="URL_imagen1" rel="floatbox.group">1</a> | <a href="URL_imagen2" rel="floatbox.group">2</a> | <a href="URL_imagen3" rel="floatbox.group">3</a>
o bien:
<a href="URL_imagen1" rel="floatbox.group">TEXTO o IMAGEN</a><a href="URL_imagen2" rel="floatbox.group"> </a><a href="URL_imagen3" rel="floatbox.group"> </a>
GALERIA MODELO 1 -->1 | 2 | 3
GALERIA MODELO 2 -->CLICK

Con un esquema similar, podemos crear un slideshow automático, usando el parámetro rel="slideshow":
<a href="URL_imagen1" rel="slideshow">TEXTO o IMAGEN</a><a href="URL_imagen2" rel="slideshow"> </a><a href="URL_imagen3" rel="slideshow"> </a>
EJEMPLO DE SLIDESHOW -->CLICK

Otros ejemplos:
  • una página externa CLICK [ver código]
  • un archivo SWF CLICK [ver código]
  • un video de YouTube CLICK [ver código]
  • un video de Google Videos CLICK [ver código]
  • un video de Vimeo CLICK [ver código]
  • un video de Dailymotion CLICK [ver código]
  • un video de blip.tv CLICK [ver código]

Una de las opciones más interesantes es la posibilidad de usar miniaturas en los enlaces de texto como este o este otro. Al poner el cursor encima del enlace, veremos una miniatura y al hacer click, veremos la imagen original.

Para eso, debemos agregar dos parámetros rel="floatbox" y class="fbPopup":
<a rel="floatbox" class="fbPopup" href="URL_imagenOriginal">ENLACE DE TEXTO<img src="URL_imagenMiniatura"/></a>
Hay muchas más alternativas y configuraciones. En la página de demos pueden verse algunas de ellas. La información es bastante completa, el sitio tiene una página con descripción detallada y un foro de soporte.

REFERENCIAS:Poca Tinta

160 comentarios:

Ariane  

fantástico, obrigada por compartilhar! abraços

Responder
Jessica  

Wow! interesantisimo. Me encantaria usarlo. Solamente tengo que guardar el script tal y como esta y usar los codigos que mencionas y ya? o hay que hacer ciertas modificaciones? Me refiero, podemos dejar el .js y CSS como estan y funcionaria asi como demostraste?

Genial post. Gracias JMiur!

Responder
JMiur  

Saludos, Ariane, me alegro que te gustara. Es buena alternativa.

Jessica: En el ZIP original, hay que cambiar cosas, en el otro, el que traduje, está lo mismo que ves en el post así que, no debería agregarse nada más.

Responder
Graciela  

Esto lo tengo que aprender, me encanta cuando muestras un video escondido detrás de la bella ventanita :P besitos!!!

Responder
Vicky  

Hola JMiur , soy una seguidora de tu blog y es estupendo que haya gente como tu. Queria pedirte un favor , en el caso de q pudieras..te comento, resulta q en mi blog se podian hacer los comentarios perfectamente , pero ahora no se q pasa q no deja hacerlos.Tal vez sea una tonteria y yo no veo el problema donde esta , pero es q llevo poco en esto de los blogs , pero le pongo mucho interés, asi q perdona mi ignorancia al respecto. Te podrias dar una vuelta por mi blog y echarle un vistazo a ver si ves el problema cuál es ?mi blog es http://elartedelavida-vicky.blogspot.com/
te estaria muy agradecida. Recibe un saludo cordial desde España. Vicky

Responder
NeneLand  

Hola JMiur, otra excelente aportacion, tal y como nos tienes acostumbrados ... Un detalle ... el JS es muy extenso, supongo que sera por eso por lo que dices que no ves bien la opcion de agregarlo a la plantilla ¿no?. Como sabras tuve algun problema con IExplorer al cargar archivos JS con la extension TXT (en el resto de navegadores me funcionaba, pero en IE no). Use en su momento Google Sites. ¿Que otro servicio me aconsejas para poder usarlos como TXT? He intentado acceder a JavaScripHost y no me funciona, no se si tiene algun problema ultimamento o que ... ¿Algun site que ya hayas probado y que funcione para los CSS y los JS aunque sea cambiando las extensiones a TXT?. Gracias.-

Responder
enrique  

Gracias JMiur, ya lo implementé y queda estupendo. Gracias!
El LightWindow me resultaba muy complicado, éste es más sencillito.

Responder
Luisa  

Muy buenas. Me ha parecido interesantísimo este post y las miniaturas que se abren, me han encantado.
Ahora,tardaré dos meses en entender cómo se hace.Y no por malas explicaciones sino por malas entendederas.Pero voy a intentarlo.Gracias y un salu2 desde el Sur de España¿Nunca vino a visitarme?

Responder
Gem@  

Que poco me aprecias J.Miur con el trabajo que tengo y sabías que no hay ventana modal que no pruebe. Y lo peor.. que no sé si añadir esta o seguir con Lytebox :S
Todo broma, es una maravilla :)

Responder
Espineli  

Esta ventana modal apunta muy alto :D
Salu2.

Responder
Claudio - Poca Tinta  

Como siempre haciendo la vida simple y muy bien explicado todo.

Saludos amigo.

Responder
JMiur  

Graciela: Vamos, anímese que no es tan complicado :D

Vicky: Veo el blog, Me tendrías que decir si lo que quieres es usar el formulario incrustado debajo de las entradas o no. En el primer caso, no es algo que pueda ver online pero, si me envias la plantilla, te puedo guiar. Si no usas ese formulario y quieres que se abran los comentarios al viejo estilo, en la ventana blanca de Blogger, lo que noto es que hay un error en la URL de ese enlace. Cualquiera de las dos alternativas tiene solución y no es tan complicado de resolver. Creo que lo mejor es que me mandes un mail porque así será más fácil escribir códigos.

NeneLand: Creo que te lo respondí en otro comentario pero aquí otra vez. No uso Google Sites, el servicio que utilizo es Fileden, por ejemplo, en este post, el archivo es un TXT alojado allí. No hablo de ponerlo en la plantilla pero no es por el volumen ya que podría colocarse en un elemento HTML. El problema que encontré es que Blogger tergiversaba una línea de código del script y no le encontré solución. No tuve más remedio que colocarlo como archivo externo.

Enrique: Queda muy bien, es una buena alternativa, sin duda.

Luisa: Sólo un consejo ... Paciencia, mucha paciencia. :D

Gem@: Lo lamento, no fue mi intención :$ Por cierto, no sé si tiene sentido cambiarlo por Lytebox porque, aunque es más versatil, este script es más pesado.

Espinelli: ¿Está buena, verdad?

Claudio: Gran descubrimiento de su parte :D Recomiendo tus entradas porque allí están explicados algunos detalles interesantes.

Responder
NeneLand  

Gracias por la aclaracion JMiur. Lo tendre en cuenta (lo de Fileden) para los Scripts grandes o que den problemas. Perdona por no recordar que ya me lo habias comentado, solo queria la mejor opinion posible. Gracias.-

Responder
LacraX  

Esta bueno , linda alternativa. Se puede poner para los comentarios de ventana modal al igual que Lightwindow.

Responder
Gem@  

Pues no, no tiene sentido y me voy a quedar con las ganas :(

Responder
Graciela  

mire don JMIUR animarme animarme, me animo...'don', le dije al cartero que prefiero me diga 'señora vieja' que doña...se quedó mirándome :P
Te cuento que creé una cuenta en el pajarito TWITTER, sabes qué??? me olvidé de la contraseña :X jajaja, la palabra B me la digo a mi misma!!!, ya me pasó en otro lado pero mi amigo Pablo solucionó todo!!!...estoy algo mayor :)

Responder
JMiur  

NeneLand: no tiene importancia. Por suerte, te di la misma opiniòn dos veces, es que suelo tener varias opiniones sobre un mismo tema :D

LacraX: Sí, claro, puede usarse igual que LightWindow.

Gem@: Ahhh, si de eso se trata, pruebe, nomás y luego elija :)

Madame Graciela: Pués mire, haga como yo. Las escribo en un papelito. Eso si, el problema es que me olvido donde dejé los papelitos ;)

Responder
Antony  

¡Impresionante! :O Me gusto mucho. Lo vi muy liviano. Estoy diseñando una blog con LightWindow. Este me va a servir mucho. Saludos!

Responder
JMiur  

En realidad, es más grande que LightWindow, la ventaja está en es independiente y no necesita otras librerías.

Responder
Esteban  

Hola JMiur, solo quería decirte 2 cosas:

1. Muchas gracias por tus excelentes aportes, sin ellos no soy nada!!

2. Gracias a ti conozco varias alternativas: DynamicDrive, Lightwindow, Lytebox y ahora FloatBox, y no me decido por cual... necesito tu sabio consejo.

Gracias!!!

Responder
JMiur  

Esteban: Es una decisión personal. Diría que si usas Prototype u otra de esas librerías, usar FloatBox es demasiado pesado, en cambio, si no se usan, es la solución ideal. Las otras, depende. Si el uso es eventual, Lytebox esta perfecto, si es algo más intensivo, me gusta LightWindow. Todas funcionan bien.

Responder
LuzdeLuna  

Precioso JMiur!! me quedó muy bien y las presentaciones de imágenes son muy atractivas.Gracias!!
Pregunta: es posible cambiar el color azul por el negro en todas las presentaciones de videos?? traté cambiando algunos numeritos pero solo logre dejarlo sin fondo y opacidad.jajaja patético lo mio!!
Bue, sino para videos sigo usando LigthWindows.
Un abrazo

Responder
LuzdeLuna  

sorry: olvide decirte que lo cambié en CSS y lo que te pregunto es en el script.

Responder
JMiur  

Aunque no he experimentado mucho con esto, creo que en el script, casi al inicio, hay una opción que define el tema (el color)

/*** General Options> ***/
theme: 'auto' ,// 'auto'|'black'|'white'|'blue'|'yellow'|'red'|'custom'

En lugar de auto, podría irse probando con los otros valores.

Responder
Esteban  

Hola JMiur!!

Yo de nuevo, gracias por contestarme anteriormente.

Ya puse a funcionar el FloatBox y me anda de perlas, el unico pero es que el marco cuadrado no me gusta mucho. Viendo la web y sus demos tienen unos marcos relindos, algunos blancos otros con 3 bordes redondos y uno con punta. Como consigo eso?? Tengo entendido que es via CSS pero te queria preguntar si tu modificaste eso en los archivos que nos das para descargar o venian asi de la web.

Saludos!!

Responder
JMiur  

Esteban:
No modifiqué los archivos CSS, usé los originales para el demo. Fíjate en mi comentario anterior a ver si eso sirve. Así, en general, para cambiar el diseño gráfico, se utiliza otro CSS. Por lo que vi, estos tienen muchas imágenes de allí que sea bastante engorroso cambiarlos.

Responder
Esteban  

Si, eso he estado viendo..

Al parecer es bastante tedioso cambiar el CSS, quizás si tengo algo de tiempo me de el laburo de revisarlo, sin embargo Claudio de "Poca Tinta", al que también le hice ésta consulta, dijo que le iba a echar una miradita.

Por otro lado, en la página oficial de FloatBox, se puede ver que van en la versión 3.50, siendo que tu nos proporcionas la 3.24 (por el nombre en el zip). Trataré de implementarla y veré si hay cambios sustantivos, en una de ésas puede venir con nuevos marcos. Además Claudio dijo que el CSS lo habían acortado y además incluía unos módulos. Se ve interesante..

Gracias por tu paciencia para contestarme, te he enlazado a mi blog en construcción: http://www.ayudadrivers.blogspot.com/

Responder
JMiur  

Así es Esteban, el CSS me pareció bastante engorroso de manipular, suelo hacerlo aunque sea para probar pero con este me di por vencido ya que para el demo no era necesario. Puede modificarse, de eso no hay dudas pero, requiere paciencia en extremo.

Responder
LuzdeLuna  

Le tuve que cambiar el tema como me dijiste, en el script, solo black que es el apropiado para mi blog,pero además eliminar todo color del CSS, sino igual lo tomaba :O
Ahora si está rebien!! pero que bueno sería si se le pudiera redondear como dice el comentario anterior!!! :X
Gracias JMiur!

Responder
JMiur  

Me alegro que eso funcionara, Luz. Es bueno saberlo.

Responder
Mar  

ahhhhhhhh lo he logrado sin molestarte no lo puedo creer!!!!
No lograba que me saliera, pero probé en una plantilla limpia de todo script anterior y funciona!!!!

Cómo extrañaba una ventana modal!
Muchas gracias JMiur.

(es que no me sale lo de alojar todo en la plantilla y me pregunto si es por el mismo motivo... debería limpiarlas a todas de aquello que ya no funciona)

Un beso

Responder
JMiur  

Sí. Es probable que eso ocurra y a veces, resulta imposible porque Blogger cambia los códigos. Sólo hay que probar y ver qué pasa :)

Responder
Juan  

Hola JMiur
Muchas gracias por todos estos trucos y consejos.

He implementado el efecto en mi blog y en un principio no tuve ningún problema. Lo raro me ha sucedido al postear galerias de imágenes. Se trata de dos entradas diferentes, en las cuales añado la galeria para poder leer directamente desde el blog un artículo en cada una. La galeria de la primera entrada tiene 15 imágenes, y la de la segunda 12.
Si se accede a las entradas por separado no hay ningún problema, pero desde la portada del blog en la que están ambas entradas, se cargan todas las imágenes (las 27) de ambas galerías en ambas galerías. Es decir al pinchar en la galeria de la entrada 1 veo las de la 1 y las de la 2. Y lo mismo ocurre con la otra.

Tampoco es que sea muy grave, pero da la sensación de que no se ha puesto cuidado al publicar las entradas.

Muchas gracias otra vez, Juan.

Responder
JMiur  

Juan: Entiendo el problema pero no sabría qué contestarte. No recuerdo que haya algún parámetro que permita separar las galerías y agruparlas ¿Te has fijado en la página del autor?

Responder
LuzdeLuna  

Hola JMiur!
A Juan le pasa lo mismo que a mi me pasó, en la página se unen las galerías o el slide.
Lo solucioné identificando cada galería con un numerito, siempre el mismo para cada foto, sin importar la cantidad x ej: rel="floatbox.group1"
y diferente para cada galería.
Creo que funciona correctamente ahora, según he estado probando. Espero que le sirva a Juan. :P

Responder
JMiur  

Genial, Luz, a algo así me refería pero no sabía donde buscar ese parámetro :D

Responder
Juan  

Solución Perfecta!!!
Acabo de editar ambas entradas y ya se ha corregido el problema.
Iba ahora a pelearme con la página del programador pero ya no ha hecho falta.

Muchísimas gracias a ambos.

Responder
MicaDeTot  

Aprovecho este primer comentario para agradecerte el trabajo que haces en podernos dar a todos indicaciones precisas y provechosas para aprender más sobre el manejo y transformación de nuestros blogs. En este último mes creo que gran parte del movimiento de tus visitas es debido a la cantidad de consultas que hice de tus diversos post.

Escribo en 5 blogs a la vez, y participo de otros tantos más…, y leyendo y buscando entre tus post no encontré la forma de crear un blog menú que pudiera dar de un vistazo las novedades que en cada uno de ellos había, así que siguiendo muchas de las indicaciones y código de tus post, logre realizar un Menú de mis blogs del que te invito a ver en http://menumdt.blogspot.com/ cuando gustes o puedas…, evidentemente se aceptan sugerencias para poderlo mejorar e implementar gadgets que puedan ofrecer mejor información.

También aprovechare el comentario para solicitarte permiso de incluirte en mi blog de WiNovato y en el mismo Menú, pues la información que das es detallada y muy inteligible para los “novatillos” como yo que andamos perdidos entre códigos a veces para escrituras “chinas”.

Un saludo.
MDT

Responder
JMiur  

Juan: Hay que aplaudir la buena idea de LuzdeLuna :D

MicaDeTot: Acabo de darle un vistazo. Nunca se me había ocurrido algo así. Me parece excelente. Una idea genial. Te agradezco el comentario y, por supuesto que tienes mi permiso, sería un honor :)

Responder
Turko  

Saludos JMiur

Yo implementé el script y se ve bastante bien, pero tengo un problema con las imágenes de Blogger, usé la URL del href="" con tamaño s00 y también con s1600-h, y no la quiere leer, use la misma imagen pero en ImageShack y sí funciona.

Las imágenes las subo desde blogger draft. tendrá algo que ver? o habrá que modificar algo en la URL de la imagen?

Gracias de antemano :)

Responder
JMiur  

La URL a usar no es la del enlace que es la que está en HREF sinola de la imagen que es la que está en el atributo SRC de la etiqueta IMG.

Responder
Biblioteca Cuatro  

Hola JMiur, te mando un saludo desde El Salvador. Soy adicto a tu blog, aunque es primera vez que comento. Como puedo hacer para bloquear la ventana padre mientras esta abierta una LightWindow. Resulta que cargo un form en una LightWindow y al hacer clik fuera de ésta esta se cierra y se borran todos los campos. (Aún no tengo un blog, y es para una aplicación en la red local donde trabajo). Felicidades por tu blog esta chivisimo.

Responder
JMiur  

Pués la verdad, no sé ¿Te has fijado en la página del autor? Recuerdo que allí se hablaba de formularios y de como controlarlos pero no estoy seguro.

Responder
guadalinfo.berja  

Hola buenos días tu blog esta genial y ayuda un montón pero quisiera pedirte un favor si no es mucha molestia ya que no me deja fileden acceder a floatbox.zip por exceso de ancho de banda serias tan amable de enviarlo o darme otra solución. Saludos y gracias de antemano.

Responder
JMiur  

Por ese motivo, todos los archivos ZIP, están alojados en SkyDrive y de allí pueden descargarse sin problemas.

Responder
Adrian Reyes  

Disculpa la ignorancia pero de que forma pongo el archivo CSS en entre las Styles ? Podrías poner el código asi como hiciste con el Script por favor

Responder
JMiur  

Lo dice:
En Blogger, el CSS podemos agregarlo directamente en la plantilla entre etiquetas STYLE antes de </head>:
<style type='text/css'>
... aquí pegamos el contenido del archivo ...
</style>
O bien alojarlo en un archivo externo y cargarlo con LINK.

Esto último es más comlicado ya que no es fácil alojar archivos CSS. El código sería:

<link rel="stylesheet" type="text/css" href="URLarchivo.css" />

Responder
Diseños MPR  

Hola! Tengo problemas para ver algunas imagenes... lo mismo me sucede con Lighwindows, y la verdad no se que puede ser....

te dejo el link para que la veas...y si podes ayudarme mil gracias!

http://www.carpediemcreativo.com.ar/Carpe-Light/index-2.html

Responder
JMiur  

Como te contesté en otro comentario, no veo problemas con las imágenes, ¿cuál no ves?

Responder
JuanCarlos 3941  

Hola JMiur! Estuve probando esta ventana y a pesar de que funciona en cualquier navegador de manera excelente, tiene ciertas desventajas, como por ejemplo la licencia, aparece de vez en cuando un "Reminder" de registro y bueno... Habrá alguna manera de quitar eso? Salu2 y gracias!

Responder
HUGO  

hola jimuir; muy buena esta ventana yo pude implementarla en los comentarios y para poder alojar el script utilizé un programa que recomendó rosa,simpre agradeciendo tu esfuerzo por brindar estos trucos,saludos.

Responder
JuanCarlos 3941  

Probe la ventana con el comprimido que tiene los archivos necesarios y no aparece el mensaje de registro, pero como hago para poner los bordes redondeados? Salu2!

Responder
JMiur  

JuanCarlos: Nunca vi una ventana de registro. Lo de lso bordes, tendrías que modificar el CSS pero no sabría decirte exactamente donde porque es bastante complejo de analizar.

Hugo: me alegro que sirviera.

Responder
JuanCarlos 3941  

Epa JMiur! Espero que todo esté bien! Ya entendí por qué no viste el Reminder de las ventanas jejeje, instalé el floatbox que tienes en el archivo comprimido y excelente, pero si te descargas y pruebas el de la página oficial, te darás cuenta que tiene un archivo que se llama license.js, en el cual tienes que introducir un pass que te dá el autor para quitarle el Reminder y es un rollo porque nada mas te sirve para un solo nombre de dominio =S naaah, me quedo con el que publicaste =D. Muchas gracias! Por cierto, mi pág. no está activa puesto que estoy diseñando una yo mismo, con la plantilla de mi mente jajaja y bueno, irá destinada a lecciones de guitarra y similares... Ahí será que usaré estas ventanas. Salu2!

Responder
JMiur  

JuanCarlos: El ZIP que descargué es el mismo, excepto que sólo uso el script de la ventana; ni se me ocurrió ver los otros :D

Responder
Manfenix  

Hola JMiur, implementé con éxito el Floatbox. Ahora, al intentar cambiar la imagen del cursor, aplicando lo que usé en Lightwindow no lo logré:
:P style
a.fbBox {cursor:url(http://img4.imageshack.us/img4/8928/searchs.png), pointer !important;}
a.fbBox img {cursor:url(http://img4.imageshack.us/img4/8928/searchs.png), pointer !important;}
/style:P.
Este intento solo es por analogía, estoy tanteando en esto.
Me puedes indicar como hacerlo?
Gracias.

Responder
Manfenix  

Ese código lo coloqué en la plantilla, después del floatbox.css y de la llamada al script js.

Responder
JMiur  

El cursor es para el elnlace y ese enlace no tienen ninguna clase especiifcada a diferencia de LightWindow.

Si quieres, puedes agregarla:
<a class="fbBox" ................

Responder
Manfenix  

Ok, poco a poco voy asimilando la mecánica de los códigos...Gracias JMiur!!!

Responder
JMiur  

Suerte, Manfenix y mucha pero mucha paciencia :D

Responder
Global Metion Blog  

No te entiendo que van en head(pero cerrado) y además al poner ambos en allí me da error :S

Responder
JMiur  

No entendí cuál es la pregunta ni qué significa lo de "cerrado". Tanto el estilo como el script van en el head de la plantilla.

Responder
Global Metion Blog  

OK si te escribí "cerrado" es porque tu formulario no permite ese HTML código
pero yo lo intento allí y no sale :S

Responder
JMiur  

Tanto el script como el CSS van antes de </head>

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

<script type='text/javascript' src='URL_floatbox.js'></script>

Igual que cualquier otro. Si Blogger te muestra un error, debería ver el código que estás colocando para decirte cuál es.

Responder
Global Metion Blog  

Mil Gracias :D me funciono ahora lo pondré en el blog normal

Responder
Solidaridad  

JMIUR no se si es buena idea pero la gran mayoría de vídeos los aloje en el mismo blogger....cual código de esto o que modificación hay que hacer para que videos alojados en blogger se vean con estos efectos de Floatbox. Gracias JMIUR

Responder
JMiur  

La verdad, no sé. Se supone que se alojan en google Videos pero no sé la URL real que tienen ¿Por qué no me mandas el código que te muestra Blogger y me fijo si es posible? Es que no recuerdo haberlo usado nunca salvo hace mucho tiempo como prueba y no me gustó para nada justamente por eso, porque no me decía dónde estaba guardado.

Responder
elsrodri  

Hola
Quisiera saber si puedes revisar mi blog de pruebas. El Floatbox no me funciona correctamente.Puede ser que tengo ya instalado un Lightbox ? Me gustaria que funcione el enlace que tengo a un archivo flash, es lo que estoy buscando hace tiempo. Muchas gracias por tu tiempo.
Sergio de La Plata

Responder
elsrodri  

Hola JMiur.
Saquñe el Lightbox y solo dejé el FloatBox, pero no me funciona.
La imgen que pongo en la ventana modal aparece, pero no se oscurece toda la panatalla para ver la ventana y no me aparece las flechas ni la "equis" de cerrar la ventana.
Podrías a yudarme por favor.
Muchas Gracias por tu tiempo.
Sergio

Responder
JMiur  

Es porque no se carga el CSS del script. Creo que lo escribes así:

<style type="text/css">
<link href=' http://www.hotlinkfiles.com/files/2355698_3kqqk/floatbox.css' type='text/css'/>
</style>

y sólo deberia ser esto:

<link href=' http://www.hotlinkfiles.com/files/2355698_3kqqk/floatbox.css' type='text/css'/>

Tanto <style type="text/css"> como </style> sobran.

Responder
elsrodri  

Hola JMiur.
Muchas Gracias por tu tiempo y tu respuesta. Pero sabes que no me funciona.... Hice los cambios que me dijiste pero no funciona...
Podrias darme alguna otra pista para ver si puedo hacerlo funcionar ?
Muchas Gracias
Sergio

Responder
elsrodri  

Hola JMiur. Perdona mi insistencia, pero al ser novato no se si hago las cosas correctamente. Quiero decirte que al descomprimir el ZIP solo utilizo los archivos floatbox css y js, no utilizo ningun archivo mas de los que genera el ZIP. Esto esta bien ? Si hay que usar algun archivo o carpeta mas.... donde los alojo y como los "llamo" ?
Podrias verificar si el archivo floatbox.css que tengo alojado en hotlinkfiles.com realmente funciona o deberia elegir algun otro alojamiento para este archivo.
Muchas Gracias por tu tiempo.
Sergio

Responder
JMiur  

elsrodri
En principio sólo requieres esos dos archivos.
No estoy seguro de si el CSS se carga o no. Una forma de evitar ese problema es agregar directamente el contenido en la plantilla entre etiquetas <style> y </style>
El archivo JS del script se carga bien.
En todo caso, no hagas pruebas con un SWF ya que este es bastante pesado y estos scripts sólo funcionan cuando la página está cargada por completo.

Responder
Black Dawn  

:D Exelente muchas gracias me funciono perfecto, esto y otros scripts que publicas, me ha ayudado mucho en la edicion del mio.
Felicidades

Responder
JMiur  

Saludos, Black Dawn. Gracias por el comentario.

Responder
Anthony  

Hola JMiur soy yo de nuevo :D Una pregunta, el archivo floatbox.js no se puede agregar directamente en la plantilla? Porque intenté de todas las formas posibles: entre etiquetas script, en CDATA, y en Elementos HTML, y la única forma que logró funcionar fue alojandolo en un servidor externo. Por qué será?

Responder
JMiur  

No lo he probado pero, es posible que sea así. Puede ocurrir eso con algunos si son complejos. En principio, con CDATA no debería haber problemas pero a veces, hay que rendirse a las evidencias :D

Responder
Anthony  

Pues con CDATA tampoco funciona, no se si recordarás el día de ayer que mi socio PedroX te explico un problema que teníamos en el blog que los iconos de edición rápida del blog se veían aún sin estar logueado, lo veían todas las visitas, y hasta nos salió un mensaje para suprimir un elemento llamado "Navbar1" pues eso ocurrió por colocar ese script en CDATA, lo eliminé y se solucionó todo. Por lo visto la unica forma es alojandolo en un servidor externo. Hay que ver que en Blogger nunca toman riendas del asunto. Innovan con nuevas funciones pero no se preocupan por cosas mas importantes. :O

Responder
JMiur  

Increible. Es posible que algún script genere algún problema, eso es cierto; no es lo usual pero puede ocurrir. Veré si logro reproducir ese error.

Responder
Anthony  

Hazlo y me comentas :)

Responder
Santiago Belgrano  

Hola, muy bueno el trabajo y el post.
Es la primera vez que paso por aquí, quisiera hacerte una pregunta.
En tus ejemplos tiene unas imágenes distintas al que me bajé de esta misma página. Me gustaría que sea como el de aquí, que dijera "Imágen 1 de 3" y no "Page 1 of 3" y "Close" en lugar de cerrar.
Cómo puedo hacer?
Gracias

Responder
JMiur  

En el post está la dirección con un archivo ZIP donde los scripts están traducidos.

Responder
nekke  

Hola JMiur, me llamo nekke, y gracias a Anthony y Pedrox he conozido este blog al mandarme tutoriales, y pedrox me mando este pero tengo un problema que yo ni pedrox savemos porque es. Yo coloco todo como dices tu y me pone que ay un error de XML que no estan bien cerrados, me pone así: "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente. Mensaje de error de XML: The entity name must immediately follow the '&' in the entity reference." y lo tengo puesto asi: http://www.fileden.com/files/2009/3/28/2382894/galery.txt
y nose que hacer :S espero tu ayuda :) para mejor contacto: neke-pasto@hotmail.com ;)

muy buen blog por cierto jeje :D

Responder
JMiur  

No sé cuál es exactamente el código que has puesto así que es difícil saber el problema sobre todo porque n oveo nada de eso en los códigos de esta entrada.

Blogger te dice que hay un carácter & en una etiqueta y que eso no puede colocarse y debe ser reemplazada por &amp;

Responder
nekke  

te deje un link de descarga de un doc. de texto en donde pone todo loque puse

Responder
Pilar  

Hola JMiur, llevo dias mirando lightbox,etc y en definitiva este es el mejor, Felicidades! lo he echo funcionar con los pocos conocimientos que voy adquiriendo jeje
Lo único que me ocurre es que, todo me funciona correctamente, meenos la imagen del cursos (zoom + o -)al ampliar la imagen o reducirla, he probado de cambiar la imagen en el css, subiendo por otra, pero no me ha funcionado, he visto en el css que hay muchas mas de diferentes colores.. esas puedo borrarlas las que no me interesen? que podría hacer..

Perdona mi ignorancia y muchas gracias, bs.

Responder
JMiur  

Pilar: No entiendo bien a cual zoom te refieres ya que no he experimentado mucho ¿Se trata de la clase #fbBox #fbResizer ? Si es así, ¿tienes un ejemplo donde pueda verlo?

Responder
Pilar  

Mi futuro proyecto de blog es este JMiur:
http://esbozosydibujos.blogspot.com/
El caso es que des aquí en tu pagina, cuando hago click en una imagen de demostración, al abrirse me aparece la imagen del cursos con la lupa, digamos el doble click para ampliar/reducir, me entiendes?(sería el #fbResizer) y en el mio no aparece, por eso intenté subir otra vez el gif (resize_white) que habia en el zip en otro hosting para ver si es que estaba caido, y volverlo a poner en la url del css y no hay manera, no me sale la lupa! sino el cursor normal. Me gustaría dejar esto pulido a poder ser ;) Espero que me haya sabido explicar. Muchas gracias por estar aquí, de veras. <3

Responder
Uve  

Hola!! Sería posible hacer que la ventana aparezca en una esquina del blog??

Responder
JMiur  

Pués la verdad, Pilar, no sabría decirte porque tampoco es algo que vea en los ejemplos de esta entrada.

Ahora bien, lo que yo utilizo no es este script sino otro y allí sí, el cursor es una lupa.

No sé si sería posible agregar ese tipo de cursores ya que el CSS de FloatBox no los contempla y que utiliza el normal, como para cualquier otro enlace.

Responder
Pilar  

Que lastima, porque es lo único que le falta, para que la persona que vea la imagen sepa que es posible ampliarla con esa lupa que aparece, cuando pasa el cursor por la mitad de la imagen.
Ya que en los lados lo que hace es pasar a la imagen siguiente o anterior, nose si eso te lo podrias mirar JMiur y mejorarlo, entonces seria perfecto, pq asi solo sale el cursor normal y no sabes que puedes hacerla mas grande.
Saludos y gracias como siempre :)

Responder
Pilar  

JMiur con ese detallito ya podriamos decir que es la mejor ventana modal para blogger que existe, ya que lo tiene todo, imagenes a tamaño real, con una mayor funcionalidad para navegar por las galerias, una buena rapidez de carga..
Estos dias llevo probado varias, como sexylightbox, lytebox, ibox, shadowbox, y cada una de ellas carece de alguna cosa :x
Ah y por lo visto la nueva versión del floatbox v3.54.3 no esta pensada para blogger :( y es mas pesada.

Yo te animo!! Bss.

Responder
JMiur  

Lo único que se me ocurre es que le agregues eso usndo una clase. Por ejemplo, si este es el enlace:

<a rel="floatbox" href="miImagen"> xxxxxxx </a>

escribes un atributo class, siempre el mismo:

<a class="lupa" rel="floatbox" href="miImagen"> xxxxxxx </a>

y luego, en la parte de CSS colcoas esto:

a.lupa {cursor:url(ÜRL_imagenLupa), pointer !important;}

Eso hará que el cursor, en los enlaces que tengan esa clase, cambie por la imagen que utilices salvo en IE donde deberías usar otra imagen extra pero de formato CUR y agregar lo siguiente antes de </head>:

<!--[if IE]>
a.lupa {cursor:url(URL_imagenCUR) !important;}
<![endif]-->

Responder
Jaime  

Disculpad!
Soy la única persona que le ha dejado de funcionar el floatbox?
De repente al subir las imágenes a blogger me ha dejado cargarlas bien y no se me abren! lo raro del caso es que con las entradas mas viejas me funciona bien el script.
Es cosa de picasa? solo mia.. o en general?
Suiciiidiooo! Gracias Jmiur espero tu respuesta, yo que no le veo lógica y me va dar algo..

Responder
JMiur  

Jaime:
Lo que veo en tu blog es que el script no se carga. Veo, por ejemplo, este:
https://dl-web.dropbox.com/get/frameboxs.txt?w=52344d9c
pero la URL es errónea ya que me lleva a una página web.

Algunas imágens de Picasa tampoco tienen una URL válida, son las direcciones de la página qpero no de la imagen; por ejemplo:
http://picasaweb.google.com/lh/photo/MGHPztoH_uQDpMa5qdKZhQ?authkey=Gv1sRgCNyMhf_Uxeq2SA&feat=embedwebsite

Una imagen de Picasa tiene un formato así:
http://lh3.ggpht.com/_DYKjO_yLq2M/SxzwUCsWPhI/AAAAAAAAAAM/GhrLsaf6x0Y/s640/jessica-simpson-14.jpg

Siempre termina con el nombre del archivo.

Responder
Eloy :: Samurai Socialista ::  

A mi tampoco me funcionaba el floatbox, ni el lightbox, ni el ceebox (que es otro muy bueno, que tambien acepto swf, html, etc, y sobre todo poniendo un class="ceebox" en un div "padre" todos los "hijos" pasan a formar una galeria, asi que en un post con muchas imagenes no hay que poner rel="lightbox" de a uno hasta agotar la paciencia)

Primero pense que era un conflicto con algun otro plugin o JS, por eso cree un blog en blanco, y seguia con el problema, hasta que despues de horas de buscar plugins alternativos, pense en que me habia olvidado lo mas simple, probar con imagenes hospedadas en otro lado, y asi fue, no tuve problema, el problema es con las imagenes de PICASA / BLOGGER.
(y las url's estaban bien puestas), el problema es... que tengo todas mis imagenes para galerias en picasa :(

Responder
Eloy :: Samurai Socialista ::  

yo de nuevo, deje un comentario anteriormente sobre el problema de floatbox con picassa-blogger que todavia debe estar en la lista de espera de moderacion, al parecer es un problema de hotlink con picasa, lo solucione acartando la URL, borrando la "carpeta donde indica el tamaño", es la parte de la url /s[numero] (ej: /s800, /s400-h, etc)
por ej:

http://3.bp.blogspot.com/__CwlsRV6FaE/R-RNIedPh9I/AAAAAAAAEjU/rDNkwZpFnuU/s400/Liniers.jpg

se debe pasar a:

http://3.bp.blogspot.com/__CwlsRV6FaE/R-RNIedPh9I/AAAAAAAAEjU/rDNkwZpFnuU/Liniers.jpg

solo dire que es MUY molesto si uno tiene que poner varias imagenes :S
espero alguien encuentre otra forma mediante algun script o cualquier cosa que se le parezca.

Responder
Gem@  

Yo estuve probando hace poco FloatBox y la verdad que la librería funciona de maravilla, el problema que comenta Eloy lo subsané no acortando el código sino sustituyendo las dos primeras cifras por dos ceros. En lugar de 400 puse 000 con eso la imagen se muestra en su tamaño y se evita eliminar código y con ello el riesgo de eliminar algo necesario.

Responder
JMiur  

Si, Gem@, lo idea es eso, cambiar el directorio que es sXXX por s000. Usa el mismo sistema que Blogger.

Responder
Uve  

Hola!!!
tengo un problemita... hace un tiempo lo probé y funcionaba, aunque lo quité porque intentaba buscar algo que me permitiera ver los videos de youtube a una esquina del blog, y no en el centro.

Hoy he decidido probarlo de nuevo y dejarlo por ahora hasta que encuentre algo que me convenza más, y sin embargo todo el tiempo me da error. Si pongo el css entre style, no me deja cerrar la plantilla.

Si pruebo colocando igual que el js.
Me dice: Open quote is expected for attribute "{1}" associated with an element type "rel".

Hay algo mal en mi codigo?? porque no tengo idea de que pueda ser.
saludos :) )))

Responder
JMiur  

TEndría que saber que y dónde lo está colocando.

El CSS sería lo más simple de verificar. Revisa que el contenido este entre &lt,style> y &lt,/style> pero no dentro de otra etiqueta abierta, por ejemplo.

Responder
Uve  

hola JMiur!
coloco el codigo del floatbox.css entre los style, según como tu lo tienes en la explicación. y despues pongo el archivo js detrás

tiene que ser un error tan tonto lo que hago que no se que sera :s

Responder
JMiur  

El archivo JS debe estar fuera de la etiqueta de estilo:

</b:skin>

<script type="text/javascript" src="URL_floatbox.js"></script>

Y la llamada, es dicer, eso que tiene el atributo rel, en un post o donde quieras mostrarlo pero no en el head.

Responder
Uve  

Así hago JMiur
pongo el style por encima del otro codigo.... después de otros script que tengo... quedan fueran de skin...

y el rel lo pongo en un gadget, y nada... no se porque será.
Gracias por todo :)

Responder
JMiur  

Tendría que ver exactamente qué pones para responderte.

Responder
pepeworks blog  

JMiur, no sé si sabrás algo de esto, la cosa está muy difícil, me he tirado horas y horas (y más horas) y no hay manera, no he visto tan exigua información acerca de algo, ni siquiera en inglés... Mi cuestión es la siguiente: El Floatbox me funciona perfectamente en html, pero... ¿Cómo puedo hacer que se me abra la floatbox desde un archivo de flash? ¿Sabes algo o de alguien que pueda saberlo?

Responder
JMiur  

No puedo responderte, es algo que desconozco.

Responder
Nicolas  

Excelente!!! llevo tiempo buscando esto muchas gracias

Responder
Romis  

Por que no funciona en Chrome ni en Safari? Alguna solucion?? Espero tu respuesta. Muchas gracias.

Responder
JMiur  

Lo veo funcionar perfectamente en Chrome así que debe funcionar también en Safari ya que utilizan el mismo motor de JavaScript.

Responder
Romis  

Acabo de hacer una prueba simple y si funciona en todos los navegadores pero no se porque en mi sitio no se ve en Chrome y Safari.
Hago click en la imagen y se abre como un jpg sin ninguna ventana modal.
La imagen pequeña, se carga con Ajax, o sea que esta viene de un archivo php aparte y se carga en el index. Tal vez tenga que ver? Es extraño esto, que estara pasando?

Responder
JMiur  

Esos detalles no podría contestarlos.

Responder
phsp  

JMiur, por que cada cierto tiempo me sale una ventana de que hay que pagar el producto ???. como se puede eliminar eso ??.

Responder
JMiur  

No he visto semejante cosa pero, deberías consultar en la pañgina del desarrollador a ver si ellso han cambaido las condiciones de uso.

Responder
Nelson Diaz  

Saludos cordiales mi buen amigo, revisando un poco su blog (te comento que estoy también siguiendo tu curso de html, genial) me he encontrado con este excelente consejo que he implementado con éxito en uno de mis blog dedicado a la publicidad el cual es mi campo de acción acá en Venezuela. Muchas gracias por compartirlo amigo. Tengo tan solo como duda, el saber si se puede colocar este código después del "head" en lugar de al final, y si esto ayudaría a que se active mas rápido el efecto, pues al comienzo si se da clic a las imágenes se van al sitio donde están alojadas, y de ser así, cual sería el inconveniente de colocarlo al inicio.

Por otro lado mi estimado observe que tus imagenes parecen estar alojadas en algún sitio de Tumblr ¿Es esto posible? Yo utilizo Skydrive, y busco alguna otra alternativa.

Muchas gracias amigo, de nuevo te felicito y agradezco, muy buen fin de semana.

Responder
JMiur  

El script y el CC se pueden colocar antes de </head> sin problemas. Aún así, es posible que se produzca el mismo resultado ya que la mayoría de estos scripts sólo funcionan cuando se termina de cargar la página. No queda más remedio que probar ver si el cambio lo mejora o si hay alguna otra cosa en el sitio que esté haciendo que la carga total se demore.

Si usé imágenes de Tumblr es pura casualidad. Por lo general uso el mismo Blogger para alojarlas. Otro servicio que me gusta es http://tinypic.com/

Responder
CHiCken  

jmiur y esta ventana modal no tarda mucho en cargar el script como lightwindow :D, quiero cambiar la ventana de ibox por esta porque tengo un problema en visualizar con ibox en IE.

Responder
JMiur  

No sé. Esas son apreciaciones subjetivas. En l opersonal, que tarde 2 o 3 segundos más una cosa que otra me tiene sin cuidado si es que lo quiero usar.

Responder
Albus Dumbledore  

Hola JMiur, intenté implementar esto en mi blog pero no resultó... Lo hicé de 1000 maneras pero nada... Qué pude haber hecho mal?

Responder
JMiur  

Tendría que ver un ejemplo concreto para ver si es posible saber eso.

Responder
Albus Dumbledore  

JMiur no logro que esto de FloatBox funcione en mi blog (elclubdedumbledore.blogspot.com), lo he probado en un blog de pruebas y funciona perfectamente, será que hay algo en mi plantilla que me impide que esto funcione, aquí te adjunto el código HTML de mi plantilla para que por favor lo mires un poco haber que tal, Plantilla Gracias por tu dedicación, espero puedas ayudarme... :)

Responder
JMiur  

No veo nada que pueda interferir. Lo que no sé es si se carga el archivo con el script porque al estar alojado en Google Sites, no me da esa información.

El resto, lo veo correcto.

Responder
Albus Dumbledore  

JMiur lo he logrado!! El script de emoticones impedia que se ejecutará el efecto, lamentablemente lo he tenido que retirar de la plantilla... Gracias por tu valiosa ayuda... :)

Responder
Pavelkapaz  

Perfecto... En vista que no podia colocar prototype y Jquery juntos, esta ventana modal me vino como anillo al dedo... además tiene la gracia que dependiendo de para que se utiliza la ventana cambia el color, y hay que admitir que eso le da su toque...

Muchas gracias Jmiur por la ayuda

Responder
Pavelkapaz  

Saludos Jmiur
Ahora te escribo para pedir ayuda para optimizar la carga del blog. me preocupa que desde que instale floatbox el blog tiene problemas con otras aplicaciones... principalmente con la barra inferior que ofrece Wibiya. Me gusta la ventana modal, por eso pido tu ayuda, ya que lo otro seria colocar otra, pero esta tiene muy buena pinta como te decia en el comentario anterior.

Este es el Blog. Un error que ya me ha pasado dos veces, es que una vez que abro otra pagina con ventana modal de Floatbox, despues esa misma pagina se carga en la ventana modal que trae wibiya... lo que se me ocurre que puede ser, es que el codigo de wibiya posee codigos jquery... tu me habias señalado que prototipe tiene problemas con jquery, por eso establesco la relación...

Lo otro que podria ayudar a saber que sucede, es que al abrir el blog con IExplorer, carga mal la página, y abajo al sector izquierdo identifica unos errores, que nose cual es la manera como solucionar...

te agradeceria la ayuda

Responder
JMiur  

Siempre puede haber incompatibilidades entre scripts, cuanto más complejas son, más posibilidades habrá ¿Cuáles son? Imposible saberlo. No he visto que ocurriera eso pero, tal como dices, puede ser eventual. No usas Prototype así que ese no es el problema.

Si veo que se cargan librerias duplicadas:
http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js
http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js
if (window.jstiming) window.jstiming.load.tick('headEnd');

Los errores que ves en IE no son de IE, tambien se ven en otros navegadores; uno es en:
if (window.jstiming) window.jstiming.load.tick('headEnd');
y el otro en:
http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv200fordeluxetemplates-min.js

Responder
JuanJo  

hola tengo un problema lo que pasa esque no puedo descargar el archivo como ago

Responder
JMiur  

El original lo puedes descargar yendo a la página del autor. El otro ZIP esta disponible y no veo que haya problemas para bajarlo.

Responder
Bro  

Gracias JMiur! He visto en los comentarios que se puede utilizar cualquier script del tipo lightwindow. Seria posible con Floatbox?? es muy complicado implementarlo?
Muchas gracias!

Responder
JMiur  

Imagino que sí, que es posible aunque no es un script que haya uilizado más allá de esta entrada.

Responder
TheLukasWeb  

¿¿Y cuál sería la estructura del codigo para pone un elemento html en la ventana modal??

Responder
JMiur  

Lo desconozco.

Responder
Juan Carlos Pintos  

Gracias!!!!!!
Igual tengo un problema con el "floatbox.group" por mas que diferencie las fotos en carpetas distintas, cada vez que pongo un enlace cuenta todas las fotos que tengo en Dropbox!!!
Qué hice mal?

Responder
JMiur  

No he utilizado este script más allá de esta entrada asi que no conozco su uso detallado.

Responder
Juan Carlos Pintos  

muchas gracias!!! Sigo probando y te cuento

Responder
FRAN LLANO  

Saludos J. Miur, tengo una pregunta sobre floatbox. Lo vengo utilizando prácticamente desde que lo publicaste en la presente entrada, pero ayer como por arte de magia dejó de funcionar. Te dejo un enlace a una entrada de mi blog donde lo utilizo en un SLIDESHOW, y como podrás comprobar no funciona. Gracias de antemano.

ENLACE: http://casetaallio.blogspot.com/2010/12/fotos-feria-2010.html

Responder
JMiur  

FRAN LLANO:

Por algún motivo que desconozco, desde hace varios días, en Fileden no es posible acceder a los archivos de extensión TXT, sean estos scripts o no. Ese es el problema. El script no se carga.

La primera alternativa que se me ocurre (no la he probado) es que, simplemente le cambies la extensión a alguna de las que acepta o no le pongas ninguna.
La segunda alternativa es subirlo a otro sitio, Google Sites o DropBox por ejemplo.
La tercera es simplemente copair y pegar su contenido en la plantilla.

Responder
FRAN LLANO  

Muchas gracias. Ese era el problema. Gracias de nuevo.

Responder
EpideMia  

Hola JMiur!!

me gusta mucho la idea de las ventanas modal.

y queria saber si hay alguna forma de que se abra una ni bien entramos al blog.
mi idea era mostrar una imagen en el centro, con esa transparencia al rededor característica de las ventanas modal y que luego de unos segundo o un click la ventada desaparezca.

hay varias paginas que tienen ese efecto y realmente me gustaria poder hacer algo asi

Responder
JMiur  

Depende del tipo de ventana modal, la mayoría puede ser controlada con JavaScript y eso es lo necesario para que se abra sin necesidad de acciones externas. Lo que no sabria decirte es el modo de hacerlo con este modelo. Deberas fijarte en la página de los desarrolladores donde hay documentación sobre su funcionamiento.

Responder
miquel  

una pregunta:
hay manera de abrirla de forma automatica al iniciar la pagina, es decir, sin poner un tag un link?
gracias

Responder
JMiur  

Supongo que con JavaScript; deberías ver la página de los desarrolladores para averiguar eso.

Responder
Dani  

hola capo!
Primero q nada, gracias por el buen material q publicas y segundo, me gustaría preguntarte cómo hago para centrar la ventana cuando ya se ejecuta el floatbox, pq he buscado por todos lados y no encuentro de q manera hacer para q me quede centrada la ventana.

Desde ya, millones de gracias!!

Responder
JMiur  

No entiendo la pregunta. La ventana modal se centra automáticamente al abrirse.

Responder
Dani  

Gracias por responder y perdón por la molestia capo!!

La ventana modal, no se centraba por sí sola, aparecía en el costado derecho. Pero, después de tanto probar encontré la solución... Y fue esta. En #fbBox, tuve q colocar esto "margin-left: -150px;" para q quedara centrada.

Responder
EL CONDE  

hola Jmiur, q buen post, solo q tengo alojado el script en dropbox y google sities y no se como llamarlosya que no me dan ubicacion con url, hay otra forma, o es cuestion de google sities y dropbox?, puedes recomendarme otro alojamiento para este archivo? , en la plantilla ya coloque el css y ps pàrece q bien, gracias... te agradezcoo infinitamente tu ayuda porfaa

Responder
EL CONDE  

hola JMiur gracias por tu ayudaa, mira ya coloque el css en la plantilla pero el script lo yengo en googlesities y en dropbox pero no me dan url entonces no se como llamarlocon url, en q otro lado lo puedo alojar.. ayudaaaa porfaaa te agradezcoooo

Responder
JMiur  

En ambos servicios, los archivos deben ser públicos. En esta entrada, se muestra cómo averiguar la URL de los archivos alojados en DropBox y cómo guardarlos. De todos los servicios que conozco, es el mejor.

Responder
MUDVDFULL  

Hola, la verdad muy buena la ventana modal esta, la estoy usando en mi pagina para los videos y las imagenes y se ve de lujo!
Pero eh aqui la pregunta, como puedo hacer para meter en la ventana mi formulario de contacto (yo uso el de esta pagina: http://es.foxyform.com/)? Asi como te aparece a ti.
Desde ya muchas gracias y me has sacado de aprietos mas de una ves, jejejeje....

Responder
JMiur  

Para eso, debes alojar ese formualrio en algun sitio web y cargarlo como IFRAME. Lo mismo puedes hacer creando un blog auxiliar y agregando allí el formulario.

Responder
F. Fletcher  

Encontre mas codigos para ampliar las herramientas de Floatbox. http://www.ajaxshake.com/demo/ES/238/aab99a46/lighbox-con-capacidades-de-reajustarse-floatbox.html

JMiur  

Será cuestión de ver y probar :-)

Responder
admin  

impresionante este complemento!!
lo voy a usar en mi blog!!
veo q existe ya una version mas reciente...

esxistiria la forma de poder actualizarlo???
e intentado subiendo el script pero no da resultados!!
saludos!!

JMiur  

Lo desconozco, sólo lo he usado en estos demos. No sé si las versiones más recientes tienen alguna diferencia sustantiva o no.

Responder
Ramos  

hola y muchas gracias por el material, queria preguntar como lo podria incorporar a tumblr, si me podrias dar una idea de donde debe de ir el
"a rel="floatbox" y si debo cambiar algo para que funcione.

Gracias de antemano

-Alex

JMiur  

Lo desconozco, Tendrías que preguntar en los foros de Tumblr mismo.

Responder
Pancho Gámez  

EXISTIRA ALGUNA FORMA DE DESACTIVAR EL USO DE LAS FLECHAS " DERECHA IZQUIERDA" EN EL TECLADO? ESUQ LO QUIERO UTILIZAR PARA MOSTRAR UN JUEGO FLASH EL CUAL USA EL TECLADO, PERO NO SE PUEDE USAR CUANDO ES MOSTRADO DESDE LA VENTANA MODAL, YA QUE ME IMAGINO QUE ESTA USA ESAS DICHSOSAS FLECHAS...

O SABES DE ALGUNA VENTANA MODAL PARA MOSTRAR JUEGOS FLASH?

JMiur  

No veo que haya problema alguno con eso. Funcionará bien siempre. Basta tener el archivo Flash en foco, haciendo click dentro o lo que sea.

Fíjate en el ejemplo de esta msima entrada.

Responder
Eva Llanos  

Lo primero de todo gracias por el post. Lo segundo es una duda que quería preguntarte respecto al floatbox.group
Me gustaría añadir un texto diferente a cada imagen, debajo de "Image 1 of 3" y no se si es posible hacerlo y tampoco dónde ni cómo.
Gracias de antemano

JMiur  

Lo desconozco, tendrás que consultar en la página de los desarrolladores.

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