[TUTORIAL] Crear carrusel-slide de imágenes

Puff, muchas gracias ;) Aunque no te sirven de nada, hay tienes tus puntitis :D
HAHah, me entendiste mal, me referia a los puntos de reputacion ;)
Ah ok comprendo, je, je.
Entonces suerte con tu configuración de ese buen plugin. Ya tienes todos los parámetros. Saludos.
Hoila!!

he probado el "carruseldeimagenes" del tutorial, y en IE da un aviso de seguridad que impide la ejecución de scripts o controles activex, y esto, aparte de deformarme la página porque pone todas las imágenes en columna, da muy mala imagen... he probado en Mozilla y ahí no pasa. Si se acepta la ejecución de esos controles, va perfecto y queda estupendo. ¿sabéis si se puede hacer algo para queeso no pase (lo del aviso de seguridad)?

También, sabéis cómo se configura el tiempo que pasa entre una diapo y la siguiente?¿es alguna orden que se pueda configurar para cada imagen?

Y por último, ¿se podría conseguir que, pinchando en una de las imágenes que aparezca, te remita a una url?


Muchas gracias!!!
Hola,

respecto a la primera, ni idea. Creo que no se puede a menos que el usuario los permita :S

A la segunda, mira este post que puso johnpeterpj arriba:
En la sección de opciones, podrás ver algunas de las siguientes variables y parámetros:

Speed: Velocidad de transición de las imágenes. por ejemplo el valor 1000, indica un segundo entre cada pase de imagen.
slideREsize: Opción para redimensionar las imágenes.
randomizeEffects: Opción para generar los efectos de transición en forma aleatoria.
pauseOnPagerHover: Para detener o pausar el efecto de transición cuando el usuario coloque el mouse encima del gráfico.
Height y Width: Alto y ancho del contenedor de las imágenes.
fx: Nombre del efecto que se utilizará. Si no se especifica, se utilizará el efecto de tipo Fade. Nota: para utilizar todos los efectos disponibles, se puede pasar a este argumento, el valor ALL.

La línea 798 del código dice:

speed:1000,  // speed of the transition (any valid fx speed value)
Y si te sirve un par más arriba el tipo de transición.

Saludos.


A la tercera, cuando añades imágenes hazlos como un enlace normal:
<a href="URL A LA QUE IRÁ"><img src="URL DE LA IMAGEN" /></a>
Y si prefieras que la página se abra en otra pestaña:
<a href="URL A LA QUE IRÁ" target="_blank"><img src="URL DE LA IMAGEN" /></a>
Hola! Miles y miles de gracias, me has ayudado increiblemente!!!! Soy un novato en esto y estaba a punto de volverme loco! He seguido los pasos de como crear tu web hace unos meses, y habia llegado al tope con esto de los slides. Gracias! je
¡Hola!

Estoy intentando que me funcione el script pero me aparecen las imágenes una debajo de la otra. El div está dentro de una tabla, ¿puede ser por eso? Y no he cogido este JQuery.js porque ya tengo uno actualizado: jquery-1.5.2.js (es que si no se juntan una de JQuerys...). ¿Sabes por qué puede ser que me pase esto?

Gracias de antemano :)
Hola laraurkiola,

Has probado a poner el otro jQuery? Alomejor es por eso... pruébalo y nos cuentas!

@Rod: Me alegro de que te haya gustado :D
Hola Doodleo!!

El carrusel funciona perfectamente, pero intento ponerle el titulo "Fotos" arriba de la pagina pero no hay manera tio, añado un div, pero nada. Te dejo el codigo a ver si me hechas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Fotos</title>
<link rel="stylesheet" href="reset.css" media="all" />
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<!--[if IE]>
<link rel="STYLESHEET" type="text/css" href="estilos-ie.css" />
<!-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carruseldeimagenes').cycle({
fx: 'fade'
});
});
</script>
</head>
<body>
<div id="global">
<div id="menu-izquierdo"><h3>Zona Artistica</h3>
<ul>
<li><a href="noticias.html">Noticias</a></li><li><a href="biografia.html">Biografía</a></li><li><a href="discografia.html">Discografía</a></li><li><a href="fotos.html">Fotos</a></li><li><a href="videos.html">Videos</a></li><li><a href="actuaciones.html">Actuaciones</a></li><li><a href="contratacion.html">Contratación</a></li>
</ul>
</div>
<div class="carruseldeimagenes">
<img src="objetos/con_paco.png" alt="Con el Maestro" />
<img src="URL DE LA IMAGEN" alt="TEXTO" />
<img src="URL DE LA IMAGEN" alt="TEXTO" />
<img src="URL DE LA IMAGEN" alt="TEXTO" />
<img src="URL DE LA IMAGEN" alt="TEXTO" />
</div>
<div id="menú-derecho">
<ul id="lista-cursos"><h3>Clases Magistrales</h3>
<li><a href="concepto.html">¿Qué son?</a></li><li><a href="login.html">Identifícate</a></li><li><a href="registro.html">Registro</a></li><li><a href="principiantes.html">Principiantes</a></li><li><a href="avanzados.html">Avanzados</a></li><li><a href="preguntas.html">Ruegos y Dudas</a></li>
</ul>
</div>
<div id="pie">
<div id="pieuno"><a href="pantilla.html">Menú Principal</a></div>
<div id="piedos"><a href="email.html">Contacto-Email</a></div>
<div id="pietres"><a href="cuento.html">Cuento del Arte</a></div>
</div>
</div>
</body>
</html

