Menu
I would like to stop the following “Slideshow with setTimeout” by mouseover of elements with the class “.imageWrapper” – start by mouseout. Thank you all for your help!
Here’s the script:
`let showNextPictureGalleryImageTimeout;
$(document).on(“click”, “.picture-gallery .images img”, function() {
clearTimeout(showNextPictureGalleryImageTimeout);
const pictureGallery = $(this).closest(“.picture-gallery”);
const images = $(‘.images’, pictureGallery);
const activeImage = $(this);
$(‘img’, images).removeClass(‘active’);
activeImage.addClass(‘active’);
$(“.title”, pictureGallery).html(“”);
const currentActiveImage = $(“.fullshow img”, pictureGallery);
if(currentActiveImage.length === 0) {
$(“.fullshow”, pictureGallery).append(activeImage.clone());
$(“.title”, pictureGallery).html(activeImage.attr(“title”));
} else {
currentActiveImage.fadeTo(400,0.30, function() {
currentActiveImage.attr(“src”, activeImage.attr(“src”));
currentActiveImage.attr(“title”, activeImage.attr(“title”));
}).fadeTo(400,1, function() {
$(“.title”, pictureGallery).html(activeImage.attr(“title”));
});
}
showNextPictureGalleryImageTimeout = setTimeout(function() {
let nextActiveImage = $(‘img’, activeImage.closest(‘.imageWrapper’).next());
if(nextActiveImage.length === 0) {
nextActiveImage = $(‘img’, $(‘.imageWrapper’, pictureGallery).first());
}
nextActiveImage.trigger(‘click’);
}, 8000);
});`
I tried this code:
`let showNextPictureGalleryImageTimeout;
$(document).on(“click”, “.picture-gallery .images img”, function() {
clearTimeout(showNextPictureGalleryImageTimeout);
const pictureGallery = $(this).closest(“.picture-gallery”);
const images = $(‘.images’, pictureGallery);
const activeImage = $(this);
$(‘img’, images).removeClass(‘active’);
activeImage.addClass(‘active’);
$(“.title”, pictureGallery).html(“”);
const currentActiveImage = $(“.fullshow img”, pictureGallery);
if(currentActiveImage.length === 0) {
$(“.fullshow”, pictureGallery).append(activeImage.clone());
$(“.title”, pictureGallery).html(activeImage.attr(“title”));
} else {
currentActiveImage.fadeTo(400,0.30, function() {
currentActiveImage.attr(“src”, activeImage.attr(“src”));
currentActiveImage.attr(“title”, activeImage.attr(“title”));
}).fadeTo(400,1, function() {
$(“.title”, pictureGallery).html(activeImage.attr(“title”));
});
}
$(‘.imageWrapper img’).mouseover(function(){
clearIntervall(showNextPictureGalleryImageTimeout);
}).mouseout(function(){
showNextPictureGalleryImageTimeout = setIntervall(function() {
let nextActiveImage = $(‘img’, activeImage.closest(‘.imageWrapper’).next());
if(nextActiveImage.length === 0) {
nextActiveImage = $(‘img’, $(‘.imageWrapper’, pictureGallery).first());
}
nextActiveImage.trigger(‘click’);
}, 8000);
});
});`
Sorry, I can’t develop at all. I thought it might be a very simple snippet of code from which I can learn something for the future.