TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN

Ventanas modales para vídeos, imágenes,...

Para abrir en ventanas modales, cualquier tipo de archivo, imágenes, juegos en flash, videos, etc, lo podemos realizar gracias a Shadowbox.

Tendremos que entrar en Diseño y edición HTML, en nuestro blog y justo antes de </head>Tendremos que copiar el código siguiente.

<!-- Ventana modal -->
<link href='https://sites.google.com/site/archivosjava/archivos-js/blccbx.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/archivosjava/archivos-js/bljjShadowbx1.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: &quot;#000&quot;,
overlayOpacity: &quot;0.6&quot;,
});
</script>


Esto permitirá, que en nuestro blog podamos poner cualquier imagen, video etc, que deseemos en ventana modal, sólo hay que insertar el código para que nuestra imagen se visualice en una entrada, gadget, de esta forma (pinchando sobre la imagen podemos ver el resultado):



El código a insertar en la entrada, gadget, etc, sería :


<a  title="imagen 1 rel="shadowbox" href="http://www.adigitaldreamer.com/gallery/albums/userpics/10001/normal_yellowlilly.jpg"><img src="http://www.adigitaldreamer.com/gallery/albums/userpics/10001/normal_yellowlilly.jpg" style="width: 100px;"></a> :

En el lugar donde aparece el código en  rojo pondremos la url de la imagen que deseemos, donde está en azúl el título que deseemos para la imagen, en el caso que no deseemos poner título sólo tendríamos que quitar del código: title="imagen 1". Lo que no deberemos de olvidar es rel="shadowbox" , que es lo que hace que la imagen tenga este efecto.

Si lo que deseamos es insertar un vídeo (pinchando sobre el vídeo podemos observar el resultado):





El código sería:
<a rel="shadowbox;width=600;height=500;" title="Cerezos en flor Sierra de Gata" href="http://www.youtube.com/v/uuExvvgeC48?rel=0;autoplay=1"><center><img src="https://lh6.googleusercontent.com/-0ePd1gV6oag/Tc_b52P_BiI/AAAAAAAADWY/FVo2zcFPxXU/s288/cerezos.jpg"width=100;height=50;></center></a>

Donde:
width=600;height=500; corresponde al ancho y alto de la ventana modal del vídeo,  
title="Cerezos en flor,Sierra de Gata"el título que aparecerá en la ventana modal, el cual se puede suprimir.
http://www.youtube.com/v/uuExvvgeC48 será la url del vídeo en este caso de youtube, aclarar que en la barra de direcciones esta url aparecerá de esta forma: http://www.youtube.com/watch?v=uuExvvgeC48 Hay que quitar el trozo morado y el =sustituirlo por /.
https://lh6.googleusercontent.com/-0ePd1gV6oag/Tc_b52P_BiI/AAAAAAAADWY/FVo2zcFPxXU/s288/cerezos.jpg, es la imagen que aparece en la entrada y que al pinchar sobre ella, abre la ventana modal del vídeo.

4 comentarios:

  1. Hola: soy principiante... MUY PRINCIPIANTE, en esto del HTML y creación de páginas y demás, pero quiero poner ventanas modales en mi página. Tengo un programa muy básico que es Web Page Maker, pero si me permite poner códigos html extras para ejecutar funciones solo que no se como poner esos códigos para que me funcionen a partir de un botón ya creado como link. Y no se donde debo poner el shadowbox, vaya, ni si siquiera se si es un programa o solo un código que se entienda en la web solo con ponerlo.. Se que debe ser difícil darme una respuesta con esos simples datos, pero estoy URGIDA de entender como se hace esto. También tengo dreamweaver, pero no le entiendo mucho.Mi programa me ofrece la opción INSERTAR CODIGO html o java scripts en el menú INSERTAR y también otra que es Extra HTML code, en el menú FORMATO y aqui me divide en tres la posiblidad ANTES DE LA ETIQUETA HTML, DESPUÉS DE LA ETIQUETA HTML O CÓDIGO JUSTO ANTES DEL BODY. Se que sueno muy inexperta, pero todas las explicaciones que he encontrado de ventanas modales me son muy confusas aunque parece ser algo fácil. Gracias de antemano, espero haberme explicado de alguna forma

    ResponderEliminar
    Respuestas
    1. Tienes que insertarlo antes de la cabecera de la página, Sadowbox es una aplicación en java para visualización.
      Y en el lugar donde quieras insertarlo en tu caso en el botón, cambia el botón por donde está el código donde pone imagen1, espero te sirva. Un Saludo

      Eliminar
  2. Buen articulo Dios te bendiga.... me sirvio.

    ResponderEliminar

Entradas populares

Colaboro En:

textoalternativo textoalternativo textoalternativo

Atención

Los comentarios serán publicados una vez hayan sido moderados, disculpen las molestias.

Este blog es informativo y de caracter educativo, el administrador del mismo no se responsabiliza del uso fraudulento o ilegal que otras personas hagan del contenido publicado en él.

Así mismo si alguien cree que se vulnera algún derecho se ruega ponerlo en conocimiento para que se subsane de forma inmediata.