Entrar

[TUTORIAL] Crear carrusel-slide de imágenes

Doodleo · · Solicitar retirada
Quizás te interese ver el siguiente post, con un slide muchísimo más sencillo y editable: http://www.comocreartuweb.com/consultas/showthread.php/57329

Primero de todo, tenemos que crear dos archivos, a uno lo llamaremos jquery.js y a otro cycle.js

Los tienes creados? Bien, pues ahora abre el archivo jquery.js para pegar este código (y una vez pegado, lo guardas y cierras el archivo jquery.js)
El archivo tienes que descargarlo y subirlo, si no no funciona, lo adjunto en el tema y lo puedes descargar!

Bien, ahora ciérralo y abre el archivo cycle.js para pegar el siguiente código:
El archivo tienes que descargarlo y subirlo, si no no funciona, lo adjunto en el tema y lo puedes descargar!

Ya pegaste el código y lo guardaste? Vale, ahora cierra el archivo, y abre el archivo html donde quieres poner el carrusel, lo tienes abierto ya? perfecto!

Pega entre <head> y </head> estos tres códigos:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cycle.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
    $('.[COLOR=lime]carruseldeimagenes[/COLOR]').cycle({
        fx: 'fade'
    });
});
</script>
Bien, los tienes? Ahora busca donde quieres poner el carrusel, donde lo quieras poner pega el siguiente código:
<div class="[COLOR=lime]carruseldeimagenes[/COLOR]">
<img src="[COLOR=red]URL DE LA IMAGEN[/COLOR]" alt="[COLOR=red]TEXTO[/COLOR]" /> 
<img src="[COLOR=red]URL DE LA IMAGEN[/COLOR]" alt="[COLOR=red]TEXTO[/COLOR]" />
<img src="[COLOR=red]URL DE LA IMAGEN[/COLOR]" alt="[COLOR=red]TEXTO[/COLOR]" />
<img src="[COLOR=red]URL DE LA IMAGEN[/COLOR]" alt="[COLOR=red]TEXTO[/COLOR]" />
<img src="[COLOR=red]URL DE LA IMAGEN[/COLOR]" alt="[COLOR=red]TEXTO[/COLOR]" />
</div>
Vale, ves las dos partes que están en verde? Eso puedes dejarlo, pero si por ejemplo quieres cambiar el nombre y llamarlo por ejemplo carrusel, deberías borrar lo que está en verde en los dos códigos y poner el mismo nombre en los dos códigos, oki? Mejor déjalo así, que no hay ningún problema jeje

Ahora, ves donde pone URL DE LA IMAGEN en rojo, eso lo tienes que cambiar y poner la URL de la imagen que quieres que aparezca, simple, no? Luego además pone alt="TEXTO", eso de TEXTO lo tienes que cambiar por algo relacionado con la imagen y tu página, preferiblemente que contenga las palabras que pusiste en el <meta name="keywords" ... porque así estarás mejor posicionado en los buscadores.

Si quieres agregar más imágenes, sólo agrega otro código de imagen (<img src="URL DE LA IMAGEN" alt="TEXTO" />)

Y si quieres quitar imágenes sólo borra el código de la imagen jeje

Aquí tenéis un ejemplo: http://doodleo.net84.net/carrusel.html

Y aquí tenéis los archivos jquery.js y cycle.js
Doodleo · · Solicitar retirada
Gracias Rabs jeje, aunque me pone lo que te ponía a ti de que se está revisando el sitio, esperemos que no tarden

PD: Felicidades Rabs, ya somos dos con dos cuadrados verdes :-D
nosabernada · · Solicitar retirada
Podeis poner cada imagen con un enlace diferente, y tambien todas con el mismo :)

Os echare una mano en una cosita. En el archivo cycle.js, buscar esta linea:

" while((opts.timeout - opts.speed) < 250) // sanitize timeout "

Yo la tengo en la linea 312

Cambiar el 250 por el 5000 por ejemplo, y os ira mas lento, o ponerle menos, en fin, para editar el tiempo.

Luego le pegare un vistazo, a ver si encuentro como poner tipos de transiciones :P


Buen aporte

Un saludo.
nosabernada · · Solicitar retirada
Y mira, otra cosa que os puede molar, poner esto en la hoja de estilos:

