Si hay una razón por la cual jQuery se está volviendo tan masivo, es porque cumple con su eslogan ("Escribe menos, realiza más") de pie a cabeza.
Y cumpliendo con dichas palabras, vamos a crear una simple galería de imágenes:
Para eso vamos a utilizar un par de plugins:
- jQuery Cycle Plugin: Para realizar la galería, navegación, control y transiciones
- Fancybox: Para poder cargar la imagen original con un efecto de zoom...
Antes de empezar, puedes descargar los archivos de ejemplo
HTMLCargamos en el head del HTML la última versión de jQuery y los plugins:
HTML
-
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
-
<script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script>
-
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
-
-
<!--[if IE 6 ]>
-
<script type="text/javascript" src="js/jquery.pngFix.pack.js"></script>
-
<![endif]-->
-
-
<link href="css/fancybox.css" media="screen" rel="stylesheet" type="text/css"/>
De manera alternativa, si deseamos que los PNGs transparentes que
utiliza Fancybox se visualicen correctamente en Internet Explorer 6
podemos incluir el plugin pngFix (ya viene en el paquete de descarga de Fancybox)
En el body, tendremos dos DIVs principales:
- Uno con el ID "galeria" que contendrá los controles de Siguiente/Anterior y la imagen principal seleccionada
- Y otro con el ID "navegación" que contendrá las imágenes en miniatura de la galería para seleccionar cual queremos ver
HTML
-
-
-
-
<--!Aquí van los controles de Siguiente y Anterior-->
-
</div>
-
-
-
<--!Aquí van las imágenes que se visualizan,con sus textos y links a imágenes originales-->
-
</div>
-
-
</div>
-
-
-
<--!Aquí van las imágenes en miniatura para la navegación-->
-
</div>
HTML Galería
La creación de los controles es sencillo, un DIV con dos enlaces:
HTML
-
-
<a href="" id="ant">Anterior </a>
-
<a href="" id="sig">Siguiente </a>
-
</div>
Mientras que el HTML que muestra las imágenes principales será:
HTML
-
-
-
-
<a href="images/1_o.jpg" title="Beach Sunset"><img src="images/1.jpg" width="500" height="333"/></a>
-
<span class="texto"><p>Beach Sunset, por <a href="http://flickr.com/photos/chris_gin/">Chris Gin (away) </a></p></span>
-
</div>
-
-
-
<a href="images/2_o.jpg" title="Before the Total Eclipse"><img src="images/2.jpg" width="500" height="333"/></a>
-
<span class="texto"><p>Before the Total Eclipse, por <a href="http://flickr.com/photos/shutterhack/">Shutterhack </a></p></span>
-
</div>
-
-
-
<a href="images/3_o.jpg" title="Grace Bay Beach Pier"><img src="images/3.jpg" width="500" height="333"/></a>
-
<span class="texto"><p>Grace Bay Beach Pier, por <a href="http://flickr.com/photos/wisdoc/">WisDoc </a></p></span>
-
</div>
-
-
-
<a href="images/4_o.jpg" title="Hanakapiai Beach, Na Pali Coast, Kauai, Hawaii"><img src="images/4.jpg" width="500" height="333"/></a>
-
<span class="texto"><p>Hanakapiai Beach, Na Pali Coast, Kauai, Hawaii, por <a href="http://flickr.com/photos/kubina/">Jeff Kubina </a></p></span>
-
</div>
-
-
-
<a href="images/5_o.jpg" title="Marshall's Beach Sunset, San Francisco"><img src="images/5.jpg" width="500" height="333"/></a>
-
<span class="texto"><p>Marshall's Beach Sunset, San Francisco, por <a href="http://flickr.com/photos/mumbleyjoe/">MumbleyJoe </a></p></span>
-
</div>
-
-
-
<a href="images/6_o.jpg" title="North island beach"><img src="images/6.jpg" width="500" height="333"/></a>
-
<span class="texto"><p>North island beach, por <a href="http://flickr.com/photos/ktb/">killthebird </a></p></span>
-
</div>
-
-
</div>
Cada imagen está contenida en un DIV con la clase "sombra". Dentro
de él cargamos la imagen a visualizar y un texto como acompañamiento de
la imagen (dentro de las etiquetas SPAN). Además cada imagen linkea
hacia su correspondiente imagen original (en mayor tamaño) para ser
visualizado con Fancybox.
HTML Navegación
La navegación es una lista donde cada elemento es una imagen en miniatura:
HTML
-
-
-
-
<li><a href="#"><img src="images/1_s.jpg" width="75" height="75" title="Beach Sunset"/></a></li>
-
<li><a href="#"><img src="images/2_s.jpg" width="75" height="75" title="Before the Total Eclipse"/></a></li>
-
<li><a href="#"><img src="images/3_s.jpg" width="75" height="75" title="Grace Bay Beach Pier"/></a></li>
-
<li><a href="#"><img src="images/4_s.jpg" width="75" height="75" title="Hanakapiai Beach, Na Pali Coast, Kauai, Hawaii"/></a></li>
-
<li><a href="#"><img src="images/5_s.jpg" width="75" height="75" title="Marshall's Beach Sunset, San Francisco"/></a></li>
-
<li><a href="#"><img src="images/6_s.jpg" width="75" height="75" title="North island beach"/></a></li>
-
</ul>
-
-
</div>
Javascript
Es tan sencillo como escribir 15 lineas de código! Quien no halla
trabajado con jQuery debe saber que todo el código se inicializa con el
evento ready:
Javascript
-
$(document).ready(function(){
-
// Todo el código va aquí
-
});
Una vez listo, lo primero que hacemos es inicializar Fancibox en donde queremos que trabaje y añadirle unos parámetros:
Javascript
-
//Inicializamos fancybox
-
$(".sombra a").fancybox({
-
'overlayShow': true, //Lo activamos para que queden bloqueados los elementos de la galería
-
'overlayOpacity':0 //Cero opacidad del fondo
-
});
Luego creamos un efecto para mostrar y ocultar los controles de
Siguiente y Anterior al pasar el puntero sobre la imagen principal de la
galería:
Javascript
-
//Añadimos un efecto a los controles
-
$('#galeria').hover(
-
function() {
-
$('#controles').slideToggle("fast");
-
},
-
function() {
-
$('#controles').slideToggle("fast");
-
});
Por último seteamos los parámetros de la galería:
Javascript
-
//Seteamos los efectos de la galería
-
$('#imagenes').cycle({
-
fx: 'turnDown', //Efecto de la galería
-
speed: 1500, //Velocidad del efecto
-
timeout: 0, //Tiempo entre transiciones
-
pager: '#navegacion', //Identificador de la navegación
-
pagerAnchorBuilder: function(idx, slide) {
-
return '#navegacion li:eq(' + idx + ') a'; //Asignamos la navegacion a los elementos dentro de #navegacion
-
},
-
prev:'#ant', //Identificador para Anterior
-
next:'#sig' //Identificador para Siguiente
-
});
jQuery Cycle Plugin es un plugin muy versatil, y posee muchos más parámetros y efectos para personalizar la galería, recomiendo pasar por la documentación para ver todas sus características.
CSS
Finalmente aplicamos un poco de CSS a lo que hemos creado:
CSS
-
*{
-
padding:0px;
-
margin:0px;
-
border:0px;
-
}
-
-
body{
-
background:#FFF;
-
font-size:12px;
-
font-family: Arial,Helvetica,sans-serif;
-
}
-
-
/*Controles de Siguiente y Anterior*/
-
#controles {
-
z-index: 30;
-
position: absolute;
-
bottom: 0;
-
left: 0;
-
display: none;
-
background-color: #ffc;
-
border: 1px solid #ddd;
-
margin-bottom: 138px;
-
margin-left:15px;
-
padding: 6px;
-
width: 120px;
-
}
-
-
#controles a{
-
color:#0066CC;
-
padding-right:7px;
-
}
-
-
/*Navegación de la galería*/
-
#navegacion{
-
background-color: #FFFFCC;
-
width: 530px;
-
height: 85px;
-
}
-
-
#navegacion ul {
-
padding: 5px 0px;
-
list-style: none;
-
float: left;
-
}
-
-
#navegacion li {
-
display: inline;
-
}
-
-
#navegacion ul li a{
-
color: #FFF;
-
float: left;
-
text-decoration: none;
-
display:block;
-
width:75px;
-
height:75px;
-
margin-right:5px;
-
margin-left:6px;
-
}
-
-
/*Esta clase se añade en el thumbnail seleccionado*/
-
#navegacion .activeSlide{
-
border: 2px solid #0066CC;
-
}
-
-
/*Tamaño de la galería*/
-
#galeria {
-
height: 390px;
-
width: 540px;
-
}
-
-
/*Texto que acompaña la imagen principal*/
-
.texto {
-
display:block;
-
width:100%;
-
margin:0;
-
padding:10px 0;
-
}
-
-
.texto a{
-
color:#0066CC;
-
}
-
-
/*Efecto de sombra sobre la imagen principal*/
-
.sombra {
-
width: 520px;
-
padding: 5px 0px 5px 15px;
-
background:transparent url(../images/shadow.gif) no-repeat scroll right bottom!important;
-
position:relative;
-
}
Descargar los archivos de ejemplo | Ver demostración
Extra: Añadir reproducción automática y controles de Play y Pausa
Es tan sencillo como:
- Añadir a los controles los enlaces de Play y Pausa
HTML
-
-
<a href="" id="ant">Anterior </a>
-
<a href="" id="sig">Siguiente </a>
-
<a href="" id="pausa">Pausa </a>
-
<a href="" id="play">Play </a>
-
</div>
- Modificar el parámetro timeout de la galería y ponerle un valor entre transiciones en milisegundos (por ejemplo 3000)
Javascript
-
//Seteamos los efectos de la galería
-
$('#imagenes').cycle({
-
fx: 'turnDown', //Efecto de la galería
-
speed: 800,//Velocidad de la transición
-
timeout: 3000, //Tiempo entre transiciones
-
delay: 1000, //Tiempo de espera en comenzar la reproducción inicial
-
pager: '#navegacion', //Identificador de la navegación
-
pagerAnchorBuilder: function(idx, slide) {
-
return '#navegacion li:eq(' + idx + ') a'; //Asignamos la navegacion a los elementos dentro de #navegacion
-
},
-
prev:'#ant', //Identificador para Anterior
-
next:'#sig' //Identificador para Siguiente
-
});
- Vincular las funciones de Play y Pausa a los controles
Javascript
-
//Seteamos las funciones de los controles para pausa y play
-
$('#pausa').click(function() {
-
$('#imagenes').cycle('pause');
-
return false;
-
});
-
-
$('#play').click(function() {
-
$('#imagenes').cycle('resume');
-
return false;
-
});
- Al hacer click en una imagen para verla con Fancybox, tendremos que parar la reproducción de la galería:
Javascript
-
$('.sombra a').click(function() {
-
$('#controles #pausa').trigger('click');
-
return false;
-
});
Y si al cerrar la imagen queremos que siga reproduciendo agregamos:
Javascript
-
$('#fancy_close').click(function() {
-
$('#controles #play').trigger('click');
-
return false;
-
});
- Finalmente modificamos el ancho de los controles en el CSS:
CSS
-
#controles {
-
z-index: 30;
-
position: absolute;
-
bottom: 0;
-
left: 0;
-
display: none;
-
background-color: #ffc;
-
border: 1px solid #ddd;
-
margin-bottom: 140px;
-
margin-left:10px;
-
padding: 6px;
-
width: 200px;
-
}
|
Esta desarrollado para 6 imágenes miniatura.
Deseo poner más de 6, tal vez hay la manera de poder mostrar las siguientes
En otras palabras se borren las anteriores y aparezcan las nuevas 6 al dar clic en un botón, por ejemplo “siguientes”