JMiur [E]

Esta es otra entrada a modode respuesta. Esta vez es Alex quien consulta por un efecto que oscurece la pantalla, dejando ciertos elementos visibles, algo que puede utilzarse, por ejemplo, para resaltar los videos.

Para que funcione necesitamos JavaScript y si bien podría ser posible hacerlo sin librerías adicionales, lo mejor es emplearlas para que el efecto sea más interesante. Vamos entonces a ver ejemplos tanto para JQuery (que son los scripts originales) como para Prototype + Script.aculo.us.

Para el primer ejempo usaremos jQuery así que debemos tener cargada la librería y luego, el script. Por último, las definciiones de CSS. Colocamos todo eso antes de </head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>

<style>
#lightsoff-background  {
height: 100%;
left: 0;
margin:0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 20;
}
</style>
Para utilizarlo en cualquier parte de nuestro blog, simplemente, agregamos un enlace de este modo:
<div id="lightsoff"><a href="#"> texto o imagen </a></div>
Un ejemplo online de esto, puede verse AQUÍ; oprimiendo el botón, la pantalla se oscurecerá dejando visible el video y haciendo click en cualquier parte de la pantalla, resturaremos la página a su estado original.

El segundo ejemplo también requiere jQuery y es una idea de Emanuele Feronato. Como en el caso anterior, requerimos tener la librería, el script y las definiciones de CSS, todas ellas las colocamos antes de </head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>

<style>
#the_lights{
background-color: #000;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#standout{
background-color: white;
padding: 5px;
position: relative;
z-index: 1000;
}
</style>
Por último, requerimos agregar un DIV extra en nuestro sitio así que lo agregamos al final, justo antes de </body>:
<div id='the_lights'></div>
A diferencia del caso anterior, lo que hace este script es preservar un área y oscurecer el resto; lo utilizamos de modo similar al anterior pero, en este caso, hay tres botones que sirven de enlace que colocamos dentro de un DIV donde también colocaremos todo eso que queremos resaltar:
<div id = "standout">
<div id="turnoff"> LUCES NO </div>
<div id="soft"> A MEDIA LUZ </div>
<div id="turnon"> LUCES SI </div>
... y aquí ponemos lo que queremos que sea visible, por ejemplo un video ...
</div>
El ejemplo puede verse AQUÍ; y allí, son esos tres botones los que controlan la opacidad del la ventana.

Por último, si lo que usamos es Prototype + Scriptaculous, la solución es un poco menos profesional pero, se me ocurrió que podría hacerse de modo similar, mezclando un poco de las dos anteriores. Agregamos el script:
<script type='text/javascript'>
//<![CDATA[
... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>
Allí veremos tres funciones:

function getPageSize() es la misma que se usa para el primer ejemplo y es la que nos permite calcular la altura de la ventana a oscurecer
function lightsOFF() es la función que oscurecerá la pantalla
function lightsON() es la función que restaurará la pantalla

Luego, el estilo CSS:
<style>
#OSCURECER { /* este es el div inferior, que ocupará toda la ventana */
background-color:#000;
opacity:0.9;
filter:alpha(opacity=90);
position: absolute;
margin:0;
padding: 0;
z-index: 20;
left: 0;
top: 0;
}
#lightsONOFF { /* este es el enlace que eprmutará el estado de esa ventana */
display: block;
opacity: 1 !important;
filter:alpha(opacity=100);
position: relative;
z-index: 30 !important;
/* cualquier propiedad de estilo */
}
object,embed {
opacity = 1 !important;
filter:alpha(opacity=100);
}
</style>
Como en el segundo caso, agregaremos un DIV al final de nuestro sitio, antes de </body>:
<div id='OSCURECER' style='display:none;'/>
Y lo uilizaremos creando un enlace así:
<a href="javascript:lightsOFF();" id="lightsONOFF"> APAGAR LAS LUCES </a>
Al hacer click en ese enlace, se ejecutará la función lightsOFF() y allí, se establecerán las propiedades CSS faltantes del DIV OSCURECER que estaba oculto (width y height) y se lo mostrará, usando Effect.Appear. Además, cambiaremos el atributo href del enlace llamado lightsONOFF para que podamos restaurar la ventana y su texto.

La función lightsON() hace lo contrario, restaura la ventana con Effect.Fade ocultando el DIV y vuelve a cambiar el atributo href y el texto del enlace lightsONOFF.

49 comentarios:

Angel Cba  

