Question

I have two pieces of code that I need to use together. I am trying to ask this question again in a more clear and concise way because reading my last question – confused even me.

I have found what needs to be done, I just don’t think I am doing it right.

What I need to do is to prevent an infinite loop from playing in a JS Slide. Yes, the slide is in WP so there is the whole swapping $ for jQuery to consider.

This is where the theme author says to revise the code:

    <?php if (is_page_template('page-template-home-jquery.php') || is_page_template('page-template-home-jquery-sidebar.php')) { ?>
    <?php echo '<script type="text/javascript">
    // Homepage slider setup. Issued in the footer to accept user-set variables.
    jQuery(document).ready(function(){
jQuery(\'#slides\').slides({
      preload: false,
      //preloadImage: \'http://files.truethemes.net/themes/sterling-wp/ajax-loader.gif\',
      autoHeight: true,
      effect: \''.$truethemes_jslide_effect.'\',
      slideSpeed: '.$truethemes_jslide_speed.',
      play: '.$truethemes_jslide_delay.',
      randomize: '.$truethemes_jslide_randomize.',
      hoverPause: '.$truethemes_jslide_pause_hover.',
      pause: '.$truethemes_jslide_delay.',

  });
    });
    </script>';?>
    <?php } ?> 

This is what is “supposed” to accomplish what I need and I have found it working on other sites:

    $(function(){
    var total = $("#slides img").length - 2; // Subtract Two arrows
    $('#slides').slides({
    animationComplete: function(current) {
    if (current >= total) {
    clearInterval($('#slides').data('interval'));
    }
    },
    });

Unfortunately when I try it on my site, it breaks the autoplay and removes the pagination.

This is what I managed to put together in an effort to get it to work:

    jQuery(document).ready(function(){
    var total = $("#slides img").length - 2;
    jQuery('#slides').slides({
    animationComplete: function(current) {
    if (current >= total) {
    clearInterval($('#slides').data('interval'));
    }
    },
    preload: false,
    //preloadImage: 'http://files.truethemes.net/themes/sterling-wp/ajax-loader.gif',
    autoHeight: true,
    effect: 'fade',
    slideSpeed: 10000,
    play: 7000,
    randomize: false,
    hoverPause: true,
    pause: 7000,
    });
    }); 

You may notice that my effort does not include the “pre-set” settings being pulled though in the original code included in my theme which is riddled in php (to me).

I know I am not doing this properly and may not be on the right track. I did get a response from the “author” whose directions were to put it in the footer and upload. Don’t know about you, but I think he or she should have assumed that I would have tried that before contacting them. So, needless to say… that was a bust.

Here is a link to a website that is using the code I am trying to incorporate:

http://alliancebrokeragecorp.com/

Any help would be greatly appreciated.

Answer 1

Just in case any one else has trouble trying to do this with in a WP theme, I thought I would post the solution here:

    <?php if (is_page_template('page-template-home-jquery.php') || is_page_template('page-template-home-jquery-sidebar.php')) { ?>
    <?php echo '<script type="text/javascript">
    // Homepage slider setup. Issued in the footer to accept user-set variables.
    jQuery(document).ready(function(){
    var total = jQuery(".slides_container .home-slider-post").length;
    jQuery(\'#slides\').slides({
    animationComplete: function(current) {
      if (current >= total) {
      clearInterval(jQuery("#slides").data("interval"));
     }
   },
      preload: false,
      autoHeight: true,
      effect: \''.$truethemes_jslide_effect.'\',
      slideSpeed: '.$truethemes_jslide_speed.',
      play: '.$truethemes_jslide_delay.',
      randomize: '.$truethemes_jslide_randomize.',
      //hoverPause: '.$truethemes_jslide_pause_hover.',
     // pause: '.$truethemes_jslide_delay.',
  });
   });
 </script>';?>
 <?php } ?>