los ids y los class ya los he añadido en la parte del html, tal y como dice en la web que posteé, pero nada no interactúa entre las imágenes que es el problema que se me presenta.
lo que yo queria conseguir es poner por defecto una de las imagenes nada mas al iniciar la web, y esto lo conseguiria llamando a la funcion al cargar la página, pero claro si la funcion no funciona.... malo! XD
le he puesto alert para hacer un poco de seguimiento al script, comprobar valores de variables y ver hasta donde hace su función.
lo del auto play ya lo he arreglado tal y como quería, tan sólo era comentar una linea que llamaba al setinterval
un saludo!^^
Código:
<script>
$(document).ready(function() {
//Speed of the slideshow
var speed = 5000;
//You have to specify width and height in #slider CSS properties
//After that, the following script will set the width and height accordingly
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
//Assign a timer, so it will run periodically
//var run = setInterval('newsslider(0)', speed);
$('#gallery li:first, #excerpt li:first').addClass('selected');
//Pause the slidershow with clearInterval
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
//Continue the slideshow with setInterval
$('#btn-play').click(function () {
run = setInterval('newsslider(0)', speed);
return false;
});
//Next Slide by calling the function
$('#btn-next').click(function () {
newsslider(0);
return false;
});
//Previous slide by passing prev=1
$('#btn-prev').click(function () {
newsslider(1);
return false;
});
//Mouse over, pause it, on mouse out, resume the slider show
/* $('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsslider(0)', speed);
}
); */
//Put this inside $(document).ready()
//For link/number button
$('#links a').click(function () {
//stop the slide show
// clearInterval(run);
//go to the item
goto($(this).attr('rel'));
//resume the slideshow
run = setInterval('newsscoller(0)', speed);
return false;
});
goto("item4");
});
function newsslider(prev) {
//Get the current selected item (with selected class), if none was found, get the first item
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
//if prev is set to 1 (previous item)
if (prev) {
//Get previous sibling
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
//if prev is set to 0 (next item)
} else {
//Get next sibling
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
//clear the selected class
$('#excerpt li, #gallery li').removeClass('selected');
//reassign the selected class to current items
next_image.addClass('selected');
next_excerpt.addClass('selected');
//Scroll the items
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800);
}
//Add this function after newslider function
function goto(item) {
alert(item);
$('#mask-gallery').scrollTo(item, 800);
$('#mask-excerpt').scrollTo(item, 800);
$(item).addClass('selected');
}
</script>