Bueno en el mundo javascript y sobre todo jQuery hay un sin limite de recursos y/o plugins para webs, como los tan cheveres Slideshow ya que aportan una manera bien atractiva de presentar imágenes en mayor resolución, como galerías o como mencione imágenes desde pequeñas. thumbnail, hasta las imágenes en grande, esto hace que las imágenes se puedan mostrar en menor tamaño y numero para que así el usuario visualice las imágenes en mayor detalle clickeando sobre la que desee.
Pero como dije esto se logra gracias a plugin jQuery o en su defecto javascript. Pues ahora parece que con CSS3 y HTML5 ya no necesitamos javascript, pues con puro HTML5 Y CSS3 podemos implementar un avanzado SlideShow, aquí te mostrare un articulo que leí en CodeProject(en ingles) con buenos resultados, el autor es Alexander Bell, quien junto el efecto darkbox y navegación slide, aplicando características de HTML5 y CSS3 como:
- color gradients
- rounded corners
- box shadow
- text shadow
- text rotate
Compatibilidad con Navegadores
Bueno esencialmente este slideshow es compatible con todos los navegadores modernos que soportan HTML5 como estándar, los que son capaces de ejecutar aplicaciones y demás, pero principalmente son estos:
- Mozilla FireFox 4 y superiores
- Google Chrome 10 y superiores
- Microsoft IE 9 y superiores (aunque existe algunos problemas con color gradients y text rotation)
- Apple Safari 5 y superiores
Manos a la obra:
1. CSS 3:
Bien para esto necesitaremos tener los siguientes estilos CSS:
/* pop-up div covers entire area */
.divDarkBox
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/* ! target pseudo-class is the key to solution ! */
.divDarkBox:target { display:block; }
/* virtual frame w/controls, image and caption */
.divDarkBox div
{
position:fixed;
top:10%;
left:25%;
width:50%;
height:60%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index:102;
}
/* image caption */
.divDarkBox div h1
{
font-size:0.9em;
color:#bababa;
font-weight:normal;
margin-top:20px;
z-index:103;
-moz-text-shadow: 10px 3px 4px 6px rgba(10,10,10,0.9);
-webkit-text-shadow: 3px 4px 6px rgba(10,10,10,0.9);
text-shadow: 3px 4px 6px rgba(10,10,10,0.9);
}
/* thumbnais container */
#divThumbnails
{
position:relative;
margin: 10px 0 0 0;
height:150px;
padding-top:30px;
background-color:#cacaca;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
background: -moz-linear-gradient(top, #f0f0f0, #bababa 10%, #cacaca 49%, #909090 50%, #cacaca 50%, #cacaca 90%, #ababab);
background: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), color-stop(0.1, #bababa ), color-stop(0.49, #cacaca), color-stop(0.50, #909090), color-stop(0.50, #cacaca), color-stop(0.90, #cacaca), to(#ababab));
}
/* thumbnails image */
#divThumbnails img
{
min-width:50px;
max-width:100px;
height:100px;
padding:10px;
border: solid 1px gray;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
z-index:1;
}
/* darkbox image */
.divDarkBox img
{
padding:20px;
z-index:105;
border: solid 1px gray;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: -moz-linear-gradient(top, #dadada, #505050 5%, #bababa 50%, #303030 50%, #101010);
background: -webkit-gradient(linear, center top, center bottom, from(#dadada), color-stop(0.05, #505050), color-stop(0.5, #bababa), color-stop(0.5, #303030), to(#101010));
min-height:300px;
min-width:300px;
max-height:60%;
max-width:80%;
}
img:hover, .divDarkBox ul a:hover
{
background:#505050;
background: -moz-linear-gradient(top, #eaeaea, #505050 50%, #303030 50%, #404040);
background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea),
color-stop(0.5, #505050), color-stop(0.5, #303030), to(#404040));
}
/* darkbox nav: highest z-index */
.divPopUpMainContent ul li {display:inline;}
.divPopUpMainContent ul a {
padding:3pt;
font-size:28pt;
font-weight:700;
color:Yellow;
text-decoration:none;
border: solid 1px Gray;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index:110;
}
/* optional text: 45Deg */
.divDarkBox .divDemo {
position absolute;
top:15%;
left:0%;
font-size:4em;
color:Olive;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}
.divPopUpMainContent { margin-top:120px; }
2. IMÁGENES THUMSNAIL
Ahora necesitamos las imágenes pequeñas que mostraremos en el listado que al darle click mostraran las imágenes originales.
<div id="divThumbnails">
<a href="#divDarkBox1"><img src="http://url/imagen01_small.JPG" alt="Descripcion 1" /></a>
<a href="#divDarkBox2"><img src="http://url/imagen02_small.JPG" alt="Descripcion 2" /></a>
<a href="#divDarkBox3"><img src="http://url/imagen03_small.JPG" alt="Descripcion 3" /></a>
<a href="#divDarkBox4"><img src="http://url/imagen04_small.JPG" alt="Descripcion 4" /></a>
<a href="#divDarkBox5"><img src="http://url/imagen05_small.JPG" alt="Descripcion 5" /></a>
</div>
Bien como se pudieron dar cuenta no es tan complicado realizar esta lista. Solo debemos tener las imagenes adeacuadas y simplemente listarlas con el anclaje a el ID del div contenedor de la imagen real.
3. MOSTRANDO EFECTO DARKBOX
Ahora lo qu enos falta es el contenedor de la imagen en alta resolución, que si bien es cierto no deberá ser necesariamente una imagen diferente, pero debera ser una que no sea tan grande, ya que hay dimensiones a seguir.
<div id="divDarkBox1" class="divDarkBox">
<!-- TEXTO OPCIONAL 45 DEG-->
<div class="divDemo">DEMO COOL!</div>
<!-- FIN TEXTO OPCIONAL --!>
<div class="divPopUpMainContent">
<ul>
<li><a href="#">⊗</a></li> <!-- SYMBOLO DE CERRAR-->
<li><a href="#divDarkBox5">◂</a></li> <!-- FLECHA ATRAS: MOVER ATRAS|ULTIMO-->
<li><a href="#divDarkBox2">▸</a></li> <!-- FLECHA SIGUIENTE: MOVER SIGUIENTE-->
<li><a href="#divDarkBox5">▸▮</a></li> <!--MOVER ULTIMO-->
</ul>
<!--IMAGEN TAMAÑO REAL: CON ENLACE OPCIONAL-->
<a href="http://URLDESTINO.COM" target="_blank"><img src="http://URL.COM/IMAGE-FULL-SIZE.JPG" alt="DESCRIPCION" /></a>
<h1>DESCRIPCION DE LA IMAGEN, PIE DE IMAGEN</h1>
</div>
</div>
La estructura de este contenedor tiene un texto que podríamos decir es decorativo, que estará presente en la parte izquierda del cuadro que tendrá un efecto girado hacia la izquierda, que podrá ser usado para llamar la atención, en la parte superior de la imagen estará la barra de navegación, con botones cerrar, siguiente y atrás, así como avanzar hacia el primero o hacia el final, esto no se hace automáticamente, se tiene que colocar manualmente, también notaran que son caracteres en ASCII, en UTF-8, que pueden ser reemplazados por imágenes si así lo desean.
Pueden colocar las imágenes que deseen, solo es necesario listaras y agregar su propio cuadro DARKBOX, ademas puede ser también que le agregar mas efectos como transiciones lo que lo hará ver mas atractivos. Aquí solo es cuestión de Imaginación y mas código CSS3.
Espero que sea de mucha utilidad para sus aplicaciones web. Les dejare el DEMO y la web para que puedan hacer uso completo de su código.
Sobre el Autor
Soy un joven entusiasta, autodidacta, Técnico en Informática, comparto mi conocimiento y deseo que los demás hagan lo mismo. Únete a mi y a la comunidad y hagamos que todos aprendan con nosotros.
