Javascript and Jquery changes to Sider

  • mattbodie

    (@mattbodie)


    12 years, 8 months 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
			});

		});
Viewing 9 replies - 1 through 9 (of 9 total)
  • Jackson Whelan

    (@madjax)

    12 years, 8 months 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/

    Thread Starter mattbodie

    (@mattbodie)

    12 years, 8 months 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

    });

    Jackson Whelan

    (@madjax)

    12 years, 8 months 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

    Thread Starter mattbodie

    (@mattbodie)

    12 years, 8 months 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?

    Jackson Whelan

    (@madjax)

    12 years, 8 months 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.

    Thread Starter mattbodie

    (@mattbodie)

    12 years, 8 months 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?

    Jackson Whelan

    (@madjax)

    12 years, 8 months 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.

    Thread Starter mattbodie

    (@mattbodie)

    12 years, 8 months 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?

    Jackson Whelan

    (@madjax)

    12 years, 8 months 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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Javascript and Jquery changes to Sider’ is closed to new replies.