Interesante como siempre, pero prefiero las ventanas modales son mas bonitas, creo que ire a buscar esa entrada por que si mal no recuerdo la havia visto explicada por aqui.

Responder
Gem@  

plas, plas, plas, plas, (aplauso)
Buen tutorial maestro con pelos y señales como decimos aquí.
Las ventanas modales cambian radicalmente el aspecto en la forma de visualizar un objeto, hay tantas y variadas que se hace dificil la elección pero me decanto por las de carga rápida. Por cierto no te olvides de mi si ves alguna que sea liviana y un poquito agraciada estaría dispuesta a serle infiel a iBox sin ningún remordimiento. :)

Responder
Unknown  

Que hayas encontrado la solución para la empresa de energía de Córdoba, es todo un acontecimiento!!! jajaja ya no tendremos problemas, nos instalamos una de las librerías y ya! :P

Responder
Alex  

Genial JMiur, con la de vueltas que yo le di... :) Muchisimas gracias!!! al final he optado por la tercera opcion que has puesto, me a gustado mucho.
La he puesto en mi blog de documentales de momento en esta entrada:
http://secretotv.blogspot.com/2010/02/grandes-misiones-de-la-nasa-geminis-el.html
En el de cine no funciona bien, hace el efecto de apagarse pero también apaga los vídeos que están embebidos en players que no son de megavideo o youtube, por ejemplo en el reproductor flash.
Bueno JMiur lo dicho, muchas gracias, y si quieres que te ponga en mi blog alguna peli o documental en concreto no tienes mas que pedírmelo ;)
Saludos.
Alex.

Responder
Bocha  

Amigo JMiur, Coloque en mi blog la publicidad de Adsense, (GOOGLE)... esta en la sidebar mas grande a la derecha, y por lo que veo solo me deja ponerle los tamaños predeterminados que hay. Me gustaria saber como editar el tamaño a mi gusto, lo que quiero es que el ancho sea de 365px, y ese valor no me lo dejan poner...

QUE HAGO????

Este es el blog.

http://abran-cancha.blogspot.com/

Responder
Angel Cba  

Yo tengo la miasma duda de bocha, ya que en ocaciones he modificado el tamaño y si aumenta pero no aumenta el tamaño de la imagen o de los enlazes simplemente se cre un espacio hueco en el anuncio, si se puede seria una buena opcion.

Responder
Unknown  

Olvidé decirte 'con mi chiste malo' que es genial la entrada :P

Responder
JMiur  

Lagarto:
Es interesante para esos videos que no se muestran en una ventana modal.

Gem@:
Es verdad eso de las modales. No, no me olvidé pero, no he visto nada liviano, nada que supere a iBox ... por ahora. No perdamos als esperanzas :)

Graciela:
No se me ocurrió esa idea pero ... la tendré en cuenta :D

Alex:
Me alegro que funcioanra, la tercera es una solución made-in-casa porque vi que usabas Prototype así que las otras no te hubieran servido. Con megavideos debería funcionar igual, eso es raro; de todas formas, podemos resolverlo con un extra.

Primero, una clase CSS extra:

.megavideo {
margin:0 auto;
position:relative;
z-index:1000;
opacity:1 !important;
filter:alpha(opacity=100);
}

Ahora, como usas EMBED para esos videos, colcoa el código de EMBED en un div de este modo:

<div style="width:430px;height:400px;" class="megavideo">
............... aqui EMBED .........
</div>

Debes darle siempre el width y height con valores iguales al embed y si son todos iguales, eso, lo pones en la clase CSS.

He colocado un ejemplo online con uno de tus videos para que veas el resultado: AQUÍ

Bocha, Lagarto:
Que yo sepa, eso no puede hacerse porque violaría las condiciones de uso que dicen que los códigos NO deben ser modificados. De todos modos, son IFRAMES y por lo tanto, inmodificables.

Responder
EM2.0  

Hola capitán, no puedo dejarte unos días que me cargas de lecturas :D. Voy a probar esto que me ha gustao, pero antes refrescame la memoria sobre una cosa no la vaya a cag... si mal no recuerdo si tenia cargado Prototype + Script.aculo.us. no podía cargar jQuery porque interferían una con otra, o me lo he sacado de la manga??

Responder
JMiur  

Así es, tal como dices. O una u otra. En este caso, hay para ambas librería así evitamos peleas :D

Responder
Midrez  

Hola...

La consulta: Se puede hacer algo para que solo determinado "objeto" sea visible y que se oculte el resto, por ejemplo, tengo este gadget de Twitter del Escaparate de Rosa y la Nube de Etiquetas animadas, y cuando se oscurece, son esas dos cosas las que siguen visibles, además del video (por decir algo).

