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: "#000",
overlayOpacity: "0.6",
});
</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> :
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.
gracias amigos
ResponderEliminarHola: 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
ResponderEliminarTienes que insertarlo antes de la cabecera de la página, Sadowbox es una aplicación en java para visualización.
EliminarY 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
Buen articulo Dios te bendiga.... me sirvio.
ResponderEliminarMuchas gracias por el aporte, quisiera saber si hay forma de colocarle un boton de cerrar, ya que no permite cerrar o ir atras con un video local.
ResponderEliminar