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

<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>

/* 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/AVvXsEjP3augOl4zp3S22v3z3IyQSx5R5tWvrkbWKm2VspRHC59Gz_eqfQqtWGw20meykcT0fYnpzG9bB0TyjO4ZHKH9GS_IRFXAAC9XJw_gzzy6zW0UzXA59TkVRXKMy_34ILqhsbdo5-noveY/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/AVvXsEjmp3TS03A6plOLkz0pmfWdrMObsYF-Cs4mwwDKxXrQBr3oCy62Z_hq6Lk0rvQWwr7q5Y2S-WjAJvGA6w03nmntMBj-R_MYEvcCTea5u1QkKP73JGNy-Vp5hhpFXFbMSP01ittxkjC23f8/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/AVvXsEh3jIsUF86OR484lCPp78Wkna05baQqIETOs39nklCAPbQw2MGC29LxLVAgoTxKOd1Ua2skLJDFTZeDInvVeQ63OGBJyeu_CChMlpqti0cF4tNm46D3ckoAAfT8Bd1BuSFofVYA_z5l2hc/s14/icon-arrow.png) top center no-repeat; }

<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>