carrousel de imagenes con enlaces

obmultimedia · #1 (**permalink**) 29/04/2008, 15:12

Hola, tengo una duda que me corroe por dentro:

Llevo bastante tiempo queriendo implementar en mi web un "menu" con imagenes rotatorias y que en ellas tengan enlazados una URL especifica.

Un claro ejemplo es el rotador de noticias/imagenes de http://es.engadget.com/ ( esta en el lado derecho del blog).

Alguien podria ayudarme a hacer algo identico o parecido???

Chucky_vlc84 · #2 (**permalink**) 29/04/2008, 16:09

En esta web en la seccion de varios alomejor puedes encontrar lo que buscas

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

Gracias a Javier B por mostrarmelo

obmultimedia · #3 (**permalink**) 29/04/2008, 22:54

ese " a lo mejor" es dar palos de ciego.

Gracias por tu ayuda, pero no hay nada que se asemeje a lo que busco.

Alguien podria ayudarme , es urgente!

a2a2 · #4 (**permalink**) 29/04/2008, 23:58

A mí me gusta éste que parecen las páginas de un libro pasando: Book Flip Slideshow

En ésta página tienes más para elegir: Image Slideshows

obmultimedia · #5 (**permalink**) 30/04/2008, 09:30

no es exactamente lo que busco.

Como bien cito en el 1º post, el script que usan en esa web, lleva consigo hipervinculo con texto encima de la imagen vinculada.

Queria algo que se asemeje lo maximo.

caricatos · #6 (**permalink**) 30/04/2008, 09:39

Hola:

Verás, si ese es el script que quieres, busca los creditos de esa página y cópialo en tu web (por supuesto, respetando esos créditos)... La primera referencia que te dieron es de un miembro muy activo de estos foros (¡Hola tunait

!), y que será fácil que te ayude a modificar el script para adaptarlo a tus necesidades... o plantéalo "desde cero", que entre otras cosas es la mejor forma de aprender.

Saludos

obmultimedia · #7 (**permalink**) 30/04/2008, 13:21

Cita:

Iniciado por caricatos

Hola:

Verás, si ese es el script que quieres, busca los creditos de esa página y cópialo en tu web (por supuesto, respetando esos créditos)... La primera referencia que te dieron es de un miembro muy activo de estos foros (¡Hola tunait

!), y que será fácil que te ayude a modificar el script para adaptarlo a tus necesidades... o plantéalo "desde cero", que entre otras cosas es la mejor forma de aprender.

Saludos

el copiar y pegar ese codigo de la web ya lo he intentado y estoy pidiendo ayuda dado que no da resultado ( por copiar un codigo no hace funcionar al completo dicho script si falta el archivo que lo hace funcionar)

el codigo en cuestion es este:

Código:

<div class="carousel">
<a class="previous" href="#" title="previous">Previous</a>
<ul>

    <li>
	<img vspace="4" hspace="4" border="1" src="iphonecarousel2.jpg" alt="" /><br />
    <h4><a href="http://es.engadget.com/2008/04/25/el-iphone-2-3g-gps-y-es-un-poquito-mas-grueso/">El iPhone 2: 3G, GPS y es un poquito m&aacute;s grueso</a></h4>
    </li>
    <li>
	<img vspace="4" hspace="4" border="1" src="apple-iigs-slide.jpg" alt="" /><br />
    <h4><a href="http://www.engadget.com/2008/04/14/ben-heck-outdoes-himself-again-with-the-iigs-laptop/">El port&aacute;til Apple IIGS de Ben Heck</a></h4>
    </li>
    <li><img vspace="4" hspace="4" border="0" src="xel-1-slide.jpg" alt="" /><br />

    <h4><a href="http://es.engadget.com/2008/03/18/la-television-oled-xel-1-de-sony-en-nuestras-manos/">La televisi&oacute;n OLED XEL-1 de Sony en nuestras manos</a></h4>
    </li>
    <li>
	<img vspace="4" hspace="4" border="1" src="htc_touch_slide.jpg" alt="" /><br />
    <h4><a href="http://es.engadget.com/2007/07/30/analizamos-el-htc-touch/">Analizamos el HTC Touch</a></h4>
    </li>
    <li>
	<img vspace="4" hspace="4" border="1" alt="" src="optimus-maximus-slide.jpg" /><br />
    <h4><a href="http://es.engadget.com/2008/02/25/impresiones-del-optimus-maximus/">Impresiones del Optimus Maximus</a></h4>

    </li>
    <li><img vspace="4" hspace="4" border="1" src="ps3port_slide.jpg" alt="" /><br />
    <h4><a href="http://es.engadget.com/2008/04/11/es-un-portatil-es-una-consola-es-el-portatil-ps3/">Es un port&aacute;til, es una consola... &iexcl;es el port&aacute;til PS3!</a></h4>
    </li>
    <li><img vspace="4" hspace="4" border="1" src="mylo2-slide.jpg" alt="" /><br />
    <h4><a href="http://es.engadget.com/2008/03/10/video-el-mylo-2-de-sony/">Video: El mylo 2 de Sony</a></h4>

    </li>
