JMiur [E]

Futurebox es un experimento para crear algo así como una ventana modal al estilo que lo hace LightWindow, iBox, FloatBox o cualquier otro script pero .. sin JavaScript, usando sólo CSS3. Esto, quiere decir que no funcionará en Internet Explorer pero si lo hará en Firefox, Opera, Safari y Chrome ya que se basa en la posibilidad que da una pseudo clase llamada :target.



El código HTML para las miniaturas sería algo así:
<a href="#contenedor1">
<img src="URL_imagenMiniatura" width="ancho" height="alto" id="imagenM1" />
</a>
En cada una colocaremos un atributo href con el nombre del contenedor (siempre diferentes) y cada miniatura también tendrá un nombre único.

Ahora el modelo del contenedor que permanecerá oculto y que es donde está la imagen original:
<div class="overlay" id="contenedor1">
<div class="overlay_container">
<a href="#close">
<img src="URL_imagenOriginal" width="ancho" height="alto" />
</a>
</div>
</div>
Lo que faltarías, sería el estilo CSS:
<style>
.overlay{
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 999;
}
.overlay .overlay_container{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.overlay_container img{
background-color: #678;
padding: 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.overlay:target {
display: table;
}
</style>

REFERENCIAS:anieto2k

22 comentarios:

Vku  

realmente no conocia display: table, otra cosa que aprendo.
Igualmente que no funcione con Internet Explorer ni LightWindow funciona bien ni el que tengo yo tampoco a pesar de hacerle montones de modificaciones.

Responder
Graciela  

la pregunta hoy: por qué muchas aplicaciones no funcionan en IE???...buen día parece que caen copos de nieve por todos lados :)

Responder
Shark_Bloody  

Ya se podía lograr ese efecto, pero bueno, es una forma distinta ;)

Responder
cargohe  

Hola gracias pero no se donde coloco el primer codigo de la miniatuar y el segundo codigo donde y el css

Responder
jαvιєя_ɢ  

Hola JMiur

Primero que todo, disculpa por usar esta entrada para hacer mi pregunta, pero no encontré nada parecido a lo que busco.

Te cuento. He visto algunas páginas en las que se puede acceder mediante las cuentas de Facebook. Es algo que se llama Facebook Connect.

Lo que quiero hacer, y creeme que he buscado bastante sin llegar a buen puerto, es un chat como los de Cbox, pero que para postear se tenga que ingresar con la cuenta de Facebook.
Lo unico que encontré relacionado con Blogger, es una página llamada Disqus.com pero no logré entender como funcionaba, ya que seguí todos los pasos (creo) y no apareció nada en mi blog.

Ojalá me puedas ayudar, te lo agradecería bastante.

Saludos
Javier

http://futbol.institutonacional.blogspot.com

Responder
Vku  

tambien se puede cambiar para que salga un titulo, algo así:
en CSS:
.overlay_container img{
background-color: #678;
padding: 15px 15px 65px 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
Y despues en la entrada o donde va la imagen:

<a href="#contenedor1">
<img src="URL_imagenMiniatura" width="anchopx" height="altopx" id="imagenM1" />
</a>

<div class="overlay" id="contenedor1">
<div class="overlay_container">
<a href="#close">
<img src="URL_imagenOriginal" width="anchopx" height="altopx" /><p style="border: 2px solid maroon; padding: 5px; background: white none repeat scroll 0% 50%; width: 228px; text-align: center; font-weight: bold; position: relative; top: -75px; left: 35%; color: black; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; opacity: 0.5;">
TITULO</br>Click en la imagen para cerrar
</p>

</a>
</div>
</div>

Responder
JMiur  

Vku:
Aunque normalmente usamos tres valores (none, inline y block), la propiedad display tiene muchas otras posibilidades: list-item, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption. Todas ellas son aplicables a cualquier navegador de última genaración , incluyendo IE8. En este cuadro hay una lista de los diferentes navegadores y como funcionan con estas propiedades.

Graciela:
Esta en particular porque usa algo que aún es experimental la version de CSS 3 (la normal es la 2) y en IE no la han colocado cosa que no creo que esté mal ya que son reglas que se están discutiendo y aún falta mucho para que se apliquen. En cuanto al resto, depende. En IE8 las diferencias son mínimas.

Shark_Bloody: Con scripts si, sólo con CSS muy difíci porque la clave es el uso de la pseudo-clase :target del CSS3. Este es un demo de las posibilidades que daría esa pseudo-clase.

cargohe: Esto, sólo es experimental. El código va donde quieras probarlo. El CSS en la plantilla como cualquier otro y el resto en un post o un elemento HTML.

jαvιєя_ɢ 5: Facebook Connect no puede usarse en Blogger, requiere PHP. No conozco ningún otro sistema de ese tipo para usar en Bloger; probablemente no haya ya que todos requieren una aplicación y l oúnico que puede ejecutar en Blogger es JavaScript; por eso existe Google Friend Connect que es una aplicación que maneja Google.

De Disqus se que es un reemplazo de los comentarios similar a Intense Debate u otros; no se nada más :)