Además, puedo poner alguna otra cosa visible, por ejemplo un texto.

Gracias Jmiur

Responder
Alex  

Genial ahora ya funciona bien.
http://justintvzapping.blogspot.com/2010/02/nine.html
Muchísimas gracias por dedicar tu tiempo JMiur.
Si te parece bien pondré unos enlaces en mis blogs hacia el tuyo.
Saludos.
Alex.

Responder
Alex  

Perdona JMiur, se me a ocurrido meter un chat inicialmente oculto con scriptaculous, funciona bien pero mientras se esta expandiendo se ve un fondo blanco, puedes verlo aqui:
http://justintvzapping.blogspot.com/2010/02/prueba_6662.html
¿Como podría arreglar eso? me he comido el coco pero no doy con la solución, no quisiera abusar de tu confianza.
Saludos.
Alex.

Responder
Alex  

Parece que ya lo he solucionado, el problema es que con el firefox no se porque no se ve bien, pero con el explorer y el chrome se ve perfecto.
http://justintvzapping.blogspot.com/2009/12/avatar.html
Saludos.
Alex.

Responder
JMiur  

Midrez:
No se oscurecen porque también son objetos de Flash. Entonces, en lugar de usar algo como:
object,embed {
opacity = 1 !important;
filter:alpha(opacity=100);
}
deberías intentar algo como lo explciado en el comentario 8, agregar una clase específica para dolocar allí lo que quieras mantener visible:
.objetovisible {
position:relative;
z-index:1000;
opacity:1 !important;
filter:alpha(opacity=100);
}

Alex:
Me alegra que funcioanra. Lo del chat, será difícil de resolver. Puedes probar dos cosas. Usar el parámetro wmode o usar el parámtreo bgcolor. Deben colcoarse en object y en embed:

<param name="wmode" value="transparent" /> para object
wmode="transparent" para embed

o bien:

<param name="bgcolor" value="#000000" /> para object
bgcolor="#000000" para embed

No sé que parámetro estás usando o con qoe parámetro lo has solucionado, si es PARAM algo, debes agregar el mismo en EMBED

Responder
l u c i a l u c e l u c e s  

Lo acabo de implementar en un blog que le estoy rediseñando a una amiga y me viene como anillo al dedo.
Es un blog/portofolio de los dibujos de mi amiga que se llama lucialuceluces.

Que mejor en blog de fondo negro que poner en la parte superior derecha una bombilla que al pinchar en ella hace que se apage todo el blog menos sus dibujos¡¡¡
te dejo el link por si quieres verlo aplicado:
lucialuceluces

Responder
Gem@  

Ohhhh que buena idea la de Lucía :)

Responder
JMiur  

Perfecto, Lucia; Gem@ tiene razón, es un gran idea :D

Responder
proteo  

Que tal, otra vez molestando con una duda, existirá alguna manera de implementar el encendido y apagado, al cargar una página, o sea, que al estar cargando la página, que esté apagado, con un cuadro visible, y al terminar de cargarse, que se encienda la luz, por así decirlo, como las imágenes de loading, que al terminar de cargar desaparece, gracias, nos vemos...

Responder
JMiur  

Sí, imagino que si pero no podría darte los detalles.

Responder
Anónimo  

Hola JMiur, he usado la última opción porque uso Prototype y Scriptaculous, el problema es que cuando la ventana está oscura hay que volver a darle al botón para que se enciendan las luces y yo me pregunto si hay algún modo de hacer que se enciendan las luces haciendo clic en cualquier parte

Responder
JMiur  

Es posible que si pero habría que rehacer el script.

Responder
Tutorias técnicas  

Hola como estas JMiur ? bueno eh leido tu blog y me parece muuy bueno y de mucha ayuda, estoy probando el efecto de apagar y encender pero cuando se hace click en "Apagar las luces" queda la parte izquierda sin el efecto y no se en donde esta el error :s
Te dejo el link al blog http://tutorias-iade.blogspot.com/
es un blog que cree para el lugar donde trabajo
Te agradeceria si me podes ayudar para solucionar el problema, gracias

Responder
JMiur  

Tutorias técnicas:
Creo entender que eso ocurre porque has colocado el DIV oscurecer dentro (debajo) de otro DIV llamado body_wrap.
Debes colocarlo justo antes de &lt/body> para que abarque toda la pantalla del monitor.

Responder
Huerta  

