Las instrucciones las he encontrado en la siguiente dirección:
http://www.spiceupyourblog.com/2012/03/simple-stylish-jquery-image-slideshow.html
De todas formas las reescribo aquí, ya que algún paso esta desactualizado.
------------------------
En primer lugar en el apartado Plantilla, editamos el HTML.
Buscamos el código:
]]></b:skin>Y copiamos este código justo encima:
/* Start Slider Code From http://www.spiceupyourblog.com/ */Después buscamos:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}
}
/* End Slider Code From http://www.spiceupyourblog.com/ */
</head>Y copiamos este código justo encima (los números en naranja se pueden cambiar, son el ancho y largo del slideshow):
<!-- Start Slider Code From http://www.spiceupyourblog.com/ -->Guardamos la plantilla.
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#my-slideshow').bjqs({
'width' : 940,
'height' : 340,
'showMarkers' : true,
'showControls' : true,
'centerMarkers' : false
});
});
</script>
<!-- End Slider Code From http://www.spiceupyourblog.com/ -->
Ahora nos vamos al apartado Diseño y añadimos un gadget (encontré una foto ilustrativa):
http://3.bp.blogspot.com/-OioL33vVir8/UOr8-w1QTbI/AAAAAAAADx4/bxEB0cIMcWs/s1600/A%C3%B1adir+nuevo+gadget.jpg
Añadir HTML/Javascript y dentro copiamos este código (en naranja tenéis el link de las fotos, las podéis cambiar para poner vuestras fotos, siempre que coincidan con el tamaño indicado en el código anterior):
<div id="my-slideshow">Espero que os guste este mini tutorial ;) .
<ul class="bjqs">
<li><img title="This is a caption." src="http://1.bp.blogspot.com/-6VtyHuKWXec/T00nRHDBfKI/AAAAAAAAFwQ/FwyFSdzpq5I/s1600/slider-image1.jpg"/></li>
<li><img title="This is a another caption." src="http://1.bp.blogspot.com/-PpkbSLY_9TQ/T00nR_BmGGI/AAAAAAAAFwY/B-WYpsKXJTM/s1600/slider-image2.jpg"/></li>
<li><img title="This is a another longer caption." src="http://2.bp.blogspot.com/-iywK-OLiBio/T00nPynnhOI/AAAAAAAAFwI/Sic5_siiUb0/s1600/slider-image-3.jpg"/></li>
<li><img title="This is a another much longer caption." src="http://1.bp.blogspot.com/-07WMvWuPh28/T00nUTHpPZI/AAAAAAAAFwg/zQp89S1-5fY/s1600/slider-image4.jpg"/></li>
<li><img title="This is a another longer caption that can be the lenght of the image or even longer onto the next line." src="http://2.bp.blogspot.com/-c5hZdFVFe1E/T00nVcWvScI/AAAAAAAAFwo/t7hX91c07Xc/s1600/slider-image5.jpg"/></li>
</ul>
</div>
