Slideshow con enlaces. Ayuda para un neófito.

[CAAB]

Hola a tos@s Soy bastante neófito en temas de diseño web, sobre todo en la parte de programación.
Quiero hacer un slideshow para la web que tengo, donde se verían diferentes imágenes de diferentes temas que se están tratando a modo de slideshow. Eso es aparentemente fácil, pues hay montones de programas y servidores on line que lo hacen, generándo un sencillo enlace a dicho slideshow. El problema es que yo necesito que cada imágen tenga un enlace que lleve a un sitio (En plan "Seguir leyendo, pulse aquí")

¿Sabeis de algún programilla o servicio que lo haga y que no haya que enredar con el código? Hombre, no me importa escribir en el código las direcciones a donde apuntan los link y donde están archivadas las imágenes del slideshow, etc, pero de ahi no me saques, jejeje, que ando muy limitado en html, por no decir, nulo).

Si no existen, he encontrado un generador de código, que parece fácil de usar,

http://www.barelyfitz.com/projects/slideshow/wizard/

, pero no sé donde meter el código que me genera, pues lo introduzco dentro de la capa donde quiero que se vea el slideshow pero lo único que consiguo es que me salga el texto. Y no hace efectos de transición entre imágenes a pesar de que da la opción, aunque eso es lo de menos. (Es que en mi web no lo veo, como os he comentado, pues me sale en "modo texto", pero en la preview que me da si.)

Aquí parece haber un tuto, lo he leido, pero no termino de entender donde tengo que meter "lo que me genera"

http://www.barelyfitz.com/projects/slideshow/

¿He de crear un archivo aparte con extensión .js? Dentro qué pongo?

En fín, que no me entero. Manejo algo el Dreamweaver, pero sobre todo en modo diseño, tocando el código para cuatro cosas. Si hubiera una opción fácil, como éste servidor, http://www.slide.com/arrange?pxcid=ZBba1WyubVlM_nZ4WwujDYch3vbvk5P-2DAt1hG1bfvwUrGeU4SFS94R4YEuxCGt

que te los genera automáticamente, pero que me permita linkar las imágenes o otros sitios sería genial. Si no, aprender a usar el generador anterior que os he puesto sería ya un paso. Tened en cuenta que de programación se muy poco y necesito la info paso a paso.

Un saludo y gracias.

[JavierB]

Hola CAAB. Bienvenido al foro.

Echa un vistazo a la página de tunait, sección Varios, a ver si te sirve alguno de los códigos:

http://www.tunait.com/javascript/

Muevo tu tema al foro de Javascript desde Web general.

Saludos,

[CAAB]

Muchas gracias por la rápida atención. Me pongo a mirarlo.

[CAAB]

Ummm, en la sección "varios" no encuentro slideshows. No obstante estoy viendo cosas que me pueden ser útiles para otras ideas que tengo. Gracias.

Edito de nuevo: Perdón; creo que no he mirado del todo bién. Quizas la opción de Scroll con imágenes podría serme útil. Ahora he de irme, despues me pondré a ello , aunque mas que scroll me gustaría, si puede ser, que la trnasición entren imágenes fuera con fundidos.

Un saludo y gracias de nuevo.

[CAAB]

Hola de nuevo. Aquí sigo con mis problemas, a ver si me podeis ayudar. He encontrado el siguiente scrip prefabricado aquí:

[URL="http://smoothgallery.jondesign.net/getting-started/"]http://smoothgallery.jondesign.net/getting-started/[/URL]

(Bueno, ahi están las instrucciones, pero podeis ojear la página entera.) Se trata de una especie de galeria que según se configure se puede utilizar de slideshow con enlaces. Va con transiciones, con recuadritos para letras y unas cuantas pijaditas mas que me gustan bastante.

El caso es que llevo desde ayer intentando implementara (soy torpe en ésto) pero no lo logro. A lo mas que he logrado es que me aparezca una columna con las imágenes (en lugar de aparecer una a una y moverse)

¿Qué he de hacer exactamente con todo eso? Hay una sección donde se supone que descargas el script en un archivo .js y también te descarga archivos .css (hojas de estilos supongo) ¿Que he de hacer con ellos? Subirlos al direcctorio raiz de mi web? Lo he hecho pero nada. He de implementarlos de alguna manera. En las instrucciones no pone nada.

Luego, en la parte que os he enlazado, da instrucciones como para configurarlo, pero no sé donde va cada parte. ¿Cómo llamo a las hojas de estilos? El tío pone como un código que las llama, pero no se si lo hago bien, yo previamente las adjunto con el dreamweaver. (las hojas que previamente me he descargado)

En fín, que no sé por donde me da el aire, no estpy seguro si coloco bien cada parte del script en su sitio. Se que la primera parte va en el encabezamiento y otra parte dentro de la capa donde quiero que se vea el script. Pero no logro que funcione....
En fín, a ver si me podeis ayudar.


Mirad, aqui hay unas instrucciones en castellano. http://pixelco.us/blog/jondesigns-smoothgallery-20-galeria-de-imagenes-y-slideshow-con-excelentes-efectos/


Si hago exactamente lo que pone ahi (linkando mis imágenes y sus direcciones), obtengo dos imágenes, una encima de otra, y nada mas.



Así me queda el código. Es el script mondo y lirondo en una página en blanco, no en la web donde iria, pero para que os hagais una idea, imagino que vale, si no, decidme:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

* <script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
* <script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
<body>

* <div id="myGallery">
* <div class="imageElement">
* <h3>Enkadenados</h3>
* <p>Animales malviviendo</p>
* <a href="http://www.colectivoantitaurino.org" title="open image" class="open"></a>
* <img src="http://www.colectivoantitaurino.org/imagenes/Enkadenados.gif" class="full" />
* <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
* </div>
* <div class="imageElement">
* <h3>Festival Antitaurino y Animalista</h3>
* <p>Diviertete sin tortura</p>
* <a href="http://www.colectivoantitaurino.org" title="open image" class="open"></a>
* <img src="http://www.colectivoantitaurino.org/imagenes/FESTIVAL.gif" class="full" />
* <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
* </div>
* </div>

</body>
</html>





http://pixelco.us/blog/jondesigns-smoothgallery-20-galeria-de-imagenes-y-slideshow-con-excelentes-efectos/

[CAAB]

Yo de nuevo. He descubierto un par de errores por los cuales no me funcionaba, los he corregido, pero me sigue sin funcionar. El primero es que había situado mal las lineas de codigo que llaman al script, no estaban en el header. Lo segundo es que había cargado los .js y los .css en el servidor pero sin meterlos en carpetas,script y CSS respectivamente, de modo que el programa no los encontraba. (Los busca por esos nombres. He hecho todo eso, pero el resultado no varía. Veo las dos imágenes, pero nada más. ¿Qué hago mal?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueha</title>


* <script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
* <script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
</head>


<body>

* <div id="myGallery">
* <div class="imageElement">
* <h3>Enkadenados</h3>
* <p>Animales malviviendo</p>
* <a href="http://www.colectivoantitaurino.org" title="open image" class="open"></a>
* <img src="http://www.colectivoantitaurino.org/imagenes/Enkadenados.gif" class="full" />
* <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
* </div>
* <div class="imageElement">
* <h3>Festival Antitaurino y Animalista</h3>
* <p>Diviertete sin tortura</p>
* <a href="http://www.colectivoantitaurino.org" title="open image" class="open"></a>
* <img src="http://www.colectivoantitaurino.org/imagenes/FESTIVAL.gif" class="full" />
* <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
* </div>
* </div>

</body>
</html>