</ul><a class="next" href="#" title="next">Next</a>
</div>
<!-- /features carousel -->

ssclamp · #8 (**permalink**) 30/04/2008, 18:28

Hola obmultimedia

Analizando el código de la página que mencionas y limpiándolo, queda esto:

Código HTML:

<html>
<head>
<title>Título de la página</title>

<link href="style/style.css" type=text/css rel=stylesheet>

</head>
<body>
<br />
<div id=page align="center">
	<div id=subcontent>
		<div class=carousel>
			<a class=previous title=previous href="#">Previous</a> 
				<ul>
  				<li><img alt="" hspace=4 src="img/iphonecarousel2.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_1.html">Texto explicativo para la primera foto y, también, link</a></h4></li>
  				<li><img alt="" hspace=4 src="img/apple-iigs-slide.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_2.html"><br />Texto para la segunda foto</a></h4></li> <!-- si la línea de texto es corta y no dobla, meter un <br> antes del texto -->
  				<li><img alt="" hspace=4 src="img/xel-1-slide.jpg" vspace=4 border=0><br />
  				<h4><a href="http://www.tu_direccion_3.html">Texto explicativo para la tercera foto y, también, link</a></h4></li>
  				<li><img alt="" hspace=4 src="img/htc_touch_slide.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_4.html"><br />Texto corto y link</a></h4></li> <!-- si la línea de texto es corta y no dobla, meter un <br> antes del texto -->
  				<li><img alt="" hspace=4 src="img/optimus-maximus-slide.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_5.html"><br />Quinta foto y link</a></h4></li> <!-- si la línea de texto es corta y no dobla, meter un <br> antes del texto -->
  				<li><img alt="" hspace=4 src="img/ps3port_slide.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_6.html">Texto explicativo para la sexta foto y, también, link</a></h4></li>
  				<li><img alt="" hspace=4 src="img/mylo2-slide.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_7.html"><br />Texto y link: foto 7</a></h4></li> <!-- si la línea de texto es corta y no dobla, meter un <br> antes del texto -->
  				</ul>
  				<a class=next title=next href="#">Next</a> 
  		</div>
	</div>
</div>

<script src="js/jquery-1.2.3-min-plugins.js" type=text/javascript></script>

<script type=text/javascript>
$(document).ready(init);
function init()
{
	$('.winblogrollcat').children('ul').hide();
	$('.winblogrollcat .trigger').click(function(evt){
		$(this.parentNode).children('ul').slideToggle('fast');
	});
    $('.carousel ul').cycle({'prev':'.previous','next':'.next'});
}
</script>

</body>
</html>

Como verás, funciona con dos javascripts, una hoja de estilo y dos imágenes (para las flechitas), además de las fotos del carrousel -en este caso son siete-.

El carrousel rota las imágenes de forma automática y también manual, y el texto que lleva abajo es linkeable y abre la página que quieras.

Funciona en IE, Firefox y Opera (en otros browsers no lo he probado).

Lo tengo limpio y empaquetado, si lo quieres avisa.

Saludos

obmultimedia · #9 (**permalink**) 01/05/2008, 03:15

Cita:

Iniciado por ssclamp

Como verás, funciona con dos javascripts, una hoja de estilo y dos imágenes (para las flechitas), además de las fotos del carrousel -en este caso son siete-.

El carrousel rota las imágenes de forma automática y también manual, y el texto que lleva abajo es linkeable y abre la página que quieras.

Funciona en IE, Firefox y Opera (en otros browsers no lo he probado).

Lo tengo limpio y empaquetado, si lo quieres avisa.

Saludos

Pues claro que lo quiero

Si quieres subelo en un zip a algun server de descarga gratuita y me pasas el enlace por privado ( explicandome un poco como insertarlo en la web, x que en algunas cosas soy algo torpe ^_^)

Gracias!

ssclamp · #10 (**permalink**) 01/05/2008, 10:47

Enviado el enlace

Saludos

obmultimedia · #11 (**permalink**) 02/05/2008, 04:28

ssclamp, muchas gracias por tu ayuda,

ahora tengo otra duda, el caso es el siguiente:

el CSS que tiene el script no se como "integrarlo" al CSS matriz de mi web, dado que ya tengo una hoja de estilo definida para mi pagina web.

Que tendria que hacer?? insertar el codigo del CSS del script en el CSS de mi web??

ssclamp · #12 (**permalink**) 02/05/2008, 09:46

Hola obmultimedia

Las css (hojas de estilo en cascada) se pueden importar al html (o a la plantilla que uses) directamente, independientemente de cuantas sean (una o más), simplemente pega en el head lo siguiente:

<link href="style/style.css" type=text/css rel=stylesheet>

Respetando la hoja que ya tienes.

Así debería funcionarte.

También puedes pegar el contenido de la hoja de estilo del carrousel dentro de la hoja de estilo que ya tienes. En este caso no debes usar la línea de código de arriba, puesto que ya está integrado en la tuya.

Prueba una y otra opción y elige la que mejor te venga.

Saludos

dubarin · #13 (**permalink**) 30/05/2008, 01:43