.carruseldeimagenes img {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

Veréis como mola :D
Doodleo · · Solicitar retirada
Claro, por supuesto que se puede modificar, por ejemplo con esos css que has puesto se redondearán los bordes las imágenes (no lo he probado, pero sólo con ver esas líneas reconozco qué hace jejejeje)

Gracias por estos aportes nosabernada jeje
Doodleo · · Solicitar retirada
Por lo que veo tienes el jquery.js y el cycle.js en carpetas distintas, tienes que poner los dos archivos (archivos, no carpetas) en la misma carpeta donde quieres el carrusel
ricarducho · · Solicitar retirada
gracias pero perdona mi desconocimiento, poner los dos archivo en una carpeta por ejemplo donde quiero el carrusel seria en "nuestros servicios" por favor me podrias explicar, no entiendo.

un saludo

Ricarducho
Doodleo · · Solicitar retirada
Por lo que vi estás poniendo el carrusel en plantilla.html, y plantilla.html está en la carpeta mi-ejemplo

Entonces lo que tienes que hacer es quitar el archivo jquery.js y el cycle.js (los archivos, no las carpetas como lo tienes ahora) y ponerlas en mi-ejemplo
Doodleo · · Solicitar retirada
Pega aquí TODO el código que tienes en plantilla.html

Pégalo, no una captura, oki?
ricarducho · · Solicitar retirada
vale ahia esta la plantilla y gracias
<!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>RESTAURANTE PERLA ECUATORIANA</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>

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

<script type="text/javascript">

$(document).ready(function() {

$('.carruseldeimagenes').cycle({

fx: 'fade'

});

});

</script>

</head>
<body>
<div id="global">
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo1.gif" width="798px" height="85px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
</div>
<div id="navegacion"><ul><li><a href="../quienes-somos/quienes-somos.html"><B>Quienes Somos</B></a></li><li><a href="../donde-estamos/donde-estamos.html"><B>Donde Estamos</B></a></li><li><a href="../nuestros-servicios/nuestros-servicios.html"><B>Nuestros Servicios></B></a></li><li><a href="../fotos-de salon/fotos-de salon.html"><B>Fotos de Salon</B></a></li></ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->
<div id="contenido">
<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
<h1>SOMOS ESPECIALISTAS EN COMIDA ECUATORIANA</h1>
<div class="carruseldeimagenes">
<img src="objetos/imagen1.jpg" height="321" width="480" alt="MENESTRA "/>
<img src="objetos/imagen2.jpg" height="321" width="480" alt="ENCEBOLLADO" />
<img src="objetos/imagen3.jpg" height="321" widht="480" alt="ENCOCADO" />
<img src="objetos/imagen4.jpg" height="321" widht="480" alt="GUATITA" />
<img src="objetos/imagen5.jpg" height="321" width="480" alt="CALDO DE BOLAS" />
</div>
<center><B>Disfruta de la mejor comida tipica ecuatoriana a precios ANTICRISIS, Fritada, Guatita , Caldo de Patas, Ceviches de Concha y Camarón, Bandera y muchos más.! TE ESPERAMOS !</B></center>
<h1>REALIZAMOS TODO TIPO DE RECEPCIONES, SOLICITA TU PRESUPUESTO</h1>
<h1>Llegamos más cerca de ti servicio a domicilio GRATUITO: Teléfonos 91 528 52 32 / 645 355 819</h1></div>
<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
<div id="pie"><h2>MENU DE LUNES A VIERNES A 6,90 EUROS</h2></div>
<!-- FIN CODIGO PIE DE PAGINA -->
<div id="curva-inferior"></div>
</div>
</body>
</html>
Doodleo · · Solicitar retirada
<!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>RESTAURANTE PERLA ECUATORIANA</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"> 
<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">
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo1.gif" width="798px" height="85px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
</div>
<div id="navegacion"><ul><li><a href="../quienes-somos/quienes-somos.html"><B>Quienes Somos</B></a></li><li><a href="../donde-estamos/donde-estamos.html"><B>Donde Estamos</B></a></li><li><a href="../nuestros-servicios/nuestros-servicios.html"><B>Nuestros Servicios></B></a></li><li><a href="../fotos-de salon/fotos-de salon.html"><B>Fotos de Salon</B></a></li></ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->
<div id="contenido">
<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
<h1>SOMOS ESPECIALISTAS EN COMIDA ECUATORIANA</h1>
<div class="carruseldeimagenes">
<img src="objetos/imagen1.jpg" height="321" width="480" alt="MENESTRA "/> 
<img src="objetos/imagen2.jpg" height="321" width="480" alt="ENCEBOLLADO" />
<img src="objetos/imagen3.jpg" height="321" widht="480" alt="ENCOCADO" />
<img src="objetos/imagen4.jpg" height="321" widht="480" alt="GUATITA" />
<img src="objetos/imagen5.jpg" height="321" width="480" alt="CALDO DE BOLAS" />
</div>
<center><B>Disfruta de la mejor comida tipica ecuatoriana a precios ANTICRISIS, Fritada, Guatita , Caldo de Patas, Ceviches de Concha y Camarón, Bandera y muchos más.! TE ESPERAMOS !</B></center>
<h1>REALIZAMOS TODO TIPO DE RECEPCIONES, SOLICITA TU PRESUPUESTO</h1>
<h1>Llegamos más cerca de ti servicio a domicilio GRATUITO: Teléfonos 91 528 52 32 / 645 355 819</h1></div>
<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
<div id="pie"><h2>MENU DE LUNES A VIERNES A 6,90 EUROS</h2></div> 
<!-- FIN CODIGO PIE DE PAGINA -->
<div id="curva-inferior"></div>
</div>
</body>
</html>
Prueba con ese y si no funciona probablemente es porque tienes que subirlos al servidor para que se vea correctamente
ricarducho · · Solicitar retirada
Gracias el codigo funciono fenomenal y quedo superbien gracias por tu ayuda.


Ricarducho
fada · · Solicitar retirada
Gracias doodleo, habia decidido usar uno hecho en javascript pero al final me quedo con este .
Rabs · · Solicitar retirada
Tengo una rpegunta. Necesito modificar el tiempo que tarda en ponerse cada imagen... ¡Alguien me dice donde tengo que tocar el código?
Rabs · · Solicitar retirada
Ya, lo hize tranquilo, pero no encuentro el punto exacto. Si meddecís la linea , yo ya me aclaro mejor :P
johnpeterjp · · Solicitar retirada
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.