title: Display a specific slide on page load based on the link selected
body: <p>I'm using a JQuery slider that displays 4 adjacent Wordpress posts in one slide. The posts are displaying services that the user can click on to view the selected service. There are 2 slides that show these service - 4 in each slide. Each service page includes the slider at the top, with the service descriptions under it.</p>
  
  <p><a href="http://www.richmindonline.com/virtual/service-options/" rel="nofollow">http://www.richmindonline.com/virtual/service-options/</a></p>
  
  <p>The problem is that I want the 2nd slide to load first - only when the user chooses a product on the 2nd slide.  </p>
  
  <p>How do I set this up?  Here's the script for loading the slider - it's inside of a plugin in Wordpress.</p>
  
  <p>I will upload additional code if needed.</p>
  
  <pre><code>   //$upload_dir = wp_upload_dir();
  $output = '&lt;!--Automatic Image Slider w/ CSS &amp; jQuery with some customization--&gt;';
  $output .='&lt;script type="text/javascript"&gt;
  $j = jQuery.noConflict();
  $j(document).ready(function() {';
  
  //Set Default State of each portfolio piece
  if ($pagination_style != '3' ){
      $output .='$j("#rps .paging").show();';
  }
  $output .='$j("#rps .paging a:first").addClass("active");
  
  $j(".slide").css({"width" : '.$width.'});
  $j("#rps .window").css({"width" : '.($width).'});
  $j("#rps .window").css({"height" : '.$height.'});
  
  $j("#rps .col").css({"width" : '.(($width/$post_per_slide)-2).'});
  $j("#rps .col").css({"height" : '.($height-4).'});
  $j("#rps .col p.post-title span").css({"color" : "'.($post_title_color).'"});
  $j("#rps .post-date").css({"top" : '.($height-20).'});
  $j("#rps .post-date").css({"width" : '.(($width/$post_per_slide)-12).'});';
  
  if (!empty($post_title_bg_color_js)){
      $output .='$j("#rps .col p.post-title").css({"background-color" : "'.($post_title_bg_color_js).'"});';
  }
  
  $output .='var imageWidth = $j("#rps .window").width();
  //var imageSum = $j("#rps .slider div").size();
  var imageReelWidth = imageWidth * '.$paging.';
  
  //Adjust the image reel to its new size
  $j("#rps .slider").css({"width" : imageReelWidth});
  
  //Paging + Slider Function
  rotate = function(){    
      var triggerID = $active.attr("rel") - 1; //Get number of times to slide
      //alert(triggerID);
      var sliderPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
  
      $j("#rps .paging a").removeClass("active"); 
      $active.addClass("active");
  
      //Slider Animation
      $j("#rps .slider").stop(true,false).animate({ 
          left: -sliderPosition
      }, 500 );
  }; 
  var play;
  //Rotation + Timing Event
  rotateSwitch = function(){      
      play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
          $active = $j("#rps .paging a.active").next();
          if ( $active.length === 0) { //If paging reaches the end...
              $active = $j("#rps .paging a:first"); //go back to first
          }
          rotate(); //Trigger the paging and slider function
      }, '.$slider_speed.');
  };
  
  rotateSwitch(); //Run function on launch
  
  //On Hover
  $j("#rps .slider a").hover(function() {
      clearInterval(play); //Stop the rotation
  }, function() {
      rotateSwitch(); //Resume rotation
  }); 
  
  //On Click
  $j("#rps .paging a").click(function() { 
      $active = $j(this); //Activate the clicked paging
      //Reset Timer
      clearInterval(play); //Stop the rotation
      rotate(); //Trigger rotation immediately
      rotateSwitch(); // Resume rotation
      return false; //Prevent browser jump to link anchor
  }); 
  });
  
  &lt;/script&gt;';
  </code></pre>