quiciera saber si tambien se me pudiese enviar el link del archivo.
Tambien ando en las mismas que obmultimedia
Gracias

ssclamp · #14 (**permalink**) 02/06/2008, 16:55

Enviado.

Saludos

dubarin · #15 (**permalink**) 05/06/2008, 19:40

Gracias me encuentro descargando .. muchas gracias =)

dubarin · #16 (**permalink**) 05/06/2008, 20:48

perfecto !! justo loq ue buscaba ssclap gracias

erremex · #17 (**permalink**) 10/06/2008, 14:49

Hola, ssclamp.

¿Podrías enviarme el enlace por favor?

Traté de desenmarañar el código pero no encuentro por que no funciona. Debe ser la hoja de estilos.

Muchas gracias.

laroca · #18 (**permalink**) 15/07/2008, 15:08

Hola ssclamp!
Yo necesitaría urgentemente b. el codigo limpio y empaquetado!

Gracias!

QUOTE=ssclamp;2386163]Hola obmultimedia

Analizando el código de la página que mencionas y limpiándolo, queda esto:

Código HTML:

<html>
<head>
<title>Título de la página</title>

<link href="style/style.css" type=text/css rel=stylesheet>

</head>
<body>
<br />
<div id=page align="center">
	<div id=subcontent>
		<div class=carousel>
			<a class=previous title=previous href="#">Previous</a> 
				<ul>
  				<li><img alt="" hspace=4 src="img/iphonecarousel2.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_1.html">Texto explicativo para la primera foto y, también, link</a></h4></li>
  				<li><img alt="" hspace=4 src="img/apple-iigs-slide.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_2.html"><br />Texto para la segunda foto</a></h4></li> <!-- si la línea de texto es corta y no dobla, meter un <br> antes del texto -->
  				<li><img alt="" hspace=4 src="img/xel-1-slide.jpg" vspace=4 border=0><br />
  				<h4><a href="http://www.tu_direccion_3.html">Texto explicativo para la tercera foto y, también, link</a></h4></li>
  				<li><img alt="" hspace=4 src="img/htc_touch_slide.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_4.html"><br />Texto corto y link</a></h4></li> <!-- si la línea de texto es corta y no dobla, meter un <br> antes del texto -->
  				<li><img alt="" hspace=4 src="img/optimus-maximus-slide.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_5.html"><br />Quinta foto y link</a></h4></li> <!-- si la línea de texto es corta y no dobla, meter un <br> antes del texto -->
  				<li><img alt="" hspace=4 src="img/ps3port_slide.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_6.html">Texto explicativo para la sexta foto y, también, link</a></h4></li>
  				<li><img alt="" hspace=4 src="img/mylo2-slide.jpg" vspace=4 border=1><br />
  				<h4><a href="http://www.tu_direccion_7.html"><br />Texto y link: foto 7</a></h4></li> <!-- si la línea de texto es corta y no dobla, meter un <br> antes del texto -->
  				</ul>
  				<a class=next title=next href="#">Next</a> 
  		</div>
	</div>
</div>

<script src="js/jquery-1.2.3-min-plugins.js" type=text/javascript></script>

<script type=text/javascript>
$(document).ready(init);
function init()
{
	$('.winblogrollcat').children('ul').hide();
	$('.winblogrollcat .trigger').click(function(evt){
		$(this.parentNode).children('ul').slideToggle('fast');
	});
    $('.carousel ul').cycle({'prev':'.previous','next':'.next'});
}
</script>

</body>
</html>

Como verás, funciona con dos javascripts, una hoja de estilo y dos imágenes (para las flechitas), además de las fotos del carrousel -en este caso son siete-.

El carrousel rota las imágenes de forma automática y también manual, y el texto que lleva abajo es linkeable y abre la página que quieras.

Funciona en IE, Firefox y Opera (en otros browsers no lo he probado).

Lo tengo limpio y empaquetado, si lo quieres avisa.

Saludos[/QUOTE]

laroca · #19 (**permalink**) 17/07/2008, 13:54

Muchas gracias Frank,
lo he recibido correctamente y es justo lo que buscaba!

Saludos,
Laura.

ken_adams · #20 (**permalink**) 23/07/2008, 02:45

Hola, Llevo tiempo buscando como hacer lo de engadget.
Estaba interesado en tener el material para poder incluir el carrusel del imagenes en una web.

Gracias.

danguro · #21 (**permalink**) 23/07/2008, 12:57

Hola ssclamp, me podrias enviar la direccion de donde se puede bajar el archivo para estudiarlo.

gracias!

ssclamp · #22 (**permalink**) 06/08/2008, 14:10

Enviado a Josebra, respondiendo a su petición.

Saludos

ken_adams · #23 (**permalink**) 07/08/2008, 01:23

Hola ssclamp, me lo podrias enviar a mi tambien. Gracias.

caricatos · #24 (**permalink**) 07/08/2008, 02:10

Hola:

Estos foros están para compartir, y no para pasarse datos de forma privada, así que si alguien tiene un código debe compartirlo publicándolo.

Paso a cerra el tema.

Saludos