el titulo quiero que quede como en esta pagina, pero no hay forma, te dejo un pantallazo para que veas como quiero el titulo:
[contenido no disponible]
....ah tambien me gustaria cambiar el tamaño de las imagenes, me he ido a las opciones de cycle.js pero nada. Gracias mostro!!!
Hola Ulises,

Para el problema del title, prueba a cambiar la línea que define el iso-8859-1 por esta a ver si es por eso:
[FONT=arial]<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />[/FONT]


Para lo de cambiar el tamaño de las imágenes, en el código de las imágenes tienes que hacer esto:
[COLOR=#333333]<img src="objetos/con_paco.png" alt="Con el Maestro" [/COLOR][B][COLOR=#ff0000]style[B]=[/B]"[/COLOR][COLOR=#00ff00]width: XXpx[/COLOR][COLOR=#ff0000]; [/COLOR][COLOR=#00ff00]height: XXpx;[/COLOR][COLOR=#ff0000]"[/COLOR][/B][COLOR=#333333] />[/COLOR]


Donde width es el ancho y height el alto.

Saludos
tengo problemas para que el carrusel se vea en la tablet y mobil. me podeis hechar una mano, plis?? muchas gracias! :)
soy nuevo acá, si me pueden ayudar funciona todo bien, pero IE se ven las imagenes juntas y se desconfigura la imagen alguien sabe como solucionar ese inconveniento o por defecto que detecte que el usuario esta navegando con IE y solo muestre una imagen??

muchas gracias.
Hola a todos.
He observado el jQuery he incluso he probado lo que aportáis. Me gusta y quisiera preguntar si es posible utilizar una paginación de las imágenes. Soy nueva con este framework.
También he conseguido poner en práctica el carrusel, lo único que el explorer siempre fastidiando y al cargar la página bloquea los scripts y pide autorización al usuario para ejecutarlos. En Firefox y Crome no pasa, ejecutándose correctamente. ¿Hay alguna manera de que explorer no saque esa advertencia?
Hola No puedo hacer funcionar el carrusel. Cuando lo veo en mozilla solo aparece una imagen cambiando una por otra en el mismo lugar:
este es el codigo
gracias

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Prueba</title>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="cycle.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('.carruseldeimagenes').cycle({

fx: 'fade'

});

});

</script>

</head>

<body>
<div class="carruseldeimagenes">
<img src="images/Estrip.png" alt="TEXTO" />
<img src="images/Inosha_tapa.png" alt="TEXTO" />
<img src="images/tapa_a_palo_de_gueso.png" alt="TEXTO" />
<img src="images/tapa_Barbara.png" alt="TEXTO" />
<img src="images/tapa_carneada.png" alt="TEXTO" />
<img src="images/tapa_dondelased.png" alt="TEXTO" />
<img src="images/tapa_fondos_alma.png" alt="TEXTO" />
</div>
</body>
</html>
Mi duda es que trabajo con DREAMWEAVER y el me da una vista del documento antes de ponerlo en el navegador y me pone las imágenes una detrás de otro y me tapa todo, y así no puedo trabajar y ademas si escribo algo en el pie de pagina no lo puedo ver y tampoco se ve en la pagina, me ayudáis ?
Zad22 tu problema lo tuve yo xD y es que la ruta de los dos archivos esta mal porque copiaste el código de la pagina, yo no tuve los archivos en el mismo documento que el index porque me gusta estar organizado, mira eso, puede ser ese el problema