The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Slideshow

2 posters

Go down

Solved Slideshow

Post by Sir Chivas™ April 15th 2024, 7:38 am

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>
 
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

poesia-verses likes this post

Back to top Go down

Solved Re: Slideshow

Post by Razor12345 April 15th 2024, 9:15 am

Good modning!

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>


Slideshow Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1493
Reputation : 262
Language : Ukr, Rus, Eng
Location : Ukraine

poesia-verses likes this post

Back to top Go down

Solved Re: Slideshow

Post by Sir Chivas™ April 15th 2024, 8:02 pm

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. Slideshow Mouais

Code:
$('rotator1708494624450').mouseenter(function () {
    hovering = true;
}).mouseleave(function () {
    hovering = false;
    slideShow();
});
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Slideshow

Post by Razor12345 April 15th 2024, 8:24 pm

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 ===>
Code:
n.style.zIndex = 999;});}, 3500);
.
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
Code:
hovering
variable when the mouse hovers over an element and moves the mouse away from the element.
In the second case - the code containing the
Code:
slideShow
function is run.



Slideshow Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1493
Reputation : 262
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Slideshow

Post by Razor12345 April 25th 2024, 1:33 pm

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.

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


Slideshow Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1493
Reputation : 262
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum