HTML interesse |
|
Probeer dit eens:
$(document).ready(function() {
//Speed of the slideshow
var speed = 8000;
//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('newsscoller(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('newsscoller(0)', speed);
return false;
});
//Next Slide by calling the function
$('#btn-next').click(function () {
newsscoller(0);
return false;
});
//Previous slide by passing prev=1
$('#btn-prev').click(function () {
newsscoller(1);
return false;
});
//Mouse over, pause it, on mouse out, resume the slider show
$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed);
}
);
});
function newsscoller(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
if(next_image == $('#gallery li:first')){
var scrollSnelheid = 1;
}else{
var scrollSnelheid = 800;
}
$('#mask-gallery').scrollTo(next_image, scrollSnelheid);
$('#mask-excerpt').scrollTo(next_excerpt, scrollSnelheid);
}
$(document).ready(function() { //Speed of the slideshow var speed = 8000; //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('newsscoller(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('newsscoller(0)', speed); return false; }); //Next Slide by calling the function $('#btn-next').click(function () { newsscoller(0); return false; }); //Previous slide by passing prev=1 $('#btn-prev').click(function () { newsscoller(1); return false; }); //Mouse over, pause it, on mouse out, resume the slider show $('#slider').hover( function() { clearInterval(run); }, function() { run = setInterval('newsscoller(0)', speed); } ); }); function newsscoller(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 if(next_image == $('#gallery li:first')){ var scrollSnelheid = 1; }else{ var scrollSnelheid = 800; } $('#mask-gallery').scrollTo(next_image, scrollSnelheid); $('#mask-excerpt').scrollTo(next_excerpt, scrollSnelheid); }
|