jQuery slideshow con controles y efectos

[Adolfiten]

Tengo que hacer un slideshow con controles de play, pausa, siguiente y anterior, que a su vez tiene que mostrar fotos y texto por separado, es decir, en un box cargo la foto con un efecto ken burns y en otro totalmente aparte que aparezca cierto texto.

Estoy intentando hace mucho con jquery y un plug in (CrossSlide) y no logro adaptarlo.

La aparición del texto y de las imágenes (que necesariamente tienen que tener ese efecto, el último de la lista de la url que puse) tiene que ser sincrónico. Si el usuario presiona pausa se deben detener ambas cosas y lo mismo si presiona play, ambas deben retomar la marcha.

Es una especie de doble slideshow con los mismos controles.


Cualquier comentario o sugerencia es bienvenido, acepto tips de otros frameworks, lo que sea.

Saludos y gracias.

[Panino5001]

Mejor preguntar en el foro que más se adapte a tus necesidades. Reporto el mensaje para que lo muevan a Frameworks.

[hermetika]

Prueba galleriffic, que es un pluygin de jquery para galerías. Creo que es lo que deseas y es realmente fácil de usar.

Puedes ver un ejemplo en http://www.villasbarlovento.com/vill...p?id=1&lang=es

[Adolfiten]

Gracias amigo pero eso no tiene efecto ken burns que es necesario.

Necesito algo como el último ejemplo de este link, pero con los controles y demás detalles que mencioné.

Saludos.

[venkman]

Quizá lo que deberías hacer es ampliar ese "y no logro adaptarlo" de tu mensaje. Quiero decir, ¿qué es lo que tienes hecho? ¿Qué es lo que te da problemas? ¿Qué te falta?

Deberías poner aquí lo que tienes y explicar qué te falta/falla.

[Adolfiten]

No he podido lograr detener el efecto de la imagen y retomarlo, eso es lo principal. Además (no he dedicado tiempo porque primero lo primero) no puedo acceder a una imagen en particular de todas las que componen el slideshow.

Lo bueno sería conseguir un script que haga un efecto ken burns individualmente, cosa que sería más fácil de adaptar para incluirlo en lo que tengo que hacer.

Si no fui muy explícito lo vuelvo a explicar, por ahora gracias.

[venkman]

Entiendo lo que intentas conseguir. Eso creo que está claro. Necesitas un pase de imágenes mediante el efecto ken burns que además se pueda controlar (parar, reanudar, etc).

Bien. Pero lo que no queda claro es en qué quieres que te ayudemos. ¿Quieres que te indiquemos un script que haga exactamente eso? Porque muy probablemente eso no lo vamos a encontrar. Al menos yo no lo conozco. ¿O quieres que te lo hagamos? ¿O que te ayudemos con algún punto concreto, con algún error o problema?


A mi lo único que se me ocurre es este hecho con MooTools. Al menos se parece a lo que quieres (Ken Burns + Controles)

[Adolfiten]

Bien, llegué a un punto donde tengo la necesidad de cambiar la forma de alimentación del slider, de manera estándar el plugin que lo hace posible se alimenta de esta forma:

Código HTML:

$(document).ready(function(){
		$('#test1').crossSlide({
				  fade: 1
				}, [
				  {
					src:  'images/1.jpg',
					href: 'images/1.jpg',
					from: '100% 80% 1x',
					to:   '100% 0% 1.7x',
					time: 3
				  }, {
					src:  'images/4.jpg',
					href: 'images/4.jpg',
					from: '100% 50%',
					to:   '30% 50% 1.5x',
					time: 2
				  }
				]);
	});

Necesito poder alimentarlo de otra forma, es decir, no tener prefijados los elementos de ese array que pasa como segundo parámetro, sino que yo poder generarlo dinámicamente y que el plugin no note la diferencia y lo acepte.

¿Alguna idea?


Venkman, a ese otro lo había visto pero por alguna razón que no recuerdo lo descarté, gracias.

[venkman]

Bien, y ¿de dónde quieres sacar esos elementos? Quiero decir, pon un ejemplo de cómo los sacas y te intentaré poner un ejemplo de cómo hacerlo.

[Adolfiten]

Voy a tener un fichero para sacar datos usando notación JSON con datos fijados, con una cantidad x de imágenes y voy a necesitar alguno de esos ítems, no todos, para poder ir pasando de a una con el plugin, y de esa manera usar un índice para poder acceder a la que necesite sin necesidad de pasar por todas las anteriores (una especie de tour guiado indexado)

La notación del fichero plano sería en JSON, de esta manera:

Código:

{
	
		imagenes:[
		{
			id:1,
			src:'1.jpg',
			from:'100% 50% 1x',
			to:'100% 80% 1.7x',
			time:7,
			texto:'Este es el texto que se va a mostrar en el box al lado de la imagen.'
		},
		{
			id:2,
			src:'2.jpg',
			from:'100% 50% 1x',
			to:'100% 80% 1.7x',
			time:7,
			texto:'Este es el texto que se va a mostrar en el box al lado de la imagen2.'
		},
		{
			id:3,
			src:'3.jpg',
			from:'100% 50% 1x',
			to:'100% 80% 1.7x',
			time:7,
			texto:'Este es el texto que se va a mostrar en el box al lado de la imagen3.'
		}
		]
	
}

[venkman]

Ah, pero a ver...

Lo que quieres parece un poco distinto. ¿Lo que estás diciendo ahora es que quieres "pasarle las imágenes de una en una"? Vamos, que el slide está funcionando y de repente tú le añades una imagen más? ¿Es eso? Es que es bastante distinto.

[Adolfiten]

Voy a invocar el método que hace correr el slideshow pero lo edité, para que no haga el loop y vuelva a una función externa que tengo que controla la reproducción. Para lograr ese control es necesario que yo alimente el método con nuevas imágenes.

El slide luego de cada imagen se detiene y vuelve a la función de control, que hace pasar a la siguiente y así con el resto, dando continuidad.

[venkman]

Entonces has modificado el código del CrossSlide y, sin saber yo cómo es el código ahora, ¿quieres que te diga cómo debes llamarlo?

En fin, no sé si esto te servirá de algo, pero...

Si tienes:

Código javascript:

var lista = {
    
        imagenes:[
        {
            id:1,
            src:'1.jpg',
            from:'100% 50% 1x',
            to:'100% 80% 1.7x',
            time:7,
            texto:'Este es el texto que se va a mostrar en el box al lado de la imagen.'
        },
        {
            id:2,
            src:'2.jpg',
            from:'100% 50% 1x',
            to:'100% 80% 1.7x',
            time:7,
            texto:'Este es el texto que se va a mostrar en el box al lado de la imagen2.'
        },
        {
            id:3,
            src:'3.jpg',
            from:'100% 50% 1x',
            to:'100% 80% 1.7x',
            time:7,
            texto:'Este es el texto que se va a mostrar en el box al lado de la imagen3.'
        }
        ]
    
}
 

Y lo que quieres es ir llamando a... $('#test1').crossSlide cada vez con una imagen de esa lista, no tienes más que ir haciendo:

Código javascript:

$('#test1').crossSlide({ fade: 1 }, [ lista.imagenes[0] ]);
$('#test1').crossSlide({ fade: 1 }, [ lista.imagenes[1] ]);
$('#test1').crossSlide({ fade: 1 }, [ lista.imagenes[2] ]);
// o dentro de un bucle o como quieras