Slide con sombra

Lo prometido es deuda así que aquí va la forma de crear el slide con sombra que mostraba en la entrada anterior sobre diseños Bokeh.

Antes de comenzar debo aclarar que es conveniente alojar las imágenes en nuestro propio servidor y sustituir la url por la nuestra para evitar que en un futuro nuestro slide no muestre las imágenes por fallos de servidor.

Los scripts no tendremos problema ya que los añadiremos en la misma plantilla.

Nos situamos en plantilla edición de HTML y justo después de ]]></b:skin> añadimos los estilos que es el lugar donde más tarde podemos sustituir la url de las imágenes.

<style>
#preview_wrap {
   margin-left-20px;
   padding: 22px;
   width: 520px; 
   height: 400px;
   background: url(http://img50.xooimage.com/files/7/3/c/bg_preview-254fc87.gif) top left no-repeat;
  }

  #preview_outer {
   overflow: hidden;
   width: 520px;
   height: 400px;
   position: relative;
  }

  #preview_inner {
   text-align: left;
   height: 100%;
   position: relative;
  }
  
  #preview_inner div {
   float: left;
   width: 550px;
   height: 400px;
   position: relative;
  }
  
  #preview_inner div a {
   position: absolute;
   bottom: 0;
   left: 0; 
   display: block;
   width: 470px;
   text-indent: 20px;
   padding: 20px 0;
   color: #fff;
   text-shadow: 5px 5px 5px #000000;
   background: url(http://img49.xooimage.com/files/9/4/1/bg_trans-1ac2f94.png);
   text-decoration: none;
   font-size: 18px;
  }

  #thumbs {
   padding-top: 30px;
   position: relative;
   width: 520px;
   text-align: center; 
  }

  #thumbs span {
   padding: 12px;
   width: 80px;
   height: 80px;
   cursor: pointer;
   background: url(http://img27.xooimage.com/files/8/1/7/bg_thumb-1ac2fa9.gif) top left no-repeat;
   display: inline-block;
  }

  #arrow {
   position: absolute;
   top: -13px;
   background: url(http://img29.xooimage.com/files/7/1/e/bg_arrow-1ac2fc5.gif) top center no-repeat;
   width: 104px;
   height: 39px;
   display: none;
  }  
</style>

Justo después añadimos jQuery, si lo hubiéramos añadido con anterioridad omitimos ese paso.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

A continuación añadimos el contenido de este archivo.

Y por último añadimos el HTML en un gadget de HTML/Javascript

<div id="preview_wrap">
<div id="preview_outer">
<div id="preview_inner">
<div><img src="imagen01.jpg" alt="" />
<a href="#">Texto 1</a></div>

<div><img src="imagen02.jpg" alt="" />
<a href="#">Texto 2</a></div>

<div><img src="imagen03.jpg" alt="" />
<a href="#">Texto 3</a></div>

<div><img src="imagen4.jp" alt="" />
<a href="#">Texto 4</a></div>

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

<div id="thumbs"><div id="arrow"></div>

<span><img src="miniatura01.jpg" alt="" /></span>
<span><img src="miniatura02.jpg" alt="" /></span>
<span><img src="miniatura03.jpg" alt="" /></span>
<span><img src="miniatura04.jpg" alt="" /></span>
</div>

Las imágenes grandes (imagen01,02,03,04) miden 475x430 y las miniaturas (miniatura01, 02, 03, 04) 80x80.

El tamaño del slide no se puede modificar a no ser que se crearan unas nuevas imágenes con sombra, eso nos llevaría también a crear las imágenes en miniatura y para la demo en el tamaño acorde con las imágenes del slide.