WordPress.org

Ready to get started?Download WordPress

Forums

Javascript and Jquery changes to Sider (10 posts)

  1. mattbodie
    Member
    Posted 2 years ago #

    I have a wordpress site that runs a javascript slider and I want to alter the code so that the slider will not advance to the next picture when a mouse hovers. Here's the site http://www.mindstreamacademy.com/

    Any ideas how to make this happen?

    This is the code (i think) that controls the slider:

    <script type="text/javascript">
    		// initialise plugins
    		jQuery(function(){
    			// main navigation init
    			jQuery("#slider").faded({
    				speed: 1000,
    				crossfade: false,
    				bigtarget: false,
    				loading: true,
    				autoplay: 10000,
    				autorestart: 4000,
    				autopagination:true
    });
    
    			jQuery("#faded2").faded({
    				loading: true,
    				speed: 1000,
    				crossfade: false,
    				bigtarget: false,
    				loading: true,
    				autoplay: 5000,
    				autorestart: 8000,
    				autopagination:false
    			});
    
    			/*jQuery('ul.sf-menu').superfish({
    				animation:   {opacity:'show', height:'show'},
    				delay:       1000,
    				speed:       'fast',
    				autoArrows:  false,
    				dropShadows: 'fast'
    			});*/
    			jQuery('ul.sf-menu').superfish({
    				animation:   {opacity:'show'},
    				dropShadows: false
    			});
    
    		});
  2. Jackson
    Member
    Posted 2 years ago #

    You need to add

    ,
    hoverPause: true

    After

    autopagination:false

    So...

    autopagination:true,
    hoverPause: true
    });

    Be sure to add the additional comma after autopagination:false

    Looking at your code you have 2 sliders, so you will do this in two locations.

    Documentation on the slider JS is here:

    http://slidesjs.com/

  3. mattbodie
    Member
    Posted 2 years ago #

    Thanks for the quick reply. I did as you suggested but it did not work. Any suggestions?

    Code now reads:
    ` <script type="text/javascript">
    // initialise plugins
    jQuery(function(){
    // main navigation init
    jQuery("#slider").faded({
    speed: 1000,
    crossfade: false,
    bigtarget: false,
    loading: true,
    autoplay: 10000,
    autorestart: 4000,
    autopagination:true,
    hoverPause: true
    });

    jQuery("#faded2").faded({
    loading: true,
    speed: 1000,
    crossfade: false,
    bigtarget: false,
    loading: true,
    autoplay: 5000,
    autorestart: 8000,
    autopagination:false,
    hoverPause: true

    });

  4. Jackson
    Member
    Posted 2 years ago #

    My mistake, you are using an outdated version of 'Faded' which does not support 'hoverPause'

    https://github.com/nathansearles/Faded

    You should upgrade to

    https://github.com/nathansearles/Slides

  5. mattbodie
    Member
    Posted 2 years ago #

    I'm actually not using that plugin at all, I don't think. It's not listed in active plugins. Is there something I'm missing?

  6. Jackson
    Member
    Posted 2 years ago #

    It's a jquery plugin, not a WordPress plugin, so there's nothing to see under active plugins in /wp-admin/

    Your theme is loading the .js file.

  7. mattbodie
    Member
    Posted 2 years ago #

    You'll have to explain my "newbness" but I downloaded the zip file, how do I upgrade my js files? Do I just replace the jquery.faded.js with the new ones?

  8. Jackson
    Member
    Posted 2 years ago #

    It's going to take a bit more than that I'm afraid.

    1. Slides uses a different initialization code, so your jQuery in the head is going to need to change. EX:
      jQuery("#slider").slides({
      ...
      });

      instead of:

      jQuery("#slider").faded({
      ...
      });

      Plus, it seems the new version uses different configuration variables, so for example:
      speed: 1000
      is not valid, but rather:
      fadeSpeed:1000
      The options are well documented here.

      http://slidesjs.com/

      You may wish to start with just the default options, and go from there.

      jQuery("#slider").slides();
    2. Depending on how your theme is setup you will need to edit the header.php file to load your new script, and remove the old one.
    3. You will need to be careful with auto upgrades to your theme as they would overwrite these customizations. You may want to look into child themes.
    4. Backup the files you're making changes to. You may break things, it might get ugly. Be prepared to revert to what you had before.

    I hope that helps. This may a bit much depending on your comfort level. Good luck.

  9. mattbodie
    Member
    Posted 2 years ago #

    So there's no way of just altering the script as is? I will eventually upgrade, but for the time being is there anyway to just use what I've got?

  10. Jackson
    Member
    Posted 2 years ago #

    If you're talking about modifying jquery.faded.js to include the pause on hover feature –- I think you'd find that would require a lot more work and a working knowledge of jQuery to pull off.

    You may want to contact the Theme's author and see if an upgrade to the theme is available.

Topic Closed

This topic has been closed to new replies.

About this Topic