:D ya esta funcionando, si quereis echarle un ojo...

http://ytuves.blogspot.com/2010/02/manifiesto.html

Ah!!!! Gracias. ya queda menos...

Responder
Joan Irazu  

Al entrar a un archivo de txt me direcciona a la pagina principal del hosting, no puedo ver los codigos. Puedes reparar los enlaces ;)

Responder
JMiur  

La cuenta fue suspendida sin xplciaciones asi que cuando pueda, volverán a estar online.

Responder
Federico  

Hola JMiur funciona excelente! Ahora te hago una pregunta. Como hago para que el efecto por ejemplo tarde un segundo? Funciona bien pero lo muestra muy rapido. Sin embargo tu ejemplo tiene un tiempo de demora en mostrar el efecto.

Gracias

Saludos

Responder
JMiur  

Si se trata del último efecto, eso lo provoca el mismo Scriptaculous con:
new Effect.Appear
new Effect.Fade
En ambos casos, en el ejemplo, no hay parámetros extras pero pueden agregarse; el delay es el que utiliza por defecto.

Responder
Unknown  

Hola amigo realmente me sirvio el segundo, pero te comento que al apagar las luces me queda todo lo que rodea a la zona activa sin poder cliquear, para poder cliquear un enlace tengo que recargar la pagina, porque sera??

Responder
JMiur  

Es lo que ocurrirá, por eso, el botón de "ENCENDER" debe estar dentro del DIV.

Responder
Franco_pc  

Hola JMiur, tengo un problema con el primero, se me oscurece todo encima de la pantalla de video, por q? , gracias

http://emotiontv.blogspot.com/

Responder
Franco_pc  

Hola, perdón en el 3ero, el estilo CSS en que parte del blog lo pongo. gracias.

http://emotiontv.blogspot.com/

Responder
Franco_pc  

Bueno revisa mi blog no me hace efecto el 3ero, seguro puse algo mal o no! gracias

Responder
JMiur  

Revisa lo que has hecho proque en el código fuente, el estilo se ve dentro del script y eso es un error:

<script type='text/javascript'>
//<![CDATA[
<style>
...........
</style>
//]]>
</script>

Responder
Franco_pc  

mmmm y como soluciono eso!

Responder
JMiur  

Fíjate otarvez en el post y verás que no has hecho lo mismo.

Responder
Franco_pc  

umm una pregunta el estilo CSS, en que parte va antes o despues de

Responder
JMiur  

Tal como muestra el post, acá el ordern es librería, script, style pero, el estilo puede estar antes o después, es indiferente.

Responder
Resistencia Rojiblanca  

No se puede descargar los textos, sale esto:

Forbidden

You don't have permission to access /files/2007/12/6/1629655/lightsoff2.txt on this server.
Apache/2.2.3 (CentOS) Server at www.fileden.com Port 80

Responder
JMiur  

Fileden no está funcionando así que acá están los tres archivos:


lightsoff1.txt
lightsoff2.txt
lightsoff3.txt

Responder
JMiur  

En el segundo caso que es el del ejemplo, es un enlace así que basta cambair el texto APAGAR LAS LUCES por una etiqueta IMG con la imagen.

Responder
Resistencia Rojiblanca  

Exelente truco, lo aplique en mi blog si quieren verlo en accion vallan a una entrada, saludos

Responder
Fernando_Miranda  

JMiur me sirvio, jajaja Espero no sobrecargar el blog de widgets y funciones. Muchas Gracias. :D

Responder
AttilaGenia  

Hola me gustaria que vieras este blog, y me digas por que no se me oscurecen las ventanas. Gracias www.genia123.blogspot.com

JMiur  

Para empezar, hay un error en el CSS; dice;

.post {height:400px; overflow:auto;
and will now look like bellow
.post{height:400px; overflow:auto;
margin: 0 0 25px 0;
}
h3.post-title, .comments h4 {
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
}

eso de and will now look like bellow no va. y falta una llave de cierre por lo tanto, todo l oque sigue no se ejecuta. Supongo que ha querido escribir esto:

.post {height:400px; overflow:auto;}
.post{height:400px; overflow:auto;margin: 0 0 25px 0;}
h3.post-title, .comments h4 {
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
}

Responder
Teatro Autónomo Mexicano  

Amigo no funciona el efecto en tu blog de pruebas, ¿puedes repararlo?, ya que mi efecto en mi blog depende del tuyo, gracias.

JMiur  

No veo problema alguno, el demo funciona perfectamente.

Responder

¿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 ...

 
CERRAR