Responder
Espineli  

Qué pasada, me tendré que poner a experimentar en un blog de pruebas :D

Salut!!

Responder
Vku  

si ya conocia esa página, gracias.
por eso no funciona en IE por display: table; y display: table-cell;

Responder
JMiur  

Suerte, Espinelli.

Vku: IE8 acepta todas las propiedades display:table-xxxxx

Responder
Graciela  

ohhh yes es así CSS3 no es aceptado aún por IE...me lo había olvidado, porque leo sobre CSS ;)

Responder
JMiur  

No tengo porque dudarlo, Graciela :D

Responder
jαvιєя_ɢ  

JMiur,

Encontré una forma de integrar Facebook Connect a Blogger, y realmente funciona, en el sentido de reconocer la cuenta de Facebook.

Se puede insertar un formulario de comentarios, pero no supe personalizarlo para ponerlo en la sidebar, y al parecer no tiene un limite inferior cuando acumula muchos posts.

Este es el link:
http://khammami.blogspot.com/2009/07/how-to-add-facebook-connect-to-blogger.html

Saludos.

Responder
jαvιєя_ɢ  

Disculpa las molestias, sigo buscando y ahora, en la página de facebook, encontré que el "Comments Box" es completamente personalizable usando CSS. Quizás eso pueda ayudar en algo, pero no estoy seguro.

http://developers.facebook.com/news.php?blog=1&story=198

Saludos.

Responder
JMiur  

Aparentemente, los scripts generan una serie de IFRAMES. Si es así, esos FRAMES no pueden ser modificados a diferencia de lo que ocurre con el mismo sistema implenetándolo en WordPress ya que allí se ejecuta PHP.

Desconozco si hay alguna otr forma de hacerlo.

Responder
Vku  

si el ie8 es el unico pero falta mucho para que se utilize wn su totalidad todabia hay quien esta con el ie6, o aun peor todabia hay quien utiliza ie.
en mi caso yo mi blog lo diseñe para firefox y dejo un mensaje para el que entra con el ie.

Responder
JMiur  

En mis estadísticas veo que aún hay gente que usa IE 5.5 e IE 5.1 pero, eso no es algo que uno pueda manejar. No importa qué navegador se use. Las últimas versiones de todos los navegadores son buenas y todos han mejorado muchísimo. La única recomendación que yo haría es que siempre se tenga instalada la última versión estable de aquel que se utiliza.

En la medida en que los desarrolladores dejen de pensar en si hay o no hay usuarios con navegadores obsoletos y dejen de darles soporte, el cambio será rápido. En realidad, ya lo es, ya ha comenzado y hoy, tiene tanto sentido verificar si un sitio se ve bien o mal en IE6 como verificarlo en Mosaic. Hace muchos años que son parte de la historia.

Responder
Vku  

yo no quiero crear una discucion sino aportar mis preferencias o algo asi.
en mi caso trato de fijarme en firefox, IE7 e IE8 nada mas.
y SI tendrian que actualizarce a lo ultimo.
en mi caso sigo con el ie7
y a páginas de clientes o amigos que he echo le he agregado un código para que se vean si entran con el ie8 como IE7.
tengo un sistema operativo windows xp sp3 intalado con IE8 pero virtualmente con virtual pc.
yo soy de firefox, aunque con esta ultima actualizacion he tenido problemas de cuelge y demoras se que no soy el unico.

Responder
Espineli  

JMiur funciona a la perfección gracias ;)

Responder
Espineli  

El único defecto que le veo es que al pinchar para abrir la imagen y cerrarla, la pagina se queda arriba del todo, o sea en la cabecera del blog :-I no sé si esto se puede arreglar.

Responder
Meri Pellens  

Olá! Estou querendo esses emotions; srá que consigo?:D

Responder
JMiur  

La posición la define top:0 que es justamente la parte superior de la página. Para controlar la posición en función de la pantalla, debería usarse JavaScript y allí es donde se acaba el experimento :D

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