Slider, avanzar onclick

Buenas, tengo este código, bastante sencillo, soy novato jeejeje

HTML

<div id="photoShowContainer">
<div id="photoShowWrap">
<div id="photoShow">
<img src="./recursos/imagenes/portfolio/3/2.jpg"/>
<img src="./recursos/imagenes/portfolio/3/3.jpg"/>
<img src="./recursos/imagenes/portfolio/3/4.jpg"/>
<img src="./recursos/imagenes/portfolio/3/5.jpg"/>
<img id= "one" src="./recursos/imagenes/portfolio/3/1.jpg"/>
</div>
</div>
</div>

CSS

#photoShowContainer{
margin: 0px auto 0px auto;
position: relative;
width: 800px;
height: 400px;
}

#photoShowWrap{
height: 400px;
overflow: hidden;
position: relative;
width: 100%;
z-index: 1;
}

#photoShow{
height: 400px;
position: relative;
width: 2000px;
}

#photoShow img{
float: left;
height: 400px;
width: 400px;
}

JAVASCRIPT

$(document).ready(function() {
setInterval(rotateImages, 4000);
});
function rotateImages(){
$("#photoShow").animate({marginLeft: "-400px"}, 1000).delay(4000);
$("#photoShow").animate({marginLeft: "-800px"}, 1000).delay(4000);
$("#photoShow").animate({marginLeft: "-1200px"}, 1000).delay(4000);
$("#photoShow").animate({marginLeft: "-1600px"}, 1000).delay(4000);
$("#photoShow").animate({marginLeft: "0px"}, 1000).delay(4000);
}

-------------------------------------------------------------------------

Funciona bien, van pasando las imágenes correctamente, lo que me gustaría es que si el usuario quiere acelerar el proceso pueda dar click al div y la imagen pase sin esperar los 4 segundos...

No me vale next, preview, pues entra en conflicto con otro script que tengo, no entiendo mucho de javascript, pero lo he probado y no funciona, con darle click al div me vale...

Un saludo y gracias!

 

<img src="./recursos/imagenes/portfolio/3/2.jpg" onclick="rotateImages();" style="cursor: pointer;" />

 

No funciona, ni poniéndolo en una imagen, en todas, en los divs... doesn,t work... Gracias de todas maneras

 

Prueba a modificar la propuesta de @Sphyr0 en el evento "onclick":
onclick="rotateImages();" por onclick="javascript:rotateImages();"

Recuerda que debes agregar el onclick (y el atributo style con su contenido, aunque esto es meramente estético) en cada etiqueta IMG, para que hagas el click en la imagen que lo hagas del slider, haga el efecto.

 

Si justice13, los coloqué en todas las imágenes, y con el tuyo también pero nada :/ Thanks

 

Si pudieras pasarme un ZIP con todos los archivos (manteniendo estructura de ficheros/directorios) por privado, igual puedes subirlo a alguna plataforma tipo Drive/Mega y pasarme un enlace de descarga. Podría echarle un vistazo a ver si localizo el problema. No debería tener fallo en principio, mi sugerencia a efectos prácticos era lo mismo que te comentó @Sphyr0, solo sumando "javascript:" porque a veces algunos navegadores no reconocen el tipo de lenguaje si no se especifica.

 

Teóricamente el ejemplo que te dí debió funcionar pero prueba así:

<a href="javascript:rotateImages();"><img src="./recursos/imagenes/portfolio/3/2.jpg"/></a>

 

www.en-estudio.com

Nada tio, no va, thanks

 

La última opción que me viene a la mente:

PHP:

<img src="./recursos/imagenes/portfolio/3/2.jpg" onclick="$("#photoShow").animate({marginLeft: "-400px"}, 1000).delay(4000);" style="cursor: pointer;" />
<img src="./recursos/imagenes/portfolio/3/3.jpg" onclick="$("#photoShow").animate({marginLeft: "-800px"}, 1000).delay(4000);" style="cursor: pointer;" />
<img src="./recursos/imagenes/portfolio/3/4.jpg" onclick="$("#photoShow").animate({marginLeft: "-1200px"}, 1000).delay(4000);" style="cursor: pointer;" />
<img src="./recursos/imagenes/portfolio/3/5.jpg" onclick="$("#photoShow").animate({marginLeft: "-1600px"}, 1000).delay(4000);" style="cursor: pointer;" />
<img id= "one" src="./recursos/imagenes/portfolio/3/1.jpg" onclick="$("#photoShow").animate({marginLeft: "0px"}, 1000).delay(4000);" style="cursor: pointer;" />

Si no sirve, sería cuestión que subieras los archivos a algún servidor como dijo @justice13

 

Este slider es lo más limpio que he encontrado:

http://elementalsjs.com/demos/eFlipper
http://elementalsjs.com/liveDemos/eFlipperTest.html