Antes que nada, FELIZ AÑO NUEVO para todos. Sobre todo, para los super genios que día con día resuelven las dudas de todos nosotros sus aprendices y discípulos. Muchas felicidades
Y para seguir con lo de mi problema con Java... sucede que ayer encontré un Slide Show con fotografías en miniatura que luego se hacen grandes con éste scrip pero, no me funciona para nada y no sé por que?
(LASTIMOSAMENTE NO LES PUEDO PONER AQUI EL ENLACE DE DONDE SAQUE ESTE SCRIP)
Y luego, yo seguí los siguientes pasos...
PRIMERO: subí los archivos *.js
(compressed.js y scrip.js) éste último nunca supe donde o como colocarlo.
SEGUNDO: coloqué entre <head> y </head> lo siguiente:
<style>
body {margin:0; background:#fff; padding:5px; font:11px Verdana,Arial}
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(left.gif) left center no-repeat}
#imgnext {right:0; background:url(right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
</style>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgn ext","imglink");
}
</script>
TERCERO.... entre los BODYs coloqué lo siguiente:
<script type="text/javascript" src="compressed.js"></script>
<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>blue-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="blue-fish-thumb.jpg" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>sea-turtle.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="sea-turtle-thumb.jpg" alt="Image Two" />
</li>
<li>
<h3>Image Three</h3>
<span>orange-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="orange-fish-thumb.jpg" alt="Image One" /></a>
</li>
<li>
<h3>Image Four</h3>
<span>squid.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="squid-thumb.jpg" alt="Image Two" />
</li>
<li>
<h3>Image Five</h3>
<span>coral-reef.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="coral-reef-thumb.jpg" alt="Image One" /></a>
</li>
</ul>
Todo lo anterior, a manera de prueba nada mas... pero NADA de NADA. Solo me aparecen las fotos en miniatura con sus respectivas descripciones pero, sin estar en el formato de SLIDE SHOW.... QUE ESTOY HACIENDO MAL???
Gracias por su tiempo y que Dios los bendiga durante tooooooooodo el 2009!!!!!
