Slideshow
2 posters
Page 1 of 1
Slideshow
Howcan I make this slideshow stop when hovering over a certain image?
- Code:
<style type="text/css">#rotator1708494624450 {height:100px;} #rotator1708494624450 a{position:absolute;background:#FFFFFF;border:1px solid #CCCCCC;padding:4px;} #rotator1708494624450 img { height:90px;width:728px; }</style>
<div id="rotator1708494624450">
<a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner" style="z-index:999" id="itemActif1708494624450"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f28/11/40/02/06/33171015.png" /></a> <a target="_blank" title="Fgsuport" href="https://fgsuport.forumotion.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Fgsuport" src="https://i.servimg.com/u/f96/18/89/87/02/fgsupo10.jpg" /></a><a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f82/18/13/58/62/clickt10.png" /></a><a target="_blank" title="Private Sector" href="https://private-sector.forumotion.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Private Sector" src="https://i.servimg.com/u/f60/20/51/79/32/topban10.png" /></a><a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f96/18/89/87/02/adforu10.jpg" /></a><a target="_blank" title="Admin Junkies " href="https://admin-junkies.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Admin Junkies" src="https://i.servimg.com/u/f96/18/89/87/02/adminj10.png" /></a> <a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner" style="z-index:999" id="itemActif1708494624450"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f96/18/89/87/02/afbnr10.jpg" /></a>
</div><script type="text/javascript">(function(){var r = document.getElementById("rotator1708494624450"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {var a = document.getElementById("itemActif1708494624450"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1708494624450";n.style.zIndex = 999})},3500)})();</script>
poesia-verses likes this post
Re: Slideshow
Good modning!
Add an event for the mouse enter the slider area and the mouse leaving the slider area
Add an event for the mouse enter the slider area and the mouse leaving the slider area
- Code:
<style type="text/css">#rotator1708494624450 {height:100px;} #rotator1708494624450 a{position:absolute;background:#FFFFFF;border:1px solid #CCCCCC;padding:4px;} #rotator1708494624450 img { height:90px;width:728px; }</style>
<div id="rotator1708494624450">
<a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner" style="z-index:999" id="itemActif1708494624450"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f28/11/40/02/06/33171015.png" /></a> <a target="_blank" title="Fgsuport" href="https://fgsuport.forumotion.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Fgsuport" src="https://i.servimg.com/u/f96/18/89/87/02/fgsupo10.jpg" /></a><a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f82/18/13/58/62/clickt10.png" /></a><a target="_blank" title="Private Sector" href="https://private-sector.forumotion.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Private Sector" src="https://i.servimg.com/u/f60/20/51/79/32/topban10.png" /></a><a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f96/18/89/87/02/adforu10.jpg" /></a><a target="_blank" title="Admin Junkies " href="https://admin-junkies.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Admin Junkies" src="https://i.servimg.com/u/f96/18/89/87/02/adminj10.png" /></a> <a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner" style="z-index:999" id="itemActif1708494624450"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f96/18/89/87/02/afbnr10.jpg" /></a>
</div><script type="text/javascript">
(function() {
var r = document.getElementById("rotator1708494624450"),
l = r.getElementsByTagName("A"),
rotate;
function startRotation() {
rotate = window.setInterval(function() {
var a = document.getElementById("itemActif1708494624450"),
n = jQuery(a).next()[0] || l[0];
if (!a) return window.clearInterval(rotate);
n.style.opacity = 1;
n.style.zIndex = 998;
jQuery(a).animate({"opacity":0},800,"linear",function() {
a.id = "";
a.style.zIndex = "";
n.id = "itemActif1708494624450";
n.style.zIndex = 999;
});
}, 3500);
}
function stopRotation() {
window.clearInterval(rotate);
}
r.addEventListener("mouseenter", stopRotation);
r.addEventListener("mouseleave", startRotation);
startRotation();
})();
</script>
Razor12345- Support Moderator
- Posts : 1576
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine
poesia-verses likes this post
Re: Slideshow
Your code works, just one thing I notice every time I go to another part of the forum, the slideshow seems to freeze and it does not load the slideshow right away, it kinda kicks in but it shows all images at once. After it works perfectly if I stay on the page without refreshing the page or changing.
I had this piece of code, but I wasn't sure if it would work or where to even place it.
I had this piece of code, but I wasn't sure if it would work or where to even place it.
- Code:
$('rotator1708494624450').mouseenter(function () {
hovering = true;
}).mouseleave(function () {
hovering = false;
slideShow();
});
Re: Slideshow
I notice every time I go to another part of the forum, the slideshow seems to freeze and it does not load the slideshow right away
A timer is used to change images. In your case, the image should change after 3500 ms ===>
|
JS has a concept of execution queue since JS is single-threaded. Most likely you have bulk code on another page that needs a lot of resources to execute. Its processing takes more than 3500ms and the timer is slowing down. The timer waits for 3500ms to pass and then waits for the bulk code to finish executing. When the bulk code is executed, it is the timer's turn and executed incorrectly first time.
Perhaps there is still a piece of code that you didn't send.
- Code:
$('rotator1708494624450').mouseenter(function () {
hovering = true;
}).mouseleave(function () {
hovering = false;
slideShow();
});
This code simply changes the value of the
|
In the second case - the code containing the
|
Razor12345- Support Moderator
- Posts : 1576
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine
Re: Slideshow
Good afternoon!
It's been more week now. We have not heard back from the author.
I'm closing the topic and moving it to the archive.
If your problem is not solved - send me a private message and I will open this topic for further help.
It's been more week now. We have not heard back from the author.
I'm closing the topic and moving it to the archive.
If your problem is not solved - send me a private message and I will open this topic for further help.
Problem solved & topic archived.
|
Razor12345- Support Moderator
- Posts : 1576
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum