Shadowbox es un visor para medios de comunicación, quizás nos suene más si decimos que se trata de una ventana modal donde podemos mostrar casi cualquier tipo de formato, imágenes, QuickTime, Windows Media Player, Flash, vídeo Flash, HTML y páginas web externas. Resulta muy elegante porque carece de marcos y puede adaptarse a cualquier diseño de blog.
Para utilizar Shadowbox debemos añadir a la plantilla shadowbox.js lo descargamos y lo alojamos en un servidor para obtener la url.
Paso 1º
En plantilla edición de HTML justo después de ]]></b:skin> añadimos lo siguiente:<script src='url-archivo-shadowbox.js' type='text/javascript'/>
En url-archivo-shadowbox.js lo sustituimos por la url que obtenemos al alojar el archivo en nuestro alojamiento.
Paso 2º
Justo después añadimos:<script type='text/javascript'>
Shadowbox.init();
</script>
Paso 3º
A continuación los estilos:<style type='text/css'>
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOj6pnqYJiilS3N7e0wtS09R6GZdMHsRljSJ7DdMDH6bl1IyNEF9g3gj7ZZDP-iebDL8WMisE9Qdw6_Ndwp9xBBS3bxdPWPmj6cP6SDcNsL2yAElC8Wr76e3jnnxJEPv7kgjcIphqNEtI/s1600/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicGNxXnepWEhiYNvoaAFCTVG5Oj5RXJczfIsvfbmRmauKfjnK7r880ms_lYg5y8pfrdbwcHahUvpA1-hb-uSHeP9sgC4U_-HFzH1E7TK7iWBnBmnALOKdrhS3mVuRKBMXuQ_t2809FDdI/s1600/close.p);}
#sb-nav-next{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTliNrvNKvThjZpeU4KFMHedCpgWg39zciR_KFuJdCOsE1n_uHxUuy32A8YP8-OKjKEdogT4AkEshyphenhyphenno4YDDbJT25v8ZVpDBVHM6Pvz_tmHBsq3Stao74wpLkM5SOKfDkuLBhwD8Y6Pa0/s1600/next.png);}
#sb-nav-previous{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY9P8FtFGoazfLrmjoIEaVlEWOkgJjYHaHMWEujeTHKkNlSDWHnFydbOPKx15kOhiI0SU2hXNSmMjcg6oD7fXzcOSLocoGHKdENvrMJQZL1C0REAMB1m23PCefme19OdlVhYG9sOdA_wM/s1600/previous.png);}
#sb-nav-play{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgncjXPN1mDpvOqvvLqv91P2-COegnUS6qdT-yYjzYPCkLFXWujdpySvVoSaNAgtko6KvFP521iI6vKJ64uLyleOxr0sAGg9pr-N1hQUSrP3hVxyBSARW8I6mZdiEzYX365y-MFm3XafH4/s1600/play.png);}
#sb-nav-pause{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieror_cLwPtITS_SUXLNTwdpt010G2vJTBQ6QlQ-Pibson2hwkJ-wUYBn-aSK4N9lX1yoAnrRQV_SJvJSGHYwuDD4tRTsaxyJQI4MvxVBFLMa9JriIbdWu6rjKPNN59JpzSceQ9IEkgco/s1600/pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
</style>Antes de seguir, comentar la opción de añadir shadowbox.js directamente a la plantilla, con ese paso evitamos alojar el archivo en un servidor externo.
Si optamos por añadirlo en la plantilla lo que haremos será copiar el contenido de este archivo y pegarlo tal y como se indica en el paso 1º es decir, justo después de ]]></b:skin> y nos olvidamos de añadir el archivo externo.
Imagen única
Click en imagen
<a rel="shadowbox" title="Título" href="Url-imagen-grande"><img src="Url-miniatura"/></a>
Si no queremos retocar la imagen para obtener la miniatura también podemos establecer la medida para mostrarla y utilizar la misma url. Esta última opción no es muy recomendable cuando se suben muchas imágenes al blog ya que al hacerlo de esa forma estamos cargando dos veces la misma imagen y a la larga notaremos que la carga es más lenta.
Con width establecemos anchura y con height altura
<a rel="shadowbox" title="Título" href="Url-imagen-grande"><img src="Url-miniatura" height="137" width="170" /></a>
Si retocamos las imágenes bastará con <img src="Url-imagen"/>
A lo largo de esta entrada encontraremos varias veces que el código para mostrar nuestra ventana modal dice "Texto o imagen" quiere eso decir que podemos mostrar la ventana en enlaces de texto o imágenes.
Si queremos mostrar texto no hay mucha explicación escribimos el texto que hará de enlace y listo. Para mostrar una imagen añadiremos: <img src="Url-imagen"/>
No hay comentarios:
Publicar un comentario