Coda Slider: Galería de imágenes con miniaturas

AVISO

Este slider ha dejado de funcionar por razones que aun desconozco, se recomienda usar algún otro slider dentro de la categoría de Slideshows.

Al igual que el TriSlider desconozco si este sea el verdadero nombre de este slider, yo lo he llamado así porque el autor (CSS Tricks) ha dicho que usa el plugin Coda Slider, así que ha sido más sencillo nombrarlo de esta forma.

Pero el nombre es lo de menos, lo que gusta de este slider, es que muestra las miniaturas de las imágenes para poder navegar desde ellas, y el efecto deslizante con el que avanzan.

Para poner este slider de imágenes necesitaremos uso de jQuery, así como tres scripts más pero no te preocupes que no son tan pesados como parece.

Bien, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='URL del archivo jquery-easing-1.3.pack.js'/>
<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>
<script src='URL del archivo coda-slider.1.1.1.pack.js'/>

<script type='text/javascript'>
//<![CDATA[
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;

theInterval = function(cur){
clearInterval(theInt);

if( typeof cur != 'undefined' )
curclicked = cur;

$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function() {
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;

}, 3000);
};

// DOM Ready
$(function() {
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});

theInterval();
});
//]]>
</script>

Ahí agrega donde se indica las URLs de los archivos que subiste previamente.
Ahora antes de ]]></b:skin> pega los estilos:

/* Coda Slider
----------------------------------------------- */
#page-wrap {
width: 500px; /* Ancho del contenedor general */
min-height: 420px; /* Alto del contenedor general */
margin: 0 auto;
position: relative;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbZQBJOjB5v1T7qtUuyTqy4c-syXaYiDDdV_xDjY5g35NeRpUDYoLIQjFyiMOW8kD6Ge6gxpxhU26QtJ8SdFaexlpnJmcZHva0T4W6a3aVyeoNJz-BaE3UsE9H5WbcEv2UH9MRNJ9PVso/s501/bg.png) top center no-repeat;
}
.slider-wrap {
width: 419px;
position: absolute;
top: 40px; left: 40px;
background:#DADADA;
}
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer {
position: relative;
overflow: hidden;
width: 419px; /* Ancho del contenedor de las imágenes */
height: 285px; /* Alto del contenedor general */
margin-bottom:7px;
}
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px;}
#movers-row { margin: -39px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0B57zxIFPXCqITyQvOg3KwiwCo-l2bHIeWR7u99Qzrp3tjx4JsxN57TpEDg7DebcWn3QmJBmKT6QCEJOSmZyaHXM7YUQthjNWgdp80GLhyphenhyphen43VLSNx0Lz1C2tWPq3Hjhi9XUeDoDdYw3U/s10/transpBlack.png);
padding: 10px;
height: 40px;
margin-top: -60px;
position: relative;
z-index: 100;
color: #FFF; /* Color del texto de las descripciones */
}
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -16px; position: relative; padding-top: 10px; z-index: 100; }
.active-thumb { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbTsvbzUx-D70I2idoIyh3W2-8hv4IEHbsHuN7x_w9vH91EqGKKS_YlfW__N3PRGYU1HNz7PPBMfnL9H8VUfM9Wrw1mmgToZuMlMpxG67hfSkmYNp92c7tZjEysaiN0pI9L3_TrRCeh5M/s14/icon-arrow.png) top center no-repeat; }

Después entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript, si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. Ahí pega la estructura del slider:

<div id='page-wrap'>
<div class='slider-wrap'>
<div class='csw' id='main-photo-slider'>
<div class='panelContainer'>

<div class='panel' title='Panel 1'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen UNO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 2'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen DOS' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 3'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen TRES' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 4'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen CUATRO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 5'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen CINCO' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


<div class='panel' title='Panel 6'>
<div class='wrapper'>
<a href='URL del enlace'><img height='285px' src='URL de la imagen SEIS' width='419px'/></a>
<div class='photo-meta-data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>

</div></div></div>


</div></div>
<!-- Estas son las MINIATURAS -->

<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src='URL de la imagen UNO' width='60px'/></a>

<div id='movers-row'>

<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src='URL de la imagen DOS' width='60px'/></a></div>

<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src='URL de la imagen TRES' width='60px'/></a></div>

<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src='URL de la imagen CUATRO' width='60px'/></a></div>

<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src='URL de la imagen CINCO' width='60px'/></a></div>

<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src='URL de la imagen SEIS' width='60px'/></a></div>

</div>
</div></div>

Por último coloca las URLs de las imágenes donde se indica, así como la URL de los enlaces.

Puedes modificar la velocidad con la que cambian las imágenes en la parte marcada en color naranja, ahí pon el número en milisegundos, aunque la primera imagen siempre tardará un poco más en cambiar.

Al slider le caben seis imágenes, y aunque se podría ampliar, la recomendación es dejarlo como está, a menos claro que quieras trabajar mucho.

Como ves es un gadget llamativo, útil para mostrar contenido destacado o para una galería de imágenes, y arriba de las entradas quedará muy bien.