SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pause images onMouseover

    Hi Guys,

    Is it possible to pause images when the user mouse overs an image. For example, I need to adapt the Javascript on this site to incorporate a pause when the user hovers over the image.

    Website

    Is this possible?

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Dartmouth, MA, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, it's possible. You would need to add some code that takes care of stopping and starting up the images again. Then you would need to call on that code in functions you assign to the event handlers of the slideshow. For example, if you name the function that stops the images as "stop", then you would set up the hover behavior like this:

    Code JavaScript:
    document.getElementById("slideshow").onmouseover = stop;

    Then you'll want to make sure the images start up again when the user takes their cursor off:

    Code JavaScript:
    document.getElementById("slideshow").onmouseout = play;

    Make sure you don't include parentheses at the end when specifying the functions to be executed onmouseover and onmouseout. By leaving them out, the browser treats them as references to those functions and assigns those references to the onmouseover and onmouseout properties, which is what we want.

    There are better ways to do this, I believe the more proper way to add event listeners like this is to use the addEventListener function rather than just using an equals sign as I've done here, but I'm not sure whether it's supported by all platforms (ahem, Internet Explorer). IE does have its own method for doing this though, I'm just not sure what it is. Anyway, the advantage of doing it using a function like addEventListener is that you can store multiple functions to all be executed when a certain event happens, rather than just one, which is what using the equals sign will do. I'm used to handling events with the jQuery library, which would do the same thing as the code I've written above like this:

    Code JavaScript:
    $("#slideshow").hover(stop, play);

    ...but you can ignore this last example if you're not familiar with jQuery.

    Hopefully one of these methods of getting this done will work for you.

  3. #3
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bhawk90 View Post
    Code JavaScript:
    $("#slideshow").hover(stop, play);
    Hi - thanks for your reply.

    I tried your last suggestion as im using jQuery in my page and I used the following code:

    Code JavaScript:
    <script type="text/javascript">
    $(function() {
      var ul = $('#mygalone ul'),
          im = $('li:first-child img', ul),
          dummy = $('<img>');
      ul.css('visibility','hidden');
      dummy.load(function(){
        ul.css('visibility','');
        $('#header2').css('background', 'none');
        });
      dummy.attr('src', im.attr('src'));
      $('#mygalone').cycle({speed:4000, slideExpr:'li img'});
      $('#mygalone').hover(stop, play);
    });
    </script>

    However, it didn't seem to work. Any ideas?

    Thanks,

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Dartmouth, MA, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What did you write for code in your stop and play functions?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Dartmouth, MA, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I found the site for the jQuery plug-in you're using, and according to the documentation for how it works, all you have to do is modify your call to the cycle() function to look like this:

    Code JavaScript:
    $('#mygalone').cycle({speed:4000, slideExpr:'li img', pause: true});

    According to the documentation, setting the 'pause' option to true causes the slideshow to stop when the user hovers over it with the mouse. By default it's turned off, so you just have to turn it on when you call the cycle() function like I did above.

    I found the documentation here: JQuery Cycle Plugin - Option Reference

  6. #6
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bhawk90 View Post
    Actually, I found the site for the jQuery plug-in you're using, and according to the documentation for how it works, all you have to do is modify your call to the cycle() function to look like this:

    Code JavaScript:
    $('#mygalone').cycle({speed:4000, slideExpr:'li img', pause: true});

    According to the documentation, setting the 'pause' option to true causes the slideshow to stop when the user hovers over it with the mouse. By default it's turned off, so you just have to turn it on when you call the cycle() function like I did above.

    I found the documentation here: JQuery Cycle Plugin - Option Reference
    Hi! I just inserted the code into the site, but it doesn't seem to be pausing when I mouseover the image - does it work for you?

    I've only tried in Firefox so far...

    Thanks.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Dartmouth, MA, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, it's not working for me...their demo at the bottom of this page does work though: JQuery Cycle Plugin - Beginner Demos.

    I suggest updating to the latest version of the plug-in (JQuery Cycle Plugin - Download) and maybe the latest version of jQuery, and see if